/* Theme mobile_default - tuỳ biến cho Trường PTDTNT THPT tỉnh Điện Biên
 * Chỉ đổi màu sắc và chi tiết, giữ nguyên bố cục gốc. Đồng bộ với theme máy tính (dtnttinh).
 * Nạp từ theme.php (sau style.css). Nếu nâng cấp NukeViet ghi đè theme.php thì thêm lại dòng nạp file này. */
:root {
    --m-green: #0d3d26;
    --m-green2: #14633b;
    --m-red: #b3121b;
    --m-red-dark: #8c0d15;
    --m-gold: #d4a017;
    --m-gold-l: #f3d98b;
    --m-cream: #f6f3ea;
    --m-text: #22302a;
}

body {
    background: var(--m-cream);
    color: var(--m-text);
}

a,
a:link,
a:visited,
a:active {
    color: var(--m-red);
}

a:hover,
a:focus {
    color: var(--m-green2);
}

/* ---- Thanh đầu trang ---- */
header.first-child {
    background: var(--m-green);
    background-image: none;
    border-bottom: 3px solid var(--m-gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#header {
    background-image: linear-gradient(to bottom, #14633b 0, #0d3d26 100%);
    border-bottom: 0;
}

#header .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    left: 8px;
    right: 120px;
    min-width: 0;
}

#header .logo > a {
    flex: 0 0 auto;
    line-height: 0;
}

#header .logo img {
    display: block;
    flex: 0 0 38px;
    width: 38px !important;
    height: 38px !important;
    max-width: 38px;
    max-height: 38px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    box-shadow: 0 0 0 2px var(--m-gold);
}

/* tên trường cạnh logo (chữ do CSS tạo, không đổi template) */
#header .logo::after {
    content: "Trường PTDTNT THPT tỉnh Điện Biên";
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.mbt,
.mbt-lg {
    color: #fff;
}

.mbt:hover,
.active .mbt,
.mbt-lg:hover,
.active .mbt-lg {
    background-image: none;
    background-color: var(--m-red);
    color: #fff;
}

/* ---- Menu sổ xuống (nút ba gạch) ---- */
#metismenu .panel,
.metismenu {
    background: #fff;
    border: 0;
    border-top: 3px solid var(--m-red);
    border-radius: 0 0 12px 12px;
}

.sidebar-nav ul li a {
    color: var(--m-text) !important;
    font-weight: 600;
    border-bottom: 1px dashed #e4dcc2;
}

.sidebar-nav ul li a:hover,
.sidebar-nav ul li.active > a {
    background: #f6f1df !important;
    color: var(--m-red) !important;
}

/* ---- Đường dẫn ---- */
.breadcrumbs {
    background: #fff;
    border-bottom: 1px solid #e8dfc2;
}

.breadcrumbs .home-icon a {
    color: var(--m-green2);
    border-right-color: #e8dfc2;
}

.breadcrumb > li + li:before {
    color: #b9b19a;
}

.breadcrumb > li:last-child a {
    color: var(--m-red);
    font-weight: 600;
}

/* ---- Thẻ nội dung ---- */
.panel,
.panel-default {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(13, 61, 38, 0.12);
    background: #fff;
}

.panel-default > .panel-heading,
.panel-primary > .panel-heading {
    background: #fff;
    border-bottom: 0;
    border-left: 5px solid var(--m-red);
    color: var(--m-red);
    font-weight: 700;
    text-transform: uppercase;
}

.panel-body h1,
.panel-body h2,
h1.title,
.news_column h1 {
    color: var(--m-green);
    font-weight: 700;
}

.panel-body h3 a,
.panel-body h4 a {
    color: var(--m-green);
}

.panel-body h3 a:hover,
.panel-body h4 a:hover {
    color: var(--m-red);
}

.text-muted,
.text-muted a {
    color: #7a837d;
}

/* ---- Nút, ô nhập ---- */
.btn-primary,
.btn-info,
.headerSearch .btn-info {
    background: var(--m-red) !important;
    border-color: var(--m-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover,
.headerSearch .btn-info:hover {
    background: var(--m-green2) !important;
    border-color: var(--m-green2) !important;
}

.btn-success {
    background: var(--m-green2);
    border-color: var(--m-green2);
}

.btn {
    border-radius: 8px;
}

.form-control {
    border-color: #d9d2bb;
    border-radius: 8px;
}

.form-control:focus {
    border-color: var(--m-green2);
    box-shadow: 0 0 0 3px rgba(20, 99, 59, 0.15);
}

.input-group-addon {
    background: #f1ede0;
    border-color: #d9d2bb;
    color: var(--m-green2);
}

.headerSearch input {
    border-color: #d9d2bb;
    border-radius: 18px 0 0 18px;
}

/* ---- Phân trang, thẻ tab ---- */
.pagination > li > a,
.pagination > li > span {
    color: var(--m-green);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--m-red);
    border-color: var(--m-red);
    color: #fff;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    background: var(--m-green2);
    border-color: var(--m-green2);
    color: #fff;
}

.table > thead > tr > th {
    background: var(--m-green2);
    color: #fff;
    border-bottom: 0;
}

/* ---- Thanh dưới cùng ---- */
.footer {
    background: var(--m-red-dark);
    background-image: none;
    border-top: 3px solid var(--m-gold);
}

.footer a,
.footer .mbt {
    color: var(--m-gold-l);
}

/* ---- Cửa sổ trợ giúp (menu chân trang, thông tin liên hệ) ---- */
#winHelp .winHelp,
.winHelp {
    background: #fff;
    color: var(--m-text);
}

#winHelp .panel-heading,
#winHelp h3 {
    color: var(--m-red);
}

.winHelp a {
    color: var(--m-green2);
}

.theme-change {
    border-bottom-color: #e0d9c0;
}

.copyright,
.copyright span a {
    color: #6a746e !important;
}

/* ---- Bài viết / bình luận / thành viên ---- */
.bodytext {
    line-height: 1.75;
}

.bodytext img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.comment .name,
.commentList .name {
    color: var(--m-green);
}

.nv-infodie,
.alert-info {
    background: #f6f3e7;
    border-color: #e8dfc2;
    color: #44504a;
}

.label-primary,
.badge {
    background: var(--m-red);
}

/* ---- Menu sổ xuống: ghi đè màu xanh dương của jquery.metisMenu.css (file này được nạp SAU nên cần độ ưu tiên cao hơn) ---- */
:is(#metismenu, #tip) .metismenu .sidebar {
    background: #fff !important;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav {
    background: #fff !important;
    background-image: none !important;
    border-bottom: 0 !important;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav ul a {
    background: transparent !important;
    background-image: none !important;
    color: #22302a !important;
    font-weight: 600;
    border-top: 1px dashed #e4dcc2 !important;
    box-shadow: none !important;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav ul li:first-child > a {
    border-top: 0 !important;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav ul a:hover,
:is(#metismenu, #tip) .metismenu .sidebar-nav ul a:focus,
:is(#metismenu, #tip) .metismenu .sidebar-nav ul a:active,
:is(#metismenu, #tip) .metismenu .sidebar-nav ul li.active > a {
    background: #f6f1df !important;
    background-image: linear-gradient(to right, #b3121b 4px, rgba(0, 0, 0, 0) 4px) !important;
    color: #b3121b !important;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav ul ul a {
    background: #fbf9f2 !important;
    padding-left: 34px;
    font-weight: 500;
}

:is(#metismenu, #tip) .metismenu .sidebar-nav ul ul a:hover,
:is(#metismenu, #tip) .metismenu .sidebar-nav ul ul a:focus {
    background: #f1ecd8 !important;
}

:is(#metismenu, #tip) .metismenu .arrow {
    color: #14633b !important;
}

/* ---- Nút Xóa/Sửa của quản trị: giữ chữ trắng trên nền màu ---- */
a.btn.btn-danger,
a.btn.btn-danger:hover,
a.btn.btn-danger:focus,
a.btn.btn-danger:active,
.btn-danger,
.btn-danger:hover {
    background: var(--m-red-dark) !important;
    border-color: var(--m-red-dark) !important;
    color: #fff !important;
    opacity: 1 !important;
}

a.btn.btn-primary,
a.btn.btn-primary:hover,
.btn-primary,
.btn-primary:hover {
    color: #fff !important;
}

/* ---- Trang Liên hệ ---- */
.page .well {
    background: #fff;
    border: 1px solid #e4dcc2;
    border-left: 4px solid var(--m-gold);
    border-radius: 8px;
    box-shadow: none;
    color: var(--m-text);
    line-height: 1.6;
}

.page .well p {
    margin: 0 0 8px;
}

.page .well p:last-child {
    margin-bottom: 0;
}

.dtnt-m-info-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtnt-m-info-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px dashed #e4dcc2;
}

.dtnt-m-info-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

.dtnt-m-info-list .ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    background: var(--m-green2);
}

.dtnt-m-info-list .is-red .ico { background: var(--m-red); }
.dtnt-m-info-list .is-gold .ico { background: var(--m-gold); }

.dtnt-m-info-list strong {
    display: block;
    color: var(--m-green);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.dtnt-m-info-list span:not(.ico),
.dtnt-m-info-list a {
    color: var(--m-text);
    word-break: break-word;
}

.dtnt-m-info-list a:hover {
    color: var(--m-red);
}