/* ============================================================
   SimV4 CMS — Theme chuyên nghiệp trên Tabler (Bootstrap 5).
   Gu: ít bo tròn, màu rõ nét, bố cục gọn & cân đối. Brand indigo (đồng bộ Agent).
   Ghi đè biến --tblr-* để cascade toàn bộ component cho nhất quán.
   ============================================================ */
:root {
    /* Override Tabler */
    --tblr-primary: #4f46e5;
    --tblr-primary-rgb: 79, 70, 229;
    --tblr-primary-fg: #ffffff;
    --tblr-border-radius: 6px;
    --tblr-border-radius-sm: 4px;
    --tblr-border-radius-lg: 8px;
    --tblr-border-color: #dde0e8;
    --tblr-border-color-translucent: #dde0e8;
    --tblr-body-bg: #f2f3f7;
    --tblr-body-color: #111827;
    --tblr-font-sans-serif: 'Inter', 'Inter Var', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tblr-link-color: #4f46e5;
    --tblr-link-hover-color: #4338ca;

    /* Tokens CMS */
    --cms-side1: #0b1220;
    --cms-side2: #141d33;
    --cms-accent: #4f46e5;
    --cms-accent-d: #4338ca;
    --cms-ink: #0b1220;
    --cms-text: #111827;
    --cms-muted: #5b6675;
    --cms-line: #dde0e8;
    --cms-line2: #e8eaf0;
}

body {
    background: var(--tblr-body-bg);
    color: var(--cms-text);
    font-feature-settings: "cv03","cv04","cv11";
    letter-spacing: .1px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6 { color: var(--cms-ink); letter-spacing: -.01em; }
::selection { background: rgba(79,70,229,.16); }
:focus-visible { outline: 2px solid rgba(79,70,229,.4); outline-offset: 2px; }

/* Scrollbar mảnh */
* { scrollbar-width: thin; scrollbar-color: #c9cfdc transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd2e0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #aeb7ca; background-clip: content-box; }

/* ---------- Sidebar ---------- */
.navbar-vertical {
    background: linear-gradient(190deg, var(--cms-side1) 0%, var(--cms-side2) 100%);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
    border-right: 0;
}
.navbar-vertical .navbar-brand {
    padding: .95rem .75rem; font-size: 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: .4rem;
}
.navbar-vertical::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); background-clip: content-box; }
.cms-menu { --tblr-navbar-active-bg: transparent; }

/* Tiêu đề khu vực */
.cms-area-title {
    margin: .85rem .25rem .15rem; padding: .85rem .85rem .3rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.06);
}
.cms-area-title:first-of-type { border-top: 0; padding-top: .35rem; }

/* Nhóm cấp 1 */
.cms-menu .nav-link {
    color: rgba(255,255,255,.76); border-radius: 6px; margin: 1px .25rem; padding: .5rem .75rem;
    font-weight: 500; font-size: .875rem; transition: background .15s, color .15s;
}
.cms-menu .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.cms-menu .nav-link-icon { opacity: .82; font-size: 1.05rem; }
.cms-group-toggle { display: flex; align-items: center; }
.cms-group-toggle .cms-caret { margin-left: auto; transition: transform .2s; font-size: .9rem; opacity: .55; }
.cms-group-toggle[aria-expanded="true"] { background: rgba(255,255,255,.05); color: #fff; }
.cms-group-toggle[aria-expanded="true"] .cms-caret { transform: rotate(180deg); }

/* Mục con cấp 2 */
.cms-submenu { padding: 2px 0 6px .95rem; }
.cms-submenu .cms-subitem {
    display: block; color: rgba(255,255,255,.6); padding: .4rem .75rem .4rem 1.4rem;
    border-radius: 5px; margin: 1px .25rem; font-size: .85rem; position: relative; text-decoration: none;
    transition: background .15s, color .15s;
}
.cms-submenu .cms-subitem:hover { color: #fff; background: rgba(255,255,255,.06); }
.cms-submenu .cms-subitem.active {
    color: #fff; font-weight: 600;
    background: linear-gradient(90deg, var(--cms-accent), var(--cms-accent-d));
    box-shadow: 0 6px 14px -5px rgba(79,70,229,.7);
}
.cms-submenu .cms-subitem.active::before {
    content: ""; position: absolute; left: .55rem; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: #fff;
}

/* ---------- Header ---------- */
.navbar.sticky-top {
    background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--cms-line); box-shadow: 0 1px 2px rgba(16,24,40,.04); min-height: 58px;
}
.navbar.sticky-top .input-icon .form-control { background: #f4f6fa; border-color: transparent; border-radius: 6px; }
.navbar.sticky-top .input-icon .form-control:focus { background: #fff; border-color: var(--cms-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.navbar .avatar.bg-primary { background: var(--cms-accent) !important; }

/* ---------- Nội dung ---------- */
.page-body { padding-top: .6rem; padding-bottom: 1.25rem; }
.page-header { padding: .1rem 0 .7rem; margin-bottom: .85rem !important; border-bottom: 1px solid var(--cms-line); }
.page-title { font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--cms-ink); }
.page-pretitle { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cms-muted); }

/* Card */
.card { border: 1px solid var(--cms-line); border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.card-header { padding: .7rem 1.1rem; min-height: auto; border-bottom: 1px solid var(--cms-line); font-weight: 700; color: var(--cms-ink); }
.card-body { padding: 1rem 1.1rem; }
.card-title { font-weight: 700; color: var(--cms-ink); }

/* Tables */
.table { color: var(--cms-text); }
.card-table thead th, .table thead th {
    text-transform: uppercase; font-size: .68rem; letter-spacing: .05em; font-weight: 700;
    color: var(--cms-muted); background: #f6f7fb; border-bottom: 1px solid var(--cms-line);
}
.card-table td, .card-table th { padding-top: .5rem; padding-bottom: .5rem; padding-left: .9rem; padding-right: .9rem; vertical-align: middle; }
.table td { font-variant-numeric: tabular-nums; }
.table-hover tbody tr:hover { background: #f6f7fc; }
/* Bảng cân đối: cột không xuống dòng; cột dài cắt bằng … ; cột cuối (thao tác) giữ nguyên */
.card-table td:not(:last-child), .card-table th:not(:last-child) {
    white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis;
}
.card-table td.cell-wide, .card-table th.cell-wide { max-width: 620px; }
.card-table td.cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--cms-muted); }

/* Buttons — gọn, ít bo, đậm */
.btn { --tblr-btn-padding-y: .4rem; --tblr-btn-padding-x: .85rem; font-size: .8125rem; font-weight: 600; border-radius: 6px; letter-spacing: .1px; }
.btn-sm { --tblr-btn-padding-y: .25rem; --tblr-btn-padding-x: .55rem; font-size: .75rem; border-radius: 4px; }
.btn-primary { --tblr-btn-bg: var(--cms-accent); --tblr-btn-border-color: var(--cms-accent); --tblr-btn-hover-bg: var(--cms-accent-d); --tblr-btn-hover-border-color: var(--cms-accent-d); --tblr-btn-active-bg: var(--cms-accent-d); box-shadow: 0 1px 2px rgba(67,56,202,.35); }

/* Forms */
.form-control, .form-select { border-radius: 6px; border-color: var(--cms-line); font-size: .85rem; min-height: 36px; }
.form-control:focus, .form-select:focus { border-color: var(--cms-accent); box-shadow: 0 0 0 3px rgba(79,70,229,.14); }
.form-control-sm, .form-select-sm { min-height: 30px; font-size: .8rem; border-radius: 4px; }
.form-label { margin-bottom: .3rem; font-size: .8rem; font-weight: 600; color: #3a4759; }
.input-group-text { border-radius: 6px; border-color: var(--cms-line); background: #f6f7fb; }
.mb-3 { margin-bottom: .85rem !important; }

/* Badges — vuông, rõ nét */
.badge { border-radius: 4px; font-weight: 700; letter-spacing: .2px; padding: .32em .55em; }

/* Pagination */
.pagination .page-link { border-radius: 4px; margin: 0 2px; min-width: 34px; text-align: center; font-weight: 600; }
.pagination .page-item.active .page-link { background: var(--cms-accent); border-color: var(--cms-accent); box-shadow: 0 3px 8px -2px rgba(79,70,229,.6); }

/* Tabs — kiểu gạch chân (underline), gọn và khớp với phần nội dung */
.nav-tabs {
    border-bottom: 1px solid var(--cms-line);
    gap: 2px;
    flex-wrap: wrap;
}
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin: 0;
    padding: .5rem .9rem;
    color: var(--tblr-secondary, #66708a);
    font-weight: 500;
    background: transparent;
    transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--cms-accent);
    border-color: transparent;
    border-bottom-color: rgba(79,70,229,.35);
    background: transparent;
    isolation: isolate;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--cms-accent);
    border-color: transparent;
    border-bottom-color: var(--cms-accent);
    background: transparent;
    font-weight: 600;
}
.nav-tabs .nav-link.disabled { color: var(--tblr-disabled-color, #adb5bd); border-color: transparent; }

/* Khi tab nằm trong card-header: để gạch chân tab trùng với viền dưới card-header */
.card-header:has(> .card-header-tabs),
.card-header:has(> .nav.card-header-tabs) {
    padding-top: 0;
    padding-bottom: 0;
    align-items: stretch;
}
.card-header-tabs {
    margin: 0;
    border-bottom: 0;
}
.card-header-tabs .nav-link { padding-top: .75rem; padding-bottom: .75rem; }

/* Modal + dropdown */
.modal-content { border: 0; border-radius: 8px; box-shadow: 0 24px 56px -12px rgba(16,24,40,.32); }
.dropdown-menu { border-color: var(--cms-line); border-radius: 8px; box-shadow: 0 10px 30px rgba(16,24,40,.14); }
.dropdown-item { border-radius: 5px; }
.dropdown-item.active, .dropdown-item:active { background: var(--cms-accent); }

/* Tom Select / CKEditor */
.ts-control { border-radius: 6px; min-height: 36px; border-color: var(--cms-line); }
.ts-dropdown { border-radius: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.15); }
.ts-wrapper.single .ts-control { padding-top: .35rem; padding-bottom: .35rem; }
.ck-editor__editable_inline { min-height: 220px; }
.ck.ck-balloon-panel { z-index: 1100 !important; }

/* ---------- Modal biên tập lớn (form có CKEditor) ---------- */
.cms-modal-wide { max-width: 1140px; }
/* modal-dialog-scrollable (thêm bằng JS) tự giới hạn chiều cao & cho thân modal cuộn.
   CKEditor: chiều cao tối đa + tự cuộn bên trong (toolbar dính trên) → không đẩy tràn modal. */
.cms-modal-wide .ck-editor__editable_inline { min-height: 300px; max-height: 48vh; overflow-y: auto; }
#modal textarea.form-control { max-height: 40vh; }
/* Modal CMS bọc <form> quanh body+footer → để modal-dialog-scrollable hoạt động,
   cho form tham gia flex column và body cuộn. */
.modal-dialog-scrollable .modal-content > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.modal-dialog-scrollable .modal-content > form > .modal-body { overflow-y: auto; }
/* Bố cục biên tập kiểu WordPress: cột nội dung + sidebar meta */
.cms-edit { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.cms-edit__side .card { position: sticky; top: 0; }
.cms-edit__side .card-header { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cms-muted); }
.cms-edit__title input { font-size: 1.15rem; font-weight: 600; min-height: 46px; }
@media (max-width: 991.98px) { .cms-edit { grid-template-columns: 1fr; } }

/* ============================================================
   Trang Đăng nhập (split-screen chuyên nghiệp)
   ============================================================ */
.cms-auth { display: flex; min-height: 100vh; }
.cms-auth__brand {
    flex: 1; position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: center;
    padding: 56px 64px; background: linear-gradient(150deg, #4f46e5 0%, #4338ca 50%, #1e1b4b 100%);
}
.cms-auth__brand::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: rgba(255,255,255,.08); top: -150px; right: -120px; }
.cms-auth__brand::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.06); bottom: -110px; left: -70px; }
.cms-auth__brand .inner { position: relative; z-index: 2; max-width: 460px; }
.cms-auth__brand h1 { color: #fff; font-size: 2.15rem; font-weight: 800; line-height: 1.22; margin: 18px 0 14px; letter-spacing: -.02em; }
.cms-auth__brand p { opacity: .92; font-size: 1.05rem; }
.cms-auth__brand .feat { display: flex; align-items: center; gap: 11px; margin-top: 14px; font-weight: 500; }
.cms-auth__brand .feat i { background: rgba(255,255,255,.16); width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.cms-auth__form { width: 560px; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 48px; background: #fff; }
.cms-auth__card { width: 100%; max-width: 430px; }
.cms-auth__card .brandmark { font-size: 1.7rem; font-weight: 800; color: var(--cms-ink); margin-bottom: 6px; letter-spacing: -.02em; }
.cms-auth__card .brandmark span { color: var(--cms-accent); }
.cms-auth__card .sub { color: var(--cms-muted); margin-bottom: 30px; font-size: 1rem; }
.cms-auth__card .form-label { font-size: .85rem; }
.cms-auth__card .form-control { min-height: 46px; font-size: .95rem; border-radius: 8px; }
.cms-auth__card .btn { min-height: 46px; font-size: .95rem; border-radius: 8px; }
.cms-pw { position: relative; }
.cms-pw .eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--cms-muted); }
@media (max-width: 900px) { .cms-auth__brand { display: none; } .cms-auth__form { width: 100%; padding: 32px 22px; } }

/* ---------- Footer ---------- */
.cms-footer { border-top: 1px solid var(--cms-line); background: transparent; }
.cms-footer .container-fluid { padding-top: .75rem; padding-bottom: .75rem; font-size: .8rem; color: var(--cms-muted); }
.cms-footer a { color: var(--cms-muted); text-decoration: none; }
.cms-footer a:hover { color: var(--cms-accent); }

/* ============================================================
   Mobile — DÙNG 1 THANH HEADER + 1 nút menu; sidebar thành drawer trượt
   ============================================================ */
.cms-mobile-brand { display: none; }
@media (max-width: 991.98px) {
    .navbar.sticky-top { z-index: 1050; }
    .navbar-vertical {
        position: fixed; top: 0; left: 0; bottom: 0; width: 252px; z-index: 1040;
        transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto;
        padding-top: 58px;
        box-shadow: 0 24px 56px -12px rgba(16,24,40,.45);
    }
    body:has(#sidebar-menu.show) .navbar-vertical { transform: none; }
    /* Bỏ nút menu + brand RIÊNG của sidebar → chỉ còn 1 thanh header + 1 nút menu */
    .navbar-vertical > .container-fluid > .navbar-toggler,
    .navbar-vertical .navbar-brand { display: none !important; }
    /* Backdrop mờ khi mở drawer (bấm lại nút menu ở header để đóng) */
    body:has(#sidebar-menu.show) .page-wrapper::before {
        content: ""; position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 1039;
    }
    .cms-mobile-brand { display: inline-flex !important; align-items: center; gap: .4rem; font-weight: 800; color: var(--cms-ink); }
}