/*
 * Tuy chinh giao dien rieng cua Gamob, nap SAU cac file CSS template Limitless (layouts/app.blade.php)
 * de khong sua file goc cua template (template/assets/css/*.min.css chep nguyen tu Limitless 2.1 Default).
 * Gia tri theo ban demo da chot (2026-10-08): khoang cach 1rem, bo goc the 6px / nut 4px.
 */

/* ===== Gop tu my_style.css (2026-10-19, da xoa file do) - chi giu class con dung, dat dau file de giu
   dung thu tu cascade cu (my_style nap truoc gamob-theme). Bo: sidebar-user-material-body, box-spinner,
   .flex/.flex-grow, dimension-list, cd-popup*, fab-menu-btn, bien --ck-* (khong con CKEditor),
   .multiple-bb .select2-container, cac rule .multiselect cu (thay bang khoi "Tag/option multiselect" ben duoi). */
.content { min-height: calc(100vh - 138px); }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.navbar-brand { padding-top: 10px !important; padding-bottom: 10px !important; }
.border-top { border-top: 1px solid #dddddd; }
.border-bottom { border-bottom: 1px solid #dddddd; }
.border-y { border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; }
.border-x { border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; }
.material-pagination { list-style: none !important; padding-left: 15px; }
.table-footer .select2 { width: 80px !important; text-align: center; }
.btn-light.focus, .btn-light:focus, .btn-light:hover, .btn-light:not([disabled]):not(.disabled).active,
.btn-light:not([disabled]):not(.disabled):active, .show > .btn-light.dropdown-toggle { background-color: #f5f5f5 !important; }
.row.display-flex { display: flex; flex-wrap: wrap; }
.row.display-flex > [class*='col'] { display: flex; flex-direction: column; }
body ::-webkit-scrollbar { width: 5px; height: 5px; }
body ::-webkit-scrollbar-track { background: #f1f1f1; }
body ::-webkit-scrollbar-thumb { background: #ddd; }
body::-webkit-scrollbar-thumb:hover { background: grey; }
.vue-loading { height: 100% !important; display: flex !important; justify-content: center !important; }
@media screen and (max-width: 766px) {
    .w-100-xs { width: 100%; }
}
.swal2-title { font-size: 1rem !important; }
.swal2-html-container { font-size: .8125rem !important; }
ul.metric-list { list-style: none; padding: 0; margin: 0; }
ul.metric-list li { border: 1px solid #e0e0e0; border-radius: 3px; height: 32px; line-height: 32px; padding: 0 24px; margin: 5px 0; }
ul.metric-list li:hover { background: rgba(0, 0, 0, .05) !important; cursor: pointer; }
ul.metric-list .active { border-left: 3px solid #7baaf7; }
.box-copy { border-radius: 20px; padding: 5px 10px; white-space: pre-line; }
.box-copy:hover { color: #5f6368; background-color: #ddd; border-color: #dadce0; }
fieldset.scheduler-border { border: 1px solid silver; border-radius: 4px; padding: 0 1.4em 1.4em 1.4em !important; margin: 0 0 1.5em 0 !important; }
legend.scheduler-border { font-weight: bold !important; text-align: left !important; width: auto; padding: 0 10px; border-bottom: none; }
/* ===== Het phan gop tu my_style.css ===== */

/* Nen trang: template mac dinh #f5f5f5 (body trong bootstrap.min.css + .page-content trong layout.min.css) */
body,
.page-content {
    background-color: #f3f4f6;
}

/* Khoang cach: template 1.25rem -> 1rem */
.content {
    padding: 1rem;
}

.card {
    margin-bottom: 1rem;
    border-radius: 6px;
}

.card-body {
    padding: 1rem;
}

.card-header,
.card-footer {
    padding: .75rem 1rem;
}

/* card-header khong co bg-* (template dat 1.25rem tren/duoi, khong gach duoi) */
.card-header:not([class*=bg-]):not([class*=alpha-]) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Bo goc phan dau/cuoi the theo radius moi cua .card (template tinh theo .1875rem) */
.card-header:first-child {
    border-radius: 5px 5px 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 5px 5px;
}

/* Tieu de the: 14px, dam vua */
.card-title,
h6.card-title,
.card-title h6 {
    font-size: .875rem;
    font-weight: 500;
}

/* Nut: bo goc 4px -> 8px, them transition hover/active (demo "De xuat giao dien 2026" sep duyet
   2026-10-09, muc 01). .rounded-round cua template dung !important nen khong bi anh huong. */
.btn {
    border-radius: 8px;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s;
}

.btn:active {
    transform: translateY(1px);
}

/* Nut chinh: gradient mau brand moi (Sky -> Cyan, sep chon phuong an C 2026-10-09, thay cho tim) -
   thay cho nen xanh phang cua template. Sua 2026-10-09: #0369a1 qua tam/dam lam vien ngoai lac
   que voi nen gradient sang hon -> doi sang #0ea5e9 (nhat hon) + bo vien dam, dung box-shadow
   de tao do net thay vi vien mau rieng. */
.btn-primary {
    background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(3, 105, 161, .25);
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 2px 10px rgba(14, 165, 233, .45);
}

/* Hover dong trong bang: ap dung chung cho ca bang Limitless (.table) lan vue-datatable (lib/DataTable.vue)
   (demo sep duyet 2026-10-09, muc 05) - giup do theo dong khi bang nhieu dong. */
.table tbody tr,
.vue-datatable tbody tr {
    transition: background-color .12s;
}

.table tbody tr:hover > td,
.vue-datatable tbody tr:hover > td {
    background-color: #e3f3fb;
}

/* Mau vien thong nhat #e5e7eb nhu ban demo. Template dung 2 kieu: rgba(0,0,0,.125) (card, navbar, sidebar,
   list-group) va #ddd (nut light, o nhap, bang, nav-tabs, hr, .border-*) -> dam va xam hon */
.card,
.card-header,
.card-footer,
.list-group-item,
.navbar-light,
.sidebar-light,
.dropdown-menu,
.form-control,
.table td,
.table th,
.table thead th,
.nav-tabs,
hr {
    border-color: #e5e7eb;
}

/* .btn-light: cac trang thai hover/active/dropdown cua template co selector manh -> can !important */
.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
    border-color: #e5e7eb !important;
}

/* Nhom nut chuyen doi (vd Hom nay/Hom qua/Hom kia, GMT+7/LA, In/Out): nut dang chon cua template
   (.btn-light.active) chi nhat hon #fafafa -> #f5f5f5, khong phan biet duoc -> nen xanh nhat, chu + vien xanh.
   Selector manh hon rule .btn-light.active o tren nen thang ca !important. */
.btn-group > .btn-light.active {
    background-color: #e3f2fd !important;
    color: #1976d2 !important;
    border-color: #0ea5e9 !important;
    font-weight: 500;
    z-index: 1;
}

/* KHONG de cac tien ich .border / .border-top... (template #ddd !important): neu ep ve #e5e7eb bang
   !important se de mat mau cua cac class mau di kem (vd "border-top border-primary"). */

/* @vueform/multiselect: my_style.css (kieu Material cu, dong 46-52 + 148-152) dat
   `border: none` + gach chan net dut, active gach chan xanh ngoc - deu !important.
   Dua ve o nhap co vien day du nhu theme Default. Selector co `body` de thang !important
   cua my_style.css ma khong phai sua file do. */
/* Chieu cao multiselect = o nhap/nut cua template (2.25rem = 36px). Thu vien tu tinh
   min-height = vien + font-size x line-height + py x 2, mac dinh ~40px (font 1rem, py .5rem) */
body .multiselect {
    --ms-font-size: .8125rem;
    --ms-line-height: 1.5385;
    --ms-py: .4375rem;
    min-height: 2.25rem;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    background: #fff !important;
    padding-right: .25rem !important;
    /* components.min.css (plugin bootstrap-multiselect cua Limitless, trung ten class) ep overflow:hidden
       -> cat mat danh sach so xuong. Truoc do my_style.css ghi de bang overflow: inherit !important */
    overflow: visible !important;
}

/* Nhan/placeholder cua multiselect dinh vi absolute (padding cua khung ngoai khong co tac dung)
   va my_style.css ep padding-left: 0 !important -> dat padding cho tung phan ben trong */
body .multiselect .multiselect-single-label,
body .multiselect .multiselect-multiple-label,
body .multiselect .multiselect-placeholder,
body .multiselect .multiselect-search,
body .multiselect input.multiselect-tags-search {
    padding-left: .75rem !important;
}

body .multiselect .multiselect-tags {
    padding-left: .5rem !important;
}

body .multiselect.is-active {
    border-color: #0ea5e9 !important;
    /* chi doi mau vien, khong vong sang - giong .form-control (Limitless mac dinh, 2026-10-28) */
    box-shadow: none !important;
}

/* Tag/option multiselect (demo chot 2026-10-19): tag vien thuoc xanh nhat giong chip bo loc (FilterChips),
   option da chon nen nhat + checkbox thay nen xanh la dac cua theme mac dinh thu vien.
   Tag tuy bien (avatar app, ma quoc gia, gop "+N") o views/MsTag.vue; dong "Da chon" o views/MsListHead.vue. */
body .multiselect {
    --ms-tag-bg: #e0f2fe;
    --ms-tag-color: #0369a1;
    --ms-tag-font-size: .8125rem;
    --ms-tag-font-weight: 500;
    --ms-tag-line-height: 1.25rem;
    --ms-tag-radius: 999px;
    --ms-tag-py: .0625rem;
    --ms-tag-remove-radius: 50%;
    --ms-option-font-size: .8125rem;
    --ms-option-py: .4375rem;
    --ms-option-bg-pointed: #f3f4f6;
    --ms-option-bg-selected: #f0f9ff;
    /* Khong dung `inherit`: voi bien CSS, inherit lay bien cua phan tu cha (khong khai bao) nen
       var() roi ve fallback #fff cua thu vien -> chu trang tren nen xanh nhat, bi mo */
    --ms-option-color-selected: #0369a1;
    --ms-option-bg-selected-pointed: #e0f2fe;
    --ms-option-color-selected-pointed: #0369a1;
    --ms-spinner-color: #0ea5e9;
    --ms-dropdown-border-color: #e5e7eb;
}

body .multiselect .multiselect-tag { padding-right: .25rem; }
body .multiselect .multiselect-tag-remove:hover { background: rgba(3, 105, 161, .12); }
/* Trang thai trong option (account/app/ad) nho hon chu chinh */
body .multiselect-option .pill { font-size: .6875rem; }
.multiselect-option .right { float: right; }
/* Danh sach so xuong: tach khoi o 4px, bo goc + do bong (thay kieu cu cua my_style) */
body .multiselect-dropdown {
    max-height: 20rem;
    bottom: -4px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
body .multiselect-options { max-height: 15rem; }

/* Modal loc: .modal-content mac dinh overflow hidden (de bo goc) -> danh sach multiselect o cuoi bi cat.
   Cho tran ra ngoai, bo goc rieng header/footer thay cho overflow. */
#modalFilter .modal-content { overflow: visible; }
#modalFilter .modal-content > .modal-header { border-radius: 12px 12px 0 0; }
#modalFilter .modal-content > .modal-footer { border-radius: 0 0 12px 12px; }
.ms-tag { max-width: 200px; }
.ms-tag-text { overflow: hidden; text-overflow: ellipsis; }
.ms-tag-av { margin: 0 5px 0 -4px; border-radius: 4px; }
.ms-tag-code { margin: 0 5px 0 -4px; padding: 1px 3px; background: #fff; }
.ms-tag-more {
    display: inline-flex; align-items: center; height: 1.375rem; margin: 0 .25rem .25rem 0; padding: 0 .5rem;
    border: 1px dashed #0369a1; border-radius: 999px; color: #0369a1; font-weight: 500; cursor: pointer;
}

/* Option dang mode tags: checkbox o dau dong */
body .multiselect-option { gap: .5rem; }
body .multiselect-option .ms-opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#modalFilter .multiselect-option::before {
    content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid #cbd5e1; border-radius: 4px; background: #fff;
}
#modalFilter .multiselect-option.is-selected::before {
    border-color: #0ea5e9;
    background: #0ea5e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ms-list-head {
    position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: .375rem .75rem;
    border-bottom: 1px solid #e5e7eb; background: #fff; color: #6b7280; font-size: .75rem;
}
.ms-list-head a { color: #0ea5e9; }

/* Navbar gradient (sep doi lai 2026-10-09, demo "Mesh Spark" - hoan doi voi admin): thay cho
   .bg-indigo dac truoc day. 3 diem sang (vang cam/cyan/indigo) tren nen indigo dam - rieng cho pub,
   admin dung bo mau khac (navbar-gradient-admin, "Mesh Aurora") de phan biet 2 app. */
.navbar-gradient-pub {
    background:
        radial-gradient(circle at 12% 25%, rgba(251, 191, 36, .65) 0%, transparent 42%),
        radial-gradient(circle at 88% 20%, rgba(34, 211, 238, .55) 0%, transparent 50%),
        radial-gradient(circle at 55% 100%, rgba(99, 102, 241, .5) 0%, transparent 60%),
        #3730a3;
}

/* Bo khoang trong .5rem tren cung cua nav-sidebar (sep yeu cau 2026-10-09) - rule goc nam trong
   vendor layout.css, ghi de tai day thay vi sua file vendor. */
.nav-sidebar .nav-item:not(.nav-item-header):first-child {
    padding-top: 0;
}

/* Khoi endpoint API (/guide/api) - phuong an B da duyet 2026-10-12: method bang chu mau (khong
   bang pill nhu phuong an A) + khoi JSON nen sang co vien trai mau brand, thay cho .box-copy vuong
   full-width + khoi trang vien mang cu. */
.endpoint-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #fff;
}

.endpoint-method {
    font-weight: 700;
    font-size: .8125rem;
    font-family: monospace;
    flex: none;
}

.endpoint-method.get {
    color: #0369a1;
}

.endpoint-method.post {
    color: #1f9254;
}

.endpoint-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: .8125rem;
    color: #333;
}

.endpoint-copy {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.endpoint-copy:hover {
    background: #f5f5f5;
    color: #0369a1;
    border-color: #0ea5e9;
}

.endpoint-code {
    background: #f8fafc;
    color: #333;
    padding: 14px 16px;
    font-size: .8125rem;
    line-height: 1.6;
    margin: 0;
    font-family: monospace;
    border: 1px solid rgba(0, 0, 0, .1);
    border-top: none;
    border-left: 3px solid #0ea5e9;
    border-radius: 0 0 8px 8px;
    overflow-x: auto;
}

.endpoint-code .k {
    color: #0369a1;
}

/* Endpoint khong co khoi JSON mau di kem (vd Logout) - vien kin 4 canh thay vi ho day cho khoi code */
.endpoint-bar.standalone {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
}

/* Trang thai dung chung toan app (component StatusBadge.vue 17 trang + PolicyCenterComponent
   + TransactionComponent). Lich su doi 2026-10-12: cham tron+chu mau (cu) -> pill nen dac+chu
   trang -> pill nen nhat+chu dam -> CHOT: chi con chu mau, bo het nen/khung (sep yeu cau don
   gian nhat, do nhieu dong nhieu mau tren 1 bang de roi mat). Giu ten class .pill/.pill-<mau>
   de khong phai sua lai cac noi dang goi. */
.pill {
    font-weight: 500;
}

.pill-success { color: #1f9254; }
.pill-danger { color: #c0372b; }
.pill-warning { color: #b45309; }
.pill-primary, .pill-blue { color: #0369a1; }
.pill-pink { color: #be185d; }
.pill-secondary, .pill-grey { color: #6b7280; }

/* Chip nen nhat (UI trends muc 03, 2026-10-23): thay badge nen dac bg-success/bg-danger... o cho
   can noi bat hon chu mau tron (trang thai tai khoan tren topbar, nhan disabled, chu thich mau).
   Badge dem so (thong bao, so cho duyet) van giu nen dac. */
.pill-soft {
    display: inline-block;
    padding: .0625rem .5rem;
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.25rem;
    background: #f3f4f6;
}
.pill-soft.pill-success { background: #e8f5e9; }
.pill-soft.pill-danger { background: #fdecea; }
.pill-soft.pill-warning { background: #fef3e2; }
.pill-soft.pill-primary, .pill-soft.pill-blue { background: #e3f2fd; }

/* Dropdown chuong o topbar (App.vue) - thay the .dropdown-content/.media-list cu cua theme
   bang cung token/pattern danh sach voi NotificationList.vue (xem component do), de 2 noi
   hien thong bao (dropdown + trang /notification) dung chung 1 kieu dong. */
/* Chuan 2026-10-19: bo 10px + bong, dau co pill so chua doc + link chu, chip loc, chan = link ca dong */
.ddrop {
    width: 380px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.ddrop-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .875rem .625rem;
}

.ddrop-head .t {
    font-weight: 500;
    font-size: .875rem;
    color: #212529;
}

.ddrop-cnt {
    font-size: .6875rem;
    font-weight: 500;
    color: #0369a1;
    background: #e0f2fe;
    border-radius: 999px;
    padding: 1px 7px;
}

.ddrop-all {
    margin-left: auto;
    font-size: .75rem;
}

.ddrop-tabs {
    padding: 0 .875rem .625rem;
    border-bottom: 1px solid #e5e7eb;
}

.ddrop-tabs button {
    height: 26px;
    padding: 0 .625rem;
    font-size: .75rem;
}

.ddrop-foot {
    display: block;
    text-align: center;
    padding: .6875rem 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: .8125rem;
    font-weight: 500;
    color: #1976d2;
}

.ddrop-foot:hover {
    background: #f7f8fa;
}

.nav-tabs-bottom .nav-link.active:before {
    background-color: #0ea5e9;
}

/* ===== Tu admin (gop 2026-10-16) ===== */

/* Navbar gradient (sep doi lai 2026-10-09, demo "Mesh Aurora" - hoan doi voi pub): thay cho
   .bg-indigo dac truoc day. 3 diem sang (hong/xanh/tim) tren nen indigo dam - rieng cho admin, pub
   dung bo mau khac (navbar-gradient-pub, "Mesh Spark") de phan biet 2 app. */
.navbar-gradient-admin {
    background:
        radial-gradient(circle at 15% 20%, rgba(236, 72, 153, .55) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(14, 165, 233, .5) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(124, 58, 237, .6) 0%, transparent 60%),
        #312e81;
}

/* Mau brand trang chu admin (demo chot 2026-10-13, Sky -> Cyan). Tap trung bien CSS tai day
   thay vi hardcode hex rai nhieu component.vue nhu pub dang lam - doi mau chi sua 1 cho.
   Tien to "home-" de khong dam vao bien CSS khac cua template/thu vien thu 3. */
:root {
    --home-accent: #0ea5e9;
    --home-accent-2: #22d3ee;
    --home-accent-strong: #0369a1;
    --home-accent-soft: #e3f3fb;
    --home-ok: #1f9254;
    --home-ok-bg: #e7f6ee;
    --home-warn: #d97706;
    --home-warn-fg: #b45309;
    --home-warn-bg: #fef3e2;
    --home-crit: #dc3d30;
    --home-crit-fg: #c0372b;
    --home-crit-bg: #fdecea;
    --home-na: #c3cad3;
    --home-zone-a: #e6f1f8;
    --home-c-pub: #94a3b8;
    --home-c-partner: #f2a65a;
    --home-c-cost: #e57373;
    /* Gradient 5 bac cho treemap (box Top theo app/format/country) */
    --home-tm1: #075985;
    --home-tm2: #0369a1;
    --home-tm3: #0284c7;
    --home-tm4: #0ea5e9;
    --home-tm5: #7dd3fc;
    --home-tm-fg: #ffffff;
    --home-tm-fg5: #0c4a6e;
}

/* Nhan nen tang Android/iOS/Web dung chung (MediaApp, box Top trang Home...) */
.os-tag {
    flex: none;
    font-size: .625rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 4px;
}

.os-android { background: #e8f5e9; color: #2e7d32; }

.os-ios { background: #f5f5f5; color: #333; border: 1px solid #e5e7eb; }

.os-web { background: #e3f2fd; color: #1976d2; }

/* Tooltip (v-tooltip) nhieu dong o trang Home (box Doanh thu): can trai cho de doc thay vi can giua
   mac dinh cua theme. Chi ap dung cho tooltip gan class "home-tooltip", khong doi tooltip toan site. */
.home-tooltip .tooltip-inner {
    text-align: left;
}

/* ===== Bo sung cho Limitless: chi nhung gi Limitless/BS4 khong co (phuong an A 2026-10-16).
   Khoang cach/bo goc dung thang Limitless; mau + do dam giu dung demo qua bien --gm-*. ===== */
:root {
    --gm-border: #e5e7eb;
    --gm-muted: #6b7280;
    --gm-soft: #f7f8fa;
    --gm-strong: #0369a1;
}

.text-gm-muted { color: var(--gm-muted) !important; }
.text-gm-strong { color: var(--gm-strong) !important; }
.text-gm-flat { color: #78909c !important; }
.bg-gm-soft { background-color: var(--gm-soft) !important; }
.bg-gm-flat { background-color: #f5f5f5 !important; }
.bg-success-soft { background-color: #e8f5e9 !important; }
.bg-danger-soft { background-color: #ffebee !important; }
.border-gm { border: 1px solid var(--gm-border) !important; }
.border-bottom-gm { border-bottom: 1px solid var(--gm-border) !important; }
.font-numeric { font-variant-numeric: tabular-nums; }
.font-weight-600 { font-weight: 600 !important; }
.gap-1 { gap: .3125rem !important; }
.gap-2 { gap: .625rem !important; }
.gap-3 { gap: 1.25rem !important; }
.progress-xs { height: .375rem; }
.gm-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }
.gm-loading-box { min-height: 6rem; }

/* O chi so (Home, Hour...): nen trang, vien mong, vien tren 3px. border-radius/background/border-phai-
   duoi-trai o day la specificity thuong (0,1,0) de luon thang button{border-radius:0} cua Bootstrap
   reboot (vd HomeOverviewTile.vue dung <button>) - KHONG duoc dua border-top vao day. */
.gm-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border-right: 1px solid var(--gm-border);
    border-bottom: 1px solid var(--gm-border);
    border-left: 1px solid var(--gm-border);
    border-radius: 6px;
}
/* Rieng border-top: :where() = specificity 0 de .border-top-primary/success/danger (Limitless)
   luon thang bat ke file nay nap truoc/sau - tach khoi khai bao tren de khong keo theo border-radius. */
:where(.gm-tile) { border-top: 3px solid #b0bec5; }
.gm-tile-value { font-size: 1.125rem; font-weight: 500; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Mau dam nhu pill-success/pill-danger/pill-grey ben admin (khong nen, do nhat hon han) - dong bo 2 ben */
.gm-tile-delta { align-self: flex-start; font-size: .75rem; font-weight: 600; }

/* O bam duoc: noi bong khi hover; dang chon = vien + quang sang cung mau xu huong (--gm-tile-rgb) */
.gm-tile-btn { --gm-tile-rgb: 144, 164, 174; cursor: pointer; }
.gm-tile-btn.border-top-success { --gm-tile-rgb: 76, 175, 80; }
.gm-tile-btn.border-top-danger { --gm-tile-rgb: 244, 67, 54; }
.gm-tile-btn:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
.gm-tile-btn:focus { outline: none; }
.gm-tile-btn:focus-visible { box-shadow: 0 0 0 2px #90caf9; }
.gm-tile-btn.active { border-color: rgb(var(--gm-tile-rgb)); box-shadow: 0 0 0 3px rgba(var(--gm-tile-rgb), .3), 0 0 10px rgba(var(--gm-tile-rgb), .4); }
.gm-tile-spark { display: block; width: 100%; height: 22px; margin-top: 2px; }
.gm-tile-spark path { stroke: #2196f3; }
.border-top-danger .gm-tile-spark path { stroke: #f44336; }
.min-w-0 { min-width: 0 !important; }

/* Anh dai dien app/user (AppAvatar.vue): bo goc 7px theo demo, Limitless chi co rounded 3px / rounded-circle */
.app-avatar { border-radius: 7px; object-fit: cover; }

/* ===== Nhom List + Report (demo duyet 2026-10-16) - dung chung pub + admin =====
   pub hien con dinh nghia lai .filter-row/.report-toolbar trong <style> tung component: se bo dan, dung ban nay. */

/* Status dong cua admin (statusMaps.js: color 'orange-400' / 'info' ghep 'pill-' + color) */
.pill-orange-400 { color: #c2630a; }
.pill-info { color: #1b7f98; }

/* Hang bo loc 1 dong, nhan nho tren o; o dang loc them .has len .ff */
.filter-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; padding: 1rem; border-bottom: 1px solid #e5e7eb; }
.filter-row .ff { min-width: 180px; }
.filter-row .ff.search { min-width: 220px; flex: 1 1 220px; max-width: 320px; }
.filter-row label { display: block; font-size: .6875rem; font-weight: 500; color: #78909c; text-transform: uppercase; margin-bottom: .25rem; }
.filter-row .ff.has .multiselect,
.filter-row .ff.has .form-control { background-color: #e3f3fb; }
@media (max-width: 575.98px) {
    .filter-row .ff { min-width: 0; flex: 1 1 100%; }
    .filter-row .ff.search { max-width: none; }
}

/* Dong ket qua duoi filter-row: tong ban ghi + so dieu kien loc + nut xoa loc */
.result-bar { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; border-bottom: 1px solid #e5e7eb; font-size: .75rem; color: #6b7280; flex-wrap: wrap; min-height: 41px; }
.result-bar b { color: #263238; font-weight: 500; }

/* Email dang chu + nut copy nho */
.mail { display: inline-flex; align-items: center; gap: 4px; max-width: 240px; }
.mail span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Consolas, monospace; font-size: 12px; }
.mail .icobtn { flex: none; }
.icobtn { width: 23px; height: 23px; border-radius: 6px; border: 1px solid transparent; background: none; color: #78909c; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
.icobtn:hover { border-color: #e5e7eb; background: #fff; color: #0369a1; }

/* Loi API tai cho, giu bo loc, co nut Thu lai */
.err-box { display: flex; gap: 10px; align-items: center; margin: 1rem; padding: .625rem .875rem; border: 1px solid #e5e7eb; border-left: 3px solid #dc3d30; border-radius: 4px; background: #fdecea; }

/* Toolbar trang Report: ten trang / quay lai ben trai, khoang ngay ben phai */
.report-toolbar { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.report-toolbar .ttl { min-width: 0; }
.report-toolbar h1 { margin: 0; font-size: 1.125rem; font-weight: 500; }
.report-toolbar .back { display: block; font-size: .75rem; color: #78909c; }
.report-toolbar .back:hover { color: #0369a1; }
.report-toolbar .tsub { display: block; font-size: .75rem; color: #78909c; }
.report-toolbar .rt { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
@media (max-width: 575.98px) {
    .report-toolbar .rt { margin-left: 0; width: 100%; }
}

/* Bang report: scroll rieng, cot dau + dong tong dinh. Cell den tu nhieu component scoped khac nhau
   (DataTable/TableBody/TableFooter + template trang) nen phai ep padding chung bang !important. */
.report-table-wrap .table-responsive { max-height: 70vh; overflow: auto; }
.report-table-wrap table th,
.report-table-wrap table td { padding: .5rem .75rem !important; height: auto !important; border-bottom: 1px solid #e5e7eb !important; vertical-align: middle; }
.report-table-wrap .thead-total th,
.report-table-wrap .thead-total td { background: #f7f8fa; border-bottom: 1px solid #e5e7eb !important; }
.report-table-wrap .thead-total { border-top: 1px solid #e5e7eb !important; }
.report-table-wrap .l { text-align: left; }
.report-table-wrap .stick { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 1px 0 0 #e5e7eb; }
.report-table-wrap thead .stick { background: #fff; z-index: 3; }
.report-table-wrap .thead-total .stick { background: #f7f8fa; z-index: 3; }
.report-table-wrap .vue-datatable tbody tr:hover .stick { background: #e3f3fb; }

/* Ghi chu cuoi card (vd note GMT+0 cua pricing) */
.note { padding: .5rem 1rem; border-top: 1px solid #e5e7eb; font-size: .75rem; color: #78909c; }

/* ===== Ô quảng cáo / ô tài khoản dùng chung (views/AdCell.vue, views/AccountCell.vue) ===== */
.ad-cell, .acc-cell { display: grid; gap: 2px; min-width: 0; max-width: 340px; }
.ad-cell-l1, .acc-cell-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ad-cell-name, .acc-cell-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ad-cell-name.plain, .acc-cell-name.plain { color: inherit; }
.ad-cell-fmt { flex: none; font-size: .6875rem; line-height: 1; padding: 3px 6px; border-radius: 4px; background: #f7f8fa; color: #78909c; border: 1px solid #e5e7eb; white-space: nowrap; }
.ad-cell-l2 { display: flex; align-items: center; gap: 6px; color: #78909c; font-size: .75rem; min-width: 0; }
.ad-cell-l3 { color: #78909c; font-size: .75rem; }
.status-list .ad-cell.in .ad-cell-name { color: #1f9254; }
.status-list .ad-cell.out .ad-cell-name { color: #c0372b; }
/* .ad-cell-st = slot "append" cua <ad-cell> (vd nhan "Vo hieu" o /pricing) - cung kieu pill nho cua acc-cell */
.acc-cell-st, .ad-cell-st { flex: none; display: inline-flex; }
:is(.acc-cell-st, .ad-cell-st) .pill { font-size: .625rem; line-height: 1.5; padding: 0 5px; border-radius: 3px; background: #f3f4f6; }
:is(.acc-cell-st, .ad-cell-st) .pill-success { background: #e8f5e9; }
:is(.acc-cell-st, .ad-cell-st) .pill-danger { background: #fdecea; }
:is(.acc-cell-st, .ad-cell-st) .pill-warning { background: #fef3e2; }
:is(.acc-cell-st, .ad-cell-st) .pill-primary, :is(.acc-cell-st, .ad-cell-st) .pill-blue { background: #e3f2fd; }
:is(.acc-cell-st, .ad-cell-st) .pill-pink { background: #fce7f3; }
.acc-cell-st a:hover { text-decoration: none; }
.acc-cell .acc-cell-copy { opacity: 0; width: 22px; height: 22px; }

/* Chip dinh dang / % tang giam / thanh ty trong dung chung (views/FormatChip, DeltaBadge, ShareBar) */
.fmt-chip { flex: none; display: inline-block; font-size: .625rem; font-weight: 500; line-height: 1.5; padding: 0 4px; border-radius: 3px; white-space: nowrap; background: #f7f8fa; color: #78909c; border: 1px solid #e5e7eb; }
.fmt-chip.fmt-gam { background: var(--home-accent-soft); color: var(--home-accent-strong); border-color: transparent; }
.fmt-chip.fmt-full { background: #f1ebfd; color: #6d28d9; border-color: transparent; }
.fmt-chip.fmt-ads { background: var(--home-warn-bg); color: var(--home-warn-fg); border-color: transparent; font-weight: 500; }
.delta-badge { font-size: .75rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta-badge.delta-up { color: var(--home-ok); }
.delta-badge.delta-down { color: var(--home-crit-fg); }
.delta-badge.delta-flat { color: #78909c; }
.delta-badge.delta-pill { background: #f3f4f6; }
.delta-badge.delta-pill.delta-up { background: var(--home-ok-bg); }
.delta-badge.delta-pill.delta-down { background: var(--home-crit-bg); }
.share-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
.share-cell .share-track { width: 80px; height: 4px; background: #f1f1f1; border-radius: 2px; overflow: hidden; }
.share-cell .share-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--home-accent), var(--home-accent-2)); }
.share-cell.share-wide { align-items: stretch; }
.share-cell.share-wide .share-track { width: 100%; height: 5px; background: #f6f8fa; }

/* O quoc gia / o doi tac dung chung (views/CountryCell, PartnerCell) */
.ctry-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ctry-code { flex: none; font: 500 .625rem/1 "Roboto Mono", ui-monospace, Consolas, monospace; padding: 3px 4px; border-radius: 3px; border: 1px solid #e5e7eb; color: #78909c; background: #f7f8fa; letter-spacing: .03em; }
.ctry-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ctry-name.plain { font-weight: 400; color: inherit; }
.ptn-cell { display: grid; gap: 2px; min-width: 0; max-width: 320px; }
.ptn-cell-l1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ptn-cell-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ptn-cell-name.plain { color: inherit; }
.ptn-cell-l2 { display: flex; align-items: center; gap: 6px; color: #78909c; font-size: .75rem; min-width: 0; }
.ptn-tag { flex: none; font-size: .625rem; font-weight: 500; line-height: 1.5; padding: 0 5px; border-radius: 3px; text-transform: uppercase; letter-spacing: .03em; background: #f3f4f6; color: #78909c; }
.ptn-tag.ptn-gam { background: var(--home-accent-soft); color: var(--home-accent-strong); }
.ptn-tag.ptn-bid { background: #f1ebfd; color: #6d28d9; }
.ptn-tag.ptn-ads { background: var(--home-warn-bg); color: var(--home-warn-fg); }
.acc-cell:hover .acc-cell-copy, .acc-cell .acc-cell-copy:focus-visible { opacity: 1; }
.media-app-sub { display: flex; max-width: 100%; }
.media-app-sub .media-app-copy { opacity: 0; width: 22px; height: 22px; }
.media:hover .media-app-copy, .media-app-sub .media-app-copy:focus-visible { opacity: 1; }

/* Nut khoang ngay dung chung (views/DateRangeBtn): nut + dong "So voi" ben duoi */
.drb { display: inline-grid; justify-items: center; gap: 2px; }
.drb.drb-left { justify-items: start; }
.drb.drb-right { justify-items: end; }
.drb .btn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.drb-cmp { color: #78909c; font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 766px) {
    .drb.w-100-xs { display: grid; }
    .drb.w-100-xs .btn { width: 100%; }
}
/* variant="link": khong vien, dat trong card-header (thay <a class="daterange-ranges dropdown-toggle"> cu) */
.drb .drb-link { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: inherit; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drb .drb-link:hover { color: #0369a1; }
.drb .drb-link:focus { outline: 0; }
.drb .drb-link:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; border-radius: 4px; }

/* Lich daterangepicker (2026-10-28): doi xanh ngoc #26a69a cua Limitless sang mau theme #0ea5e9.
   Ngay chon (dau/cuoi) la hinh tron, khoang giua nen xanh nhat; preset dang chon giong nut chuyen doi;
   Ap dung / Huy theo nut theme. Ap cho moi picker (DateRangeBtn lan .daterange-ranges cu) - `body` de thang
   components.min.css va .bg-slate-600 / .btn-light ma lib/daterange.js gan vao applyClass/cancelClass. */
body .daterangepicker .table-condensed tr > td { width: 2.125rem; min-width: 2.125rem; height: 2.125rem; padding: 0; line-height: 2.125rem; }
body .daterangepicker td.available:hover,
body .daterangepicker td.available:focus { background-color: #f1f5f9; border-radius: 50%; }
body .daterangepicker td.in-range { background-color: #e0f2fe; color: #0369a1; border-radius: 0; }
body .daterangepicker td.active,
body .daterangepicker td.active:hover,
body .daterangepicker td.active:focus { background-color: #0ea5e9; color: #fff; border-radius: 50%; font-weight: 500; }
body .daterangepicker td.off,
body .daterangepicker td.off.in-range { background-color: transparent; color: #cbd2da; }
body .daterangepicker .ranges ul li:hover,
body .daterangepicker .ranges ul li:focus { background-color: #f7f8fa; color: inherit; }
body .daterangepicker .ranges ul li.active { background-color: #e3f2fd; color: #0369a1; font-weight: 500; box-shadow: inset 3px 0 0 #0ea5e9; }
body .daterangepicker .applyBtn,
body .daterangepicker .cancelBtn { border-radius: 4px; }
body .daterangepicker .applyBtn { background-color: #0ea5e9; border-color: #0ea5e9; color: #fff; }
body .daterangepicker .applyBtn:hover:not(:disabled) { background-color: #0284c7; border-color: #0284c7; }
body .daterangepicker .cancelBtn { background-color: #fff; color: #263238; }
body .daterangepicker .cancelBtn:hover { background-color: #f7f8fa; }

/* Banner loi chung duoi navbar (App.vue, store.global_error): mat mang = cam, het phien = do */
.global-banner { display: flex; gap: .5rem .875rem; align-items: center; flex-wrap: wrap; padding: .625rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.global-banner > i { font-size: 1.125rem; }
.global-banner-tx { flex: 1 1 260px; min-width: 0; }
.global-banner-tx b { font-weight: 500; }
.global-banner-network { background: var(--home-warn-bg); }
.global-banner-network > i { color: var(--home-warn-fg); }
.global-banner-auth { background: var(--home-crit-bg); }
.global-banner-auth > i { color: var(--home-crit-fg); }

/* Dong tong hop khi >= 2 khoi tai loi (lib/loadGroup.js) */
.load-summary { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .25rem .75rem; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: .75rem; }
.load-summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--home-crit); flex: none; }
.load-summary b { font-weight: 500; }
.load-summary a { font-weight: 500; color: var(--home-accent-strong); }

/* Font mono variable cho bien CSS --gm-mono */
:root {
    --gm-mono: "Roboto Mono", Consolas, monospace;
}
code, kbd, pre, samp { font-family: var(--gm-mono); }
.mono { font-family: var(--gm-mono); }
td.mono, .font-size-sm.mono, .mono.font-size-sm { font-size: .75rem; }

/* ===== Thanh chon hang loat neo day (active-bar), giong admin: noi tren bang thay vi day bang xuong;
   trang dang chon dong them .has-bulkbar de chua cho, khong che dong cuoi bang */
.bulkbar { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); width: min(960px, calc(100% - 2rem)); z-index: 1035; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 24px rgba(15, 23, 42, .18); padding: .625rem 1rem; display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; }
.has-bulkbar { padding-bottom: 5.5rem; }
.bulkbar .cnt { font-weight: 500; }
.bulkbar .sp { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ===== Form tao moi (lo B, demo duyet 2026-10-18): chep chuan .fg/.sec/.chips/.opt/.kv/.mform tu admin
   gamob-theme.css de 2 ben giong nhau; .wsteps/.fmts/.codeb/.fbanner la phan moi cua pub ===== */
.fcard { max-width: 760px; margin-left: auto; margin-right: auto; }
.fcard > .card > .card-header { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.fcard > .card > .card-header .card-title { margin: 0; font-weight: 500; }
.fcard > .card > .card-header .chips { margin-left: auto; }
.sec { padding: 1rem 1.25rem 1.25rem; border-bottom: 1px solid #e5e7eb; display: grid; gap: .875rem; }
.sec:last-of-type { border-bottom: 0; }
.sec-h { display: flex; gap: .625rem; align-items: baseline; flex-wrap: wrap; }
.sec-h h2 { margin: 0; font-size: .875rem; font-weight: 500; }
.sec-h .sub { font-size: .75rem; color: #6b7280; }
/* Chan card: Huy/Quay lai trai-phai + nut chinh, nen xam nhat tach khoi noi dung */
.ffoot { padding: .75rem 1.25rem; border-top: 1px solid #e5e7eb; background: #f7f8fa; border-radius: 0 0 6px 6px; display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.ffoot .l { margin-right: auto; }
/* Field: nhan tren o, * bat buoc, loi/goi y duoi o */
.fg { min-width: 0; }
.fg > label, .fg > .lbl { display: block; font-weight: 500; margin-bottom: .25rem; }
.fg .req, .req { color: #dc3d30; margin-left: 2px; }
.fg .opt-t { color: #6b7280; font-weight: 400; font-size: .75rem; margin-left: .25rem; }
.fg .help { font-size: .75rem; color: #6b7280; margin-top: .25rem; }
.fg .help.ok { color: #1f9254; }
.fg .help.bad { color: #c0372b; }
.fg .validation-invalid-label { margin-top: .25rem; font-size: .75rem; }
.fg .form-control.bad { border-color: #dc3d30; }
.fg .form-control.chg, .fg.chg .multiselect { border-color: #b45309; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1rem; }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.row2 .full { grid-column: 1 / -1; }
.chips { display: flex; gap: .375rem; flex-wrap: wrap; }
.chips button { height: 32px; border: 1px solid #e5e7eb; background: #fff; border-radius: 999px; padding: 0 .875rem; cursor: pointer; color: inherit; }
.chips button[aria-pressed="true"] { border-color: #0ea5e9; background: #e3f2fd; color: #1976d2; font-weight: 500; }
.opt { display: grid; gap: .5rem; }
.opt > label { display: flex; gap: .625rem; align-items: flex-start; border: 1px solid #e5e7eb; border-radius: 8px; padding: .625rem .75rem; cursor: pointer; margin: 0; font-weight: 400; }
.opt > label.on { border-color: #0ea5e9; background: #e3f2fd; }
.opt > label input { margin-top: 3px; }
.opt > label b { display: block; font-weight: 500; }
.opt > label small { display: block; color: #6b7280; font-size: .75rem; }
dl.kv { margin: 0; display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: .5rem 1rem; }
dl.kv dt { color: #6b7280; font-weight: 400; }
dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.modal-body.mform { display: grid; gap: .875rem; }
.mform dl.kv { padding: .75rem; background: #f7f8fa; border-radius: 6px; }
.modal-header .close:disabled { cursor: not-allowed; opacity: .3; }
.btn-primary.busy { opacity: .8; cursor: progress; }
/* Banner thong bao trong form (thay alert-styled-left): icon + noi dung, nut phu day phai */
.fbanner { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .875rem; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; margin-bottom: 1rem; }
.fbanner > i { margin-top: 2px; }
.fbanner .bd { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.fbanner .bd b { font-weight: 500; }
.fbanner ul { margin: 0; padding-left: 1.125rem; }
.fbanner .act { margin-left: auto; flex: none; }
.fbanner.info { background: #e3f3fb; border-color: #bae6fd; }
.fbanner.info > i { color: #0369a1; }
.fbanner.warn { background: #fef3e2; border-color: #fcd9a8; }
.fbanner.warn > i { color: #b45309; }
.fbanner.crit { background: #fdecea; border-color: #f5b5ae; }
.fbanner.crit > i { color: #c0372b; }
.mform .fbanner { margin-bottom: 0; }
/* Buoc danh so (1, 2...) trong huong dan: so tron trai, noi dung phai */
.step-l { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .625rem; }
.step-l > .n { width: 22px; height: 22px; border-radius: 50%; background: #e3f3fb; color: #0369a1; display: grid; place-items: center; font-size: .6875rem; font-weight: 500; }
.step-l > div { display: grid; gap: .5rem; min-width: 0; }
/* Stepper wizard (rut gon tu .tstep admin): xong = tick xanh la, dang o = nen xanh nhat + gach chan */
.wsteps { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); border-bottom: 1px solid #e5e7eb; overflow-x: auto; }
.wstep { padding: .625rem 1rem; display: flex; gap: .5rem; align-items: center; color: #6b7280; font-size: .75rem; border-right: 1px solid #e5e7eb; }
.wstep:last-child { border-right: 0; }
.wstep .n { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .6875rem; background: #f7f8fa; border: 1px solid #e5e7eb; }
.wstep.done { color: #263238; }
.wstep.done .n { background: #e7f6ee; color: #1f9254; border-color: #1f9254; }
.wstep[aria-current="step"] { background: #e3f3fb; box-shadow: inset 0 -2px 0 #0ea5e9; color: #0369a1; font-weight: 500; }
.wstep[aria-current="step"] .n { background: #0ea5e9; border-color: #0ea5e9; color: #fff; }
/* Luoi chon dinh dang quang cao: bam o = chon (thay card anh + nut "Chon") */
.fmts { display: grid; grid-template-columns: repeat(var(--fmt-cols, 3), minmax(0, 1fr)); gap: .625rem; }
@media (max-width: 640px) { .fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fmt { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: .625rem; text-align: left; cursor: pointer; display: grid; gap: .375rem; align-content: start; color: inherit; }
.fmt:hover { border-color: #0ea5e9; }
.fmt[aria-pressed="true"] { border-color: #0ea5e9; background: #e3f2fd; box-shadow: inset 0 0 0 1px #0ea5e9; }
.fmt img { width: 100%; height: 72px; object-fit: contain; background: #f7f8fa; border-radius: 6px; }
.fmt b { font-weight: 500; }
.fmt small { color: #6b7280; font-size: .75rem; line-height: 1.4; }
/* Khoi code tich hop: header ten the + nut Copy, than nen toi cuon ngang */
.codeb { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; min-width: 0; }
.codeb-h { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem .25rem .75rem; background: #f7f8fa; border-bottom: 1px solid #e5e7eb; font-size: .75rem; }
.codeb-h .t { font-family: var(--gm-mono); color: #0369a1; }
.codeb-h .btn, .codeb-h .icobtn { margin-left: auto; }
.codeb pre { margin: 0; padding: .75rem; background: #0f172a; color: #e2e8f0; font-size: .75rem; line-height: 1.6; overflow-x: auto; white-space: pre; max-height: 320px; }
.codeb .ft { padding: .375rem .75rem; font-size: .75rem; color: #c0372b; background: #fdecea; }
/* Man hinh tao xong (Site/App) */
.done-card { padding: 1.5rem 1.25rem; display: grid; gap: .75rem; justify-items: start; }
.done-card .ok-ic { width: 40px; height: 40px; border-radius: 50%; background: #e7f6ee; color: #1f9254; display: grid; place-items: center; font-size: 1.125rem; }
.done-card h2 { margin: 0; font-size: 1rem; font-weight: 500; }
.done-card .acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.ctry-chips { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.ctry-chips span { font: .6875rem var(--gm-mono); padding: 0 4px; border: 1px solid #e5e7eb; border-radius: 3px; }
/* copy-text o form/trang chi tiet: hien du chieu rong (mac dinh .mail cat o 240px cho o bang) */
.mail.wide { max-width: 100%; min-width: 0; } /* min-width: trong .sec (grid) khong thi cot bi chu dai keo rong, tran card */

/* ===== Trang chi tiet (lo A, demo duyet 2026-10-18): chep chuan Detail + Tom tat + actbar tu admin gamob-theme.css ===== */
/* Cot Tom tat: chi nhac lai so da nhap, khong tu tinh */
.summary { position: sticky; top: 1rem; margin-bottom: 0; }
.summary .hd { padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; font-weight: 500; font-size: .875rem; }
.summary dl { margin: 0; padding: .5rem 1rem .75rem; display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; }
.summary dt { color: #6b7280; font-weight: 400; }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.summary .big { border-top: 1px solid #e5e7eb; padding: .75rem 1rem; display: grid; gap: 2px; }
.summary .big span { font-size: .75rem; color: #6b7280; }
.summary .big b { font-size: 1.375rem; font-weight: 500; color: #0369a1; font-variant-numeric: tabular-nums; }
.summary .chg { padding: .625rem 1rem; border-top: 1px solid #e5e7eb; font-size: .75rem; color: #6b7280; }
.summary .chg b { color: #b45309; font-weight: 500; }

/* Thanh Huy / Luu dinh day man hinh (nam trong cot col-lg-10, bam day khi cuon) */
.actbar { position: sticky; bottom: 0; z-index: 15; background: #fff; border: 1px solid #e5e7eb; border-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: 0 -2px 8px rgba(15, 23, 42, .06); padding: .625rem 1rem; margin-top: 1rem; display: flex; align-items: center; gap: .5rem; }
.actbar .st { font-size: .75rem; color: #6b7280; margin-right: auto; }
.actbar .st.dirty { color: #b45309; }
.actbar .st.bad { color: #c0372b; }
.actbar .btn-primary { min-width: 96px; }

/* ===== Detail ===== */
.ohead { display: flex; gap: .875rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.ohead .back { font-size: .75rem; display: block; margin-bottom: .25rem; color: #78909c; }
.ohead .back:hover { color: #0369a1; }
.ohead .av { width: 48px; height: 48px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; background: #0369a1; margin-top: 1.25rem; }
/* Avatar dang chu (dinh dang ad, ky hieu $ cua pricing): nen xanh nhat thay vi icon app */
.ohead .av.fmt { background: #e3f2fd; color: #0369a1; font-size: .75rem; }
.ohead .ttl { display: grid; gap: .25rem; min-width: 0; flex: 1 1 320px; }
.ohead h1 { margin: 0; font-size: 1.125rem; font-weight: 500; display: flex; gap: .625rem; align-items: baseline; flex-wrap: wrap; }
.ohead h1 .pill { font-size: .8125rem; }
.ohead .meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: #6b7280; align-items: center; }
.ohead .meta b { color: #263238; font-weight: 500; }
.ohead .acts { display: flex; gap: .5rem; flex-wrap: wrap; align-self: flex-end; }
.ohead .acts .btn i { color: #6b7280; }
@media (max-width: 575.98px) { .ohead .av { margin-top: 0; } }

.secnav { position: sticky; top: 0; z-index: 12; background: #f3f4f6; margin: 0 -4px 1rem; padding: 0 4px; border-bottom: 1px solid #e5e7eb; display: flex; gap: .25rem; overflow-x: auto; }
.secnav a { padding: .625rem .75rem; color: #6b7280; white-space: nowrap; position: relative; cursor: pointer; }
.secnav a:hover { text-decoration: none; color: #263238; }
.secnav a.on { color: #263238; font-weight: 500; }
.secnav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0ea5e9; }
.secnav .badge-dot { font-size: .6875rem; color: #b45309; margin-left: .25rem; font-weight: 400; }

.dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
/* Bang it cot (vd danh sach Open/SDK bidding): gioi han rong, can trai thang mep tieu de - man rong khoi gian bang */
.dgrid.narrow { max-width: 1140px; }
@media (max-width: 1100px) { .dgrid { grid-template-columns: minmax(0, 1fr); } .dgrid .aside { order: -1; position: static !important; } }
.dgrid .dcol { display: grid; gap: 1rem; min-width: 0; }
.dgrid .dcol > .card, .dgrid .dcol > * > .card { margin-bottom: 0; }
.dgrid .aside { position: sticky; top: 3.5rem; }
.dcard-h { display: flex; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.dcard-h h2 { margin: 0; font-size: .875rem; font-weight: 500; }
.dcard-h .sub { font-size: .75rem; color: #6b7280; }
.dcard-h .r { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.dcard-b { padding: 1rem; display: grid; gap: .875rem; }
.dcard-f { padding: .625rem 1rem; border-top: 1px solid #e5e7eb; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dcard-f .st { margin-right: auto; font-size: .75rem; color: #6b7280; }
.dcard-f .st.dirty { color: #b45309; }
/* The Hieu qua tab Tong quan trang detail (Lo 2, demo Qp83edp6): 3 o chi so bam doi bieu do + hang "Chia theo" */
.dmetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #e5e7eb; }
.dmetric { all: unset; box-sizing: border-box; cursor: pointer; padding: .75rem 1rem; display: grid; gap: 2px; align-content: start; border-right: 1px solid #e5e7eb; position: relative; min-width: 0; }
.dmetric:last-child { border-right: 0; }
.dmetric:hover { background: #f7f8fa; }
.dmetric:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }
.dmetric[aria-pressed="true"] { background: #e3f2fd; }
.dmetric[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #0ea5e9; }
.dmetric > span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; }
.dmetric > b { font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .dmetrics { grid-template-columns: minmax(0, 1fr); } .dmetric { border-right: 0; border-bottom: 1px solid #e5e7eb; } .dmetric:last-child { border-bottom: 0; } }
.dbrk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 1rem; border-top: 1px solid #e5e7eb; }
.dbrk > span { font-size: .75rem; color: #6b7280; }
.dbrk .chips button { height: 28px; padding: 0 .75rem; }
.btn-link.danger { color: #c0372b; }
.subsec { grid-column: 1 / -1; border-top: 1px dashed #e5e7eb; padding-top: .75rem; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 500; }
.note-box { grid-column: 1 / -1; background: #fef3e2; border-radius: 6px; padding: .75rem; }
.empty-mini { padding: 1.25rem 1rem; text-align: center; color: #6b7280; }
.empty-mini b { display: block; color: #263238; font-weight: 500; margin-bottom: 2px; }
dl.kv.two { grid-template-columns: repeat(2, minmax(110px, auto) minmax(0, 1fr)); }
@media (max-width: 760px) { dl.kv.two { grid-template-columns: minmax(110px, auto) minmax(0, 1fr); } }
.danger-card { border-color: #dc3d30; }
.danger-card .dcard-h { border-bottom-color: #fdecea; }
.danger-card h2 { color: #c0372b; }
dl.kv dd { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.dcard-h .card-title { margin: 0; }
/* Nhom quyen (Access detail): dau nhom co checkbox chon ca nhom + dem n/m, than 2 cot */
.pgrp { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.pgrp > .gh { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: #f7f8fa; border-bottom: 1px solid #e5e7eb; font-weight: 500; margin: 0; cursor: pointer; }
.pgrp > .gh small { margin-left: auto; color: #6b7280; font-weight: 400; }
.pgrp > .gb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; padding: .5rem .75rem; }
.pgrp .gb label { display: flex; gap: .5rem; align-items: flex-start; padding: .25rem 0; margin: 0; cursor: pointer; }
.pgrp .gb label input { margin-top: 3px; }
.pgrp .gb label small { color: #6b7280; display: block; font-size: .75rem; }
/* Luoi the chon app co checkbox, the dang chon to xanh nhat */
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .375rem; max-height: 300px; overflow-y: auto; padding: 2px; }
.appgrid > label { display: flex; gap: .5rem; align-items: center; border: 1px solid #e5e7eb; border-radius: 6px; padding: .375rem .5rem; margin: 0; cursor: pointer; min-width: 0; }
.appgrid > label.on { border-color: #0ea5e9; background: #e3f2fd; }
@media (max-width: 640px) { .pgrp > .gb { grid-template-columns: minmax(0, 1fr); } }
/* Lo tat trong card tom tat cot phai */
.summary .links { display: grid; }
.summary .links a { padding: .5rem 1rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; color: #263238; }
.summary .links a:first-child { border-top: 0; }
.summary .links a:hover { background: #f7f8fa; text-decoration: none; color: #0369a1; }
/* Banner 1 dong (thay alert vang/do chiem ca hang): icon tron + noi dung + nut tuy chon ben phai */
.banner { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .875rem; border-radius: 6px; border: 1px solid #e5e7eb; background: #fff; }
.banner .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; color: #fff; }
.banner .bd { flex: 1; min-width: 0; display: grid; gap: .25rem; }
.banner .bd b { font-weight: 500; }
.banner .bd p:last-child, .banner .bd ul:last-child { margin-bottom: 0; }
.banner .act { margin-left: auto; flex: none; }
.banner.info { border-color: #bae6fd; background: #e3f2fd; } .banner.info .ic { background: #0ea5e9; }
.banner.warn { border-color: #fcd9a8; background: #fef3e2; } .banner.warn .ic { background: #b45309; }
.banner.crit { border-color: #f5b5ae; background: #fdecea; } .banner.crit .ic { background: #dc3d30; }

/* ===== <side-drawer> dung chung (lo A, moi cua pub): panel truot tu phai, nen mo; <=640px chiem full ngang ===== */
.sd-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sd-bg.open { opacity: 1; pointer-events: auto; }
.sd { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--sd-w, 480px), 100%); background: #fff; z-index: 1041; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(15, 23, 42, .2); transform: translateX(100%); transition: transform .22s ease, visibility .22s; visibility: hidden; }
.sd.open { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sd, .sd-bg { transition: none; } }
.sd-h { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid #e5e7eb; }
.sd-h .t { min-width: 0; flex: 1; display: grid; gap: 2px; }
.sd-h h3 { margin: 0; font-size: .9375rem; font-weight: 500; }
.sd-h small { color: #6b7280; font-size: .75rem; }
.sd-h .close { float: none; font-size: 1.375rem; line-height: 1; padding: 0 4px; }
.sd-h .close:disabled { cursor: not-allowed; opacity: .3; }
.sd-b { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: grid; gap: 1rem; align-content: start; }
.sd-f { padding: .75rem 1.25rem; border-top: 1px solid #e5e7eb; background: #f7f8fa; display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.sd-f .l { margin-right: auto; }
body.sd-lock { overflow: hidden; }

/* ===== Lo A dot 3 (demo duyet 2026-10-18): noi dung drawer khac phuc / chi so / doi soat ===== */
/* The trang thai trong drawer khac phuc; .cur = trang thai cua dong vua bam */
.fix { border: 1px solid #e5e7eb; border-radius: 8px; padding: .75rem; display: grid; gap: .5rem; }
.fix.cur { border-color: #0ea5e9; box-shadow: inset 3px 0 0 #0ea5e9; }
.fix .hh { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-weight: 500; }
.fix .hh small { margin-left: auto; color: #1976d2; font-size: .6875rem; font-weight: 400; }
.fix p { margin: 0; color: #6b7280; }
.fix-grp { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 500; }
/* Nut trang thai trong bang: pill + "Sua" -> mo drawer khac phuc dung trang thai do */
.stbtn { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; display: inline-flex; gap: .375rem; align-items: center; color: inherit; }
.stbtn u { font-size: .6875rem; color: #1976d2; text-decoration: none; }
.stbtn:hover u { text-decoration: underline; }
/* Luoi checkbox chon chi so */
.mchk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
.mchk label { display: flex; gap: .5rem; align-items: center; padding: .375rem .5rem; border: 1px solid #e5e7eb; border-radius: 6px; cursor: pointer; margin: 0; }
.mchk label.on { border-color: #0ea5e9; background: #e3f2fd; }
@media (max-width: 640px) { .mchk { grid-template-columns: minmax(0, 1fr); } }
/* Danh sach tai khoan trong modal xac nhan */
.mlist { max-height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.mlist > div { padding: .375rem .75rem; border-bottom: 1px solid #e5e7eb; display: flex; gap: .5rem; flex-wrap: wrap; }
.mlist > div:last-child { border-bottom: 0; }
.mlist .mail { color: #6b7280; }
/* So tien noi bat dau drawer doi soat */
.sd-amount { border: 1px solid #e5e7eb; border-radius: 6px; padding: .75rem 1rem; display: grid; gap: 2px; }
.sd-amount span { font-size: .75rem; color: #6b7280; }
.sd-amount b { font-size: 1.375rem; font-weight: 500; color: #0369a1; font-variant-numeric: tabular-nums; }
tbody tr.click { cursor: pointer; }

/* ===== Chuan nut / checkbox / modal (demo sep duyet 2026-10-19, dung chung pub + admin) =====
   Mau theo vai tro: primary = Them moi/Luu/Xac nhan · light = Huy/Xuat/Dong · danger-o = Xoa ·
   success-o = Khoi phuc/Kich hoat · warning-o = Vo hieu/Tam dung. Nut vien: vien nhat cung tong + bong 1px
   (vien dam #dc3d30 cu nhin cung). Co: thuong o tieu de trang + chan form/modal; btn-sm o header card,
   dong bang, bulkbar. Icon chi cho Them moi / Xuat-Tai / Sao chep. */
/* Bo nut day du (demo sep duyet 2026-10-29, GIONG HET pub + admin): dac gradient cung goc voi .btn-primary.
   success / warning / danger dac CHI la nut xac nhan cuoi trong modal (Duyet-Thanh toan / Tam dung-Vo hieu /
   Xoa-Tu choi), mo thao tac o list/active-bar dung ban vien -o. primary-o = Bao cao/Chi tiet/Sua.
   .btn-icon = nut vuong chi icon 34px (sm 28px), bat buoc tooltip; tru .rounded-round (nut tron dac thu). */
.btn-success, .btn-warning, .btn-danger { color: #fff !important; border-color: transparent !important; }
.btn-success { background: linear-gradient(135deg, #10b981, #34d399) !important; box-shadow: 0 1px 2px rgba(4, 120, 87, .25); }
.btn-success:hover, .btn-success:focus { box-shadow: 0 2px 10px rgba(16, 185, 129, .45); }
.btn-warning { background: linear-gradient(135deg, #f97316, #fbbf24) !important; box-shadow: 0 1px 2px rgba(194, 65, 12, .25); }
.btn-warning:hover, .btn-warning:focus { box-shadow: 0 2px 10px rgba(249, 115, 22, .45); }
.btn-danger { background: linear-gradient(135deg, #ef4444, #fb7185) !important; box-shadow: 0 1px 2px rgba(185, 28, 28, .25); }
.btn-danger:hover, .btn-danger:focus { box-shadow: 0 2px 10px rgba(239, 68, 68, .45); }
.btn-light, .btn-primary-o, .btn-danger-o, .btn-success-o, .btn-warning-o { box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.btn-group > .btn-light { box-shadow: none; }
.btn-primary-o { color: #0369a1; border: 1px solid #a5d8f0; background: #fff; }
.btn-primary-o:hover, .btn-primary-o:focus { background: #eff8fd; border-color: #5bbfe6; color: #075985; }
.btn-danger-o { color: #c0372b; border: 1px solid #f1b5ae; background: #fff; }
.btn-danger-o:hover, .btn-danger-o:focus { background: #fdf1ef; border-color: #e58a82; color: #b3261e; }
.btn-success-o { color: #1f7a47; border: 1px solid #a9dcbf; background: #fff; }
.btn-success-o:hover, .btn-success-o:focus { background: #eff9f3; border-color: #6fc195; color: #17663a; }
.btn-warning-o { color: #a14a07; border: 1px solid #f3cf9c; background: #fff; }
.btn-warning-o:hover, .btn-warning-o:focus { background: #fdf5e9; border-color: #e8a95a; color: #8a3f06; }
.btn-primary-o:disabled, .btn-danger-o:disabled, .btn-success-o:disabled, .btn-warning-o:disabled { opacity: .55; background: #fff; }
.btn-icon:not(.rounded-round) { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon.btn-sm:not(.rounded-round) { width: 28px; height: 28px; }

/* Checkbox: 16px bo 4px, chon = Sky #0ea5e9 + tich trang (thay o xam #eee 20px / nen #455a64 cua Limitless).
   Ap ca .custom-checkbox lan input trần; input tran dung :where() (specificity 0) de style rieng cua
   component (vd ToggleButton an input) van thang. */
.custom-checkbox { padding-left: 1.5rem; }
.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after { left: -1.5rem; top: .125rem; width: 16px; height: 16px; }
.custom-checkbox .custom-control-label::before { background-color: #fff; border: 1.5px solid #c3cad4; border-radius: 4px; transition: background-color .12s, border-color .12s, box-shadow .12s; }
.custom-checkbox .custom-control-label::after { background-size: 12px 12px; }
.custom-checkbox:hover .custom-control-input:not(:disabled) ~ .custom-control-label::before { border-color: #0ea5e9; }
.custom-checkbox .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: #e0f2fe; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: #0ea5e9; border-color: #0ea5e9; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(14, 165, 233, .3); }
.custom-checkbox .custom-control-input:disabled ~ .custom-control-label::before { background-color: #f3f4f6; border-color: #e2e5ea; }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: #bae6fd; border-color: #bae6fd; }
:where(input[type=checkbox]:not(.custom-control-input)) {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; flex: none; vertical-align: -3px; cursor: pointer;
    border: 1.5px solid #c3cad4; border-radius: 4px; background: #fff center / 12px 12px no-repeat;
    transition: background-color .12s, border-color .12s, box-shadow .12s;
}
:where(input[type=checkbox]:not(.custom-control-input)):hover:not(:disabled) { border-color: #0ea5e9; }
:where(input[type=checkbox]:not(.custom-control-input)):checked { background-color: #0ea5e9; border-color: #0ea5e9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
:where(input[type=checkbox]:not(.custom-control-input)):indeterminate { background-color: #0ea5e9; border-color: #0ea5e9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
:where(input[type=checkbox]:not(.custom-control-input)):focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(14, 165, 233, .3); }
:where(input[type=checkbox]:not(.custom-control-input)):disabled { cursor: not-allowed; background-color: #f3f4f6; border-color: #e2e5ea; }
:where(input[type=checkbox]:not(.custom-control-input)):disabled:checked { background-color: #bae6fd; border-color: #bae6fd; }

/* Modal: bo 12px, header khong nen (ke ca modal cu con .bg-primary), nut dong mem, footer xam nhat nhu .ffoot.
   Ap toan cuc -> moi modal Bootstrap cu doi theo khong can sua markup. */
.modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .22); overflow: hidden; }
.modal-content > .modal-header,
.modal-content > .modal-header[class*=bg-] { background: #fff !important; color: #212529 !important; padding: 1rem 1.25rem .75rem; border-bottom: 0; align-items: center; }
.modal-header .modal-title { font-size: 1rem; font-weight: 500; }
.modal-header .close { width: 30px; height: 30px; padding: 0; margin: -.25rem -.5rem -.25rem auto; border-radius: 8px; opacity: .6; display: grid; place-items: center; font-size: 1.25rem; }
.modal-header .close:not(:disabled):hover { opacity: 1; background: #f3f4f6; }
.modal-content > .modal-body { padding: .25rem 1.25rem 1.25rem; }
.modal-content > .modal-header + .modal-body.p-0 { padding: 0 !important; }
.modal-content > .modal-body:first-child { padding-top: 1.25rem; }
.modal-content > .modal-footer { padding: .75rem 1.25rem; border-top: 1px solid #e5e7eb; background: #f7f8fa; gap: .5rem; }
.modal-content > .modal-footer > * { margin: 0; }

/* iOS Safari tu zoom khi focus o nhap co font < 16px (Limitless .form-control 13px) -> mobile ep 16px */
@media (max-width: 767.98px) {
    body input:not([type=checkbox]):not([type=radio]):not([type=range]),
    body select,
    body textarea,
    body .form-control,
    body .multiselect .multiselect-search,
    body .multiselect input.multiselect-tags-search { font-size: 16px !important; }
}

/* ===== O nhap - Limitless mac dinh, bo 4px (demo F4-04 sep chot 2026-10-28, bo phuong an A;
   https://claude.ai/artifact/TdXxpvxV6mZHeAQjPUdjPj): vien 1px #e5e7eb, bo 4px bang nut + multiselect;
   khong hover, focus chi doi mau vien sang accent, khong vong sang; o khoa giu nen xam cua template.
   Selector co `body` de thang .form-control/.input-group-text cua template. ===== */
body .form-control { border-radius: 4px; }
body .form-control:focus { border-color: #0ea5e9!important; }
/* Nhom co don vi ($, giay...): goc trong da bi Bootstrap xoa bang selector manh hon -> chi goc ngoai thanh 4px */
body .input-group-text { border-radius: 4px; border-color: #e5e7eb; }
.btn{
    font-weight: 500!important;
}

/* ===== Toast (vue-toastification, config.js) — kieu B nen nhat theo loai, chuyen dong slide. Demo sep duyet 2026-10-29.
   CSS goc cua thu vien duoc chen luc chay (sau file nay) nen moi selector kem .Vue-Toastification__container de thang. */
.Vue-Toastification__container { padding: 12px; }
.Vue-Toastification__container .Vue-Toastification__toast {
    min-height: 0;
    min-width: 300px;
    max-width: 380px;
    margin-bottom: .5rem;
    padding: 12px 12px 14px;
    align-items: flex-start;
    border-radius: 6px;
    border: 1px solid #d6dde1;
    background: #eef1f3;
    color: #263238;
    font-family: inherit;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .10), 0 1px 3px rgba(15, 23, 42, .06);
}
.Vue-Toastification__container .Vue-Toastification__toast--success { background: #e8f5ee; border-color: #bfe3cd; }
.Vue-Toastification__container .Vue-Toastification__toast--error { background: #fdecea; border-color: #f3c4bf; }
.Vue-Toastification__container .Vue-Toastification__toast--warning { background: #fef3e2; border-color: #f6d9a8; }
.Vue-Toastification__container .Vue-Toastification__toast--info { background: #e6f4f7; border-color: #b9dfe8; }
.Vue-Toastification__container .Vue-Toastification__toast-body { font-size: .875rem; line-height: 1.45; font-weight: 500; align-self: center; }
/* Icon: chu mau theo loai tren o tron trang */
.Vue-Toastification__container .Vue-Toastification__icon {
    width: 28px; height: 28px; flex: none; margin: 0 10px 0 0; padding: 6px; box-sizing: border-box;
    border-radius: 50%; background: #fff; color: #455a64;
}
.Vue-Toastification__container .Vue-Toastification__toast--success .Vue-Toastification__icon { color: #1f9254; }
.Vue-Toastification__container .Vue-Toastification__toast--error .Vue-Toastification__icon { color: #c0372b; }
.Vue-Toastification__container .Vue-Toastification__toast--warning .Vue-Toastification__icon { color: #b45309; }
.Vue-Toastification__container .Vue-Toastification__toast--info .Vue-Toastification__icon { color: #1b7f98; }
.Vue-Toastification__container .Vue-Toastification__close-button {
    color: #6b7280; opacity: .7; font-size: 18px; line-height: 20px; font-weight: 400; padding: 0 2px 0 10px; align-self: flex-start;
}
.Vue-Toastification__container .Vue-Toastification__close-button:hover,
.Vue-Toastification__container .Vue-Toastification__close-button:focus { opacity: 1; color: #263238; }
/* Thanh dem thoi gian: 3px, mau theo loai */
.Vue-Toastification__container .Vue-Toastification__progress-bar { height: 3px; background: #455a64; }
.Vue-Toastification__container .Vue-Toastification__toast--success .Vue-Toastification__progress-bar { background: #1f9254; }
.Vue-Toastification__container .Vue-Toastification__toast--error .Vue-Toastification__progress-bar { background: #c0372b; }
.Vue-Toastification__container .Vue-Toastification__toast--warning .Vue-Toastification__progress-bar { background: #b45309; }
.Vue-Toastification__container .Vue-Toastification__toast--info .Vue-Toastification__progress-bar { background: #1b7f98; }
/* Chuyen dong 'gm-toast-slide': truot vao tu canh man hinh; luc ra truot ra roi thu gon chieu cao de toast
   con lai truot xuong muot (move). bottom-center (toast "Da sao chep") truot tu duoi len. */
.gm-toast-slide-enter-active { animation: gmToastIn .35s cubic-bezier(.22, 1, .36, 1) both; }
.gm-toast-slide-enter-active.bottom-center, .gm-toast-slide-enter-active.top-center { animation-name: gmToastInUp; }
.gm-toast-slide-leave-active { animation: gmToastOut .45s ease-in both; }
.gm-toast-slide-leave-active.bottom-center, .gm-toast-slide-leave-active.top-center { animation-name: gmToastOutDown; }
.gm-toast-slide-move { transition: transform .3s ease; }
@keyframes gmToastIn { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes gmToastInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes gmToastOut {
    0% { opacity: 1; transform: none; max-height: 200px; }
    60% { opacity: 0; transform: translateX(110%); max-height: 200px; margin-bottom: .5rem; padding-top: 12px; padding-bottom: 14px; }
    100% { opacity: 0; transform: translateX(110%); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@keyframes gmToastOutDown {
    0% { opacity: 1; transform: none; max-height: 200px; }
    60% { opacity: 0; transform: translateY(100%); max-height: 200px; margin-bottom: .5rem; padding-top: 12px; padding-bottom: 14px; }
    100% { opacity: 0; transform: translateY(100%); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gm-toast-slide-enter-active, .gm-toast-slide-leave-active { animation-duration: .01ms !important; }
    .gm-toast-slide-move { transition: none; }
}
@media (max-width: 600px) {
    .Vue-Toastification__container .Vue-Toastification__toast { min-width: 0; max-width: none; border-radius: 6px; }
}

/* ===== Thanh tiến độ theo trạng thái (demo chốt 2026-10-29, phương án A2 "Vừa") — GIỐNG HỆT pub + admin =====
   Chuyển sắc đậm → nhạt nhưng đầu thanh không ngả đen; xanh lá emerald (không xanh ngọc), đỏ thật (không ngả hồng).
   - Thanh tự vẽ: thêm class .gbar-ok / .gbar-warn / .gbar-crit (phần đệm nhạt: thêm .gbar-soft).
   - Chữ % đi kèm: .gtxt-ok / .gtxt-warn / .gtxt-crit.
   - Progress Bootstrap .progress-bar.bg-success|green / bg-warning|orange / bg-danger|red tự đổi theo, không cần sửa markup.
   Thanh màu theo nhóm (series doanh thu, cặp chỉ số...) KHÔNG dùng bộ này. */
:root {
    --gbar-ok: linear-gradient(90deg, #10b981, #34d399);
    --gbar-warn: linear-gradient(90deg, #f97316, #fcd34d);
    --gbar-crit: linear-gradient(90deg, #e53935, #ff6f61);
    --gbar-info: linear-gradient(90deg, #0ea5e9, #22d3ee); /* thanh dự kiến (không phải trạng thái): Sky→Cyan của theme */
    --gbar-ok-fg: #047857;
    --gbar-warn-fg: #b45309;
    --gbar-crit-fg: #b91c1c;
}
.gbar-ok { background: var(--gbar-ok) !important; }
.gbar-warn { background: var(--gbar-warn) !important; }
.gbar-crit { background: var(--gbar-crit) !important; }
.gbar-info { background: var(--gbar-info) !important; }
.gbar-soft { opacity: .3; }
.gtxt-ok { color: var(--gbar-ok-fg); }
.gtxt-warn { color: var(--gbar-warn-fg); }
.gtxt-crit { color: var(--gbar-crit-fg); }
.progress-bar.bg-success, .progress-bar.bg-green { background: var(--gbar-ok) !important; }
.progress-bar.bg-warning, .progress-bar.bg-orange { background: var(--gbar-warn) !important; }
.progress-bar.bg-danger, .progress-bar.bg-red { background: var(--gbar-crit) !important; }