/* ==========================================================================
   KHU QUAN TRI
   --------------------------------------------------------------------
   Tach rieng khoi style.css cua giao dien khach. Hai noi phuc vu hai muc
   dich khac han: giao dien khach de ban hang, khu nay de LAM VIEC - can
   nhin nhanh, bam nhanh, khong can dep.

   Cac lop deu bat dau bang qt- de khong dam vao bo lop cua giao dien khach.
   ========================================================================== */

/*
 | quan-tri.css khong nap chung voi reset nao (chi bootstrap-icons - la font
 | icon, khong phai CSS reset) nen box-sizing mac dinh la content-box: moi
 | quy tac vua dat "width: 100%" vua co "padding" (nhu the "San pham ban
 | chay" o duoi 1024px, hay chinh .qt-canh) se rong hon container that su va
 | tran ra ngoai. Dat border-box mot lan o day cho ca cay .qt-khung.
 */
.qt-khung, .qt-khung * { box-sizing: border-box; }

/*
 | quan-tri.css khong nap reset nao (xem chu thich tren) nen margin 8px mac
 | dinh cua trinh duyet tren <body> van con nguyen - nen xanh cua .qt-khung
 | (du da co min-height:100vh) bi mot vien trang mong bao quanh do khoang
 | margin do, nhin nhu nen chua lap het cua so. Dep di la xong, khong can gi
 | khac vi .qt-khung tu lam het phan con lai.
 */
/* Be Vietnam Pro (nap qua Google Fonts trong layout.tsx) cho toan khu quan
   tri, ke ca trang dang nhap (.qtdn-khung nam NGOAI .qt-khung) - truoc day
   khong khai bao font nao, trinh duyet lui ve serif mac dinh kho doc. */
html, body { margin: 0; font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif; }

/*
 | Tuyet doi khong cho trang quan tri cuon NGANG tren ca so (yeu cau rieng cua
 | chu shop, khong phai loi phat sinh cu the) - moi bang rong (qt-bang-cuon) va
 | thanh keo sidebar (qt-canh-keo) da tu gioi han trong pham vi cua no, nhung
 | dong nay la LUOI CUOI CUNG: du co sai sot gi phat sinh sau nay (vd mot khoi
 | moi lam rong qua trang) thi trinh duyet CAT di thay vi lo thanh cuon ngang
 | ngay duoi cua so. Chi chan truc X - truc Y (cuon doc) khong dong toi.
 */
html { overflow-x: hidden; }

/*
 | Thanh cuon - dung mau rieng cua khu quan tri (Forest Sage Botanical, xem
 | bang mau duoi day), KHONG con dua theo giao dien khach nua tu dot doi mau
 | nay (truoc day co y dong bo voi sage/earth cua style.css, nhung hai giao
 | dien gio di theo huong khac han nhau).
 */
html { scrollbar-width: thin; scrollbar-color: #3e624b #e3e8de; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #e3e8de; border-radius: 999px; }
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, #496c55 0%, #3e624b 55%, #304e3b 100%);
}
::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(90deg, #496c55 0%, #3e624b 55%, #304e3b 100%);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5c8068 0%, #263f35 100%); }
::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(90deg, #5c8068 0%, #263f35 100%); }
::-webkit-scrollbar-corner { background: #e3e8de; }

/*
 | Bang mau "Forest Sage Botanical" - xanh rung tram cho sidebar, kem am cho
 | noi dung chinh, thay cho bang mau sage sang truoc day. Quy ve DUNG cac bien
 | goc duoi day (--qt-nen, --qt-vo-nen, --qt-the, --qt-vien, --qt-chu,
 | --qt-chu-mo, --qt-tieu-de, --qt-xanh, --qt-xanh-dam, --qt-tb-nen) + 4 bien
 | RIENG cho sidebar (--qt-canh-*, vi sidebar toi mau rieng, khac han khu noi
 | dung chinh sang mau, khong dung chung duoc voi --qt-chu).
 */
:root {
    /* Nen chinh (.qt-noi-dung) VA nen khung ngoai (.qt-khung) - DUNG CHUNG
       mot mau kem (khong con hai tang sang/dam nhu ban sage cu) de the
       (--qt-the, sang hon mot chut) moi la thu "noi len" tren nen, dung kieu
       phan lop pho bien cua dashboard: nen phang + the sang hon o tren. */
    --qt-nen: #f0f1eb;
    --qt-vo-nen: #f0f1eb;
    --qt-the: #fafaf7;
    --qt-vien: #dde4d8;
    --qt-chu: #34483d;
    --qt-chu-mo: #68766d;
    /* Tieu de (h1/h2 cac khoi, khac mau voi chu thuong --qt-chu) - bien MOI,
       truoc day tieu de dung chung mau voi --qt-chu, gio tach rieng dam hon
       han cho noi bat. */
    --qt-tieu-de: #20352b;
    --qt-xanh: #3e624b;
    --qt-xanh-dam: #304e3b;
    /* Nen THAT cua sidebar (.qt-canh doc thang bien nay - xem o duoi) -
       truoc day bien nay chi dung cho vong tron logo luc thu gon, sidebar
       dung chung mau voi --qt-vo-nen. Gio sidebar toi rieng mot mau xanh
       rung dam, khac han nen chinh sang mau, nen phai co bien rieng. */
    --qt-canh-nen: #263f35;
    /* Nen "trong" cua topbar dung chung (.qt-tb) - tang rieng, dam hon nen
       chinh mot chut de phan biet duoc voi vung noi dung ben duoi */
    --qt-tb-nen: #e3e8de;

    /*
     | Rieng cho sidebar (.qt-canh) - KHAC han --qt-chu/--qt-chu-mo cua noi
     | dung chinh. Ap dung bang cach GHI DE cuc bo ngay trong .qt-canh (xem o
     | do): moi selector con (menu, logo, chan, nut thu gon...) dang dung
     | THANG var(--qt-chu)/var(--qt-chu-mo) san nen tu dong doi mau theo luc
     | nam trong pham vi sidebar, khong can sua tung noi mot.
     */
    --qt-canh-chu: #f1f4ed;
    /* Khong co hex rieng cho ban "mo" trong yeu cau - giam opacity cua
       --qt-canh-chu thay vi bia hex moi, giu dung tong trang nga */
    --qt-canh-chu-mo: rgba(241, 244, 237, .62);
    --qt-canh-active-nen: #496c55;
    --qt-canh-active-chu: #f1f4ed;
    --qt-canh-hover-nen: #365545;

    /*
     | Them cho dot "them pattern/hoa tiet" - truoc gio moi the chi la mot mau
     | phang (--qt-the). --qt-the-2 la mau tang NHE cua the (dung lam diem cuoi
     | gradient tren the + nen trong cua icon nhat), --qt-glow la mau trong
     | suot dung ve quang sang/dom la trang tri o goc the (radial-gradient),
     | KHONG phai anh that - xem .qt-khoi/.qtd-khoi.
     */
    --qt-the-2: #f2f3ee;
    --qt-glow: rgba(62, 98, 75, .14);
    /* Nen nhan/badge (trang thai "Hoàn thành", KPI tang len, dong dang chon
       trong danh sach chat...) - truoc la var(--qt-nhan-nen) (mau mint sang cua bang mau
       sage cu), gio doi sang tong kem-xanh cua Forest Sage Botanical */
    --qt-nhan-nen: #e3eade;
}

/*
 | Che do toi - bat qua thuoc tinh data-qt-theme tren the <html> (TopbarQuanTri.tsx
 | doi, nho localStorage khoa qt_theme; app/(quan-tri)/layout.tsx co script nho
 | gan san thuoc tinh nay truoc khi ve trang de khong nhay sang roi toi).
 |
 | Van giu tinh than Forest Sage Botanical (xanh rung + kem) nhung dao do sang
 | toi - CHI doi lai cac bien DUNG CHUNG o day, phan lon khoi/the/bang/sidebar
 | deu dung var(--qt-...) nen tu dong doi mau theo. Rieng mot so mau ghi THANG
 | HEX rai rac (the trang thai don .qt-tt-*, mau duong bieu do...) KHONG tu
 | doi - dot dau nay chi phu phan khung chinh, chua quet het moi noi dung hex
 | trong toan bo file.
 */
:root[data-qt-theme='dark'] {
    --qt-nen: #182420;
    --qt-vo-nen: #182420;
    --qt-the: #20302a;
    --qt-vien: #324a3e;
    --qt-chu: #e3e9e1;
    --qt-chu-mo: #9fb0a5;
    --qt-tieu-de: #f1f4ed;
    --qt-xanh: #5c8068;
    --qt-xanh-dam: #79a386;
    --qt-canh-nen: #16241d;
    --qt-tb-nen: #1d2b25;

    --qt-the-2: #263a31;
    --qt-glow: rgba(92, 128, 104, .18);
    --qt-nhan-nen: #2a3c32;

    /* Sidebar ban toi: cang dam hon ban sang mot chut de ro ranh gioi voi
       noi dung (ban sang sidebar #263f35 da gan muc do toi cua ca trang toi
       noi dung, can toi hon de khong "hoa" vao nhau) */
    --qt-canh-chu: #f1f4ed;
    --qt-canh-chu-mo: rgba(241, 244, 237, .6);
    --qt-canh-active-nen: #3c5c48;
    --qt-canh-active-chu: #f1f4ed;
    --qt-canh-hover-nen: #233a2f;
}

/*
 | Khung va trang view gio la HAI TANG PHANG NOI len tren CUNG mot nen xanh
 | (.qt-khung) - truoc day sidebar toi rieng, noi dung sang rieng, canh nhau
 | sat sat trong gio ngoi. Padding+gap o day chinh la khoang ho de ca sidebar
 | lan .qt-noi-dung cung "noi" len, duoi 1024px tra ve 0 vi sidebar luc do la
 | drawer truot ra (xem media query duoi) khong con nam trong luong flex nua.
 */
.qt-khung {
    display: flex;
    min-height: 100vh;
    padding: 1.25rem;
    gap: 1.25rem;
    /* Hai dom sang mo o goc - cung ky thuat voi quang sang tren .qt-khoi,
       chi la to hon va nhat hon nhieu - lam nen bot "mot mau phang" ma khong
       can tai anh pattern nao */
    background:
        radial-gradient(900px 500px at 8% -8%, var(--qt-glow) 0%, transparent 55%),
        radial-gradient(700px 420px at 100% 100%, var(--qt-glow) 0%, transparent 55%),
        var(--qt-vo-nen);
    color: var(--qt-chu);
    font-size: 15px;
}

/*
 | Hoa tiet la/hoa (components/quan-tri/BotanicalDecoration.tsx) - kich thuoc
 | goc dat qua prop (inline style, danh cho desktop), CSS o day chi CAP BOT
 | bang max-width o man hinh hep hon (img ton trong max-width hon width inline
 | theo dung chuan CSS, khong can !important). An han o dien thoai rat nho de
 | khong choi cho trong sidebar drawer.
 */
.qt-botanical { max-width: 100%; }
@media (max-width: 1279px) { .qt-botanical { max-width: 160px; } }
@media (max-width: 575.98px) { .qt-botanical { display: none; } }

/* ---------------------------- Cot ben trai ---------------------------- */
/*
 | Bo han anh van go (wood-sidebar.webp, da xoa khoi public/) - sidebar gio
 | dung THANG --qt-vo-nen giong het .qt-khung ben ngoai, nhin nhu sidebar va
 | khung la MOT khoi lien mach chu khong phai hai mang ghep lai. Chu/icon doi
 | sang mau toi (truoc la trang, hop voi nen go toi - nen sang thi phai doi).
 | Dung CHUNG cho moi trang quan tri. 3 tang rong: >=1200 day du chu, 1024-1199
 | chi con icon, <1024 thanh drawer truot ra (xem .qt-hamburger/.qt-scrim duoi).
 */

.qt-canh {
    /* --qt-canh-rong dat tu JS (SidebarQuanTri.tsx, keo tay co gian) - mac
       dinh 232px khi chua keo lan nao. Cac media query duoi (76px thu gon,
       260px drawer dien thoai) nam SAU trong file nen van thang nhu truoc,
       bien nay chi anh huong luc KHONG co quy tac nao khac de ra. */
    width: var(--qt-canh-rong, 232px);
    flex-shrink: 0;
    /* Bo goc mem - truoc day sidebar vuong het bon goc, nhin cung giua khung
       kem tron deu xung quanh (chu shop thay "cứng qua góc"). KHONG dat
       overflow:hidden o day du bo goc can clip phan hoa tiet botanical tran
       ra - .qt-canh-keo (thanh keo doi be rong) nam NGOAI vien phai cua
       chinh no (right am), overflow:hidden se cat mat thanh keo do. */
    border-radius: 1.25rem;
    /* Nen rieng cua sidebar (--qt-canh-nen, xanh rung tram) - KHAC han nen
       chinh (--qt-vo-nen, mau kem) theo bang mau Forest Sage Botanical, noi
       ro thanh mot khoi dam, khong con "tan" vao khung nhu truoc nua. Vi
       dung mau dac (khong phai trong suot) nen van dung duoc nguyen o che do
       drawer tren dien thoai (xem media query duoi .qt-canh luc do thanh
       position:fixed, phai co nen dac moi doc duoc chu, khong the trong
       suot de lo noi dung phia sau). */
    background: var(--qt-canh-nen);
    /* Ghi de CUC BO --qt-chu/--qt-chu-mo ngay tai day (khong phai o :root) -
       moi selector con ben trong sidebar (logo, menu, chan, nut thu gon...)
       dang dung THANG var(--qt-chu)/var(--qt-chu-mo) nen tu dong doi theo mau
       rieng cua sidebar, khong can sua tung noi mot. Xem 4 bien goc
       --qt-canh-* o :root. */
    --qt-chu: var(--qt-canh-chu);
    --qt-chu-mo: var(--qt-canh-chu-mo);
    color: var(--qt-chu);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 1.25rem;
    height: calc(100vh - 2.5rem);
    z-index: 40;
    /* width co transition RIENG (khac transform) de luc sup vao/bung ra che
       do thu gon (nut bam, hoac keo qua nguong - xem SidebarQuanTri.tsx) tron
       tru chu khong nhay cuc mot cai. Ngan (.16s) de luc KEO TAY lien tuc van
       bam sat chuot, khong co cam giac tre/ri rang. */
    transition: transform .2s ease, width .16s cubic-bezier(.4, 0, .2, 1);
}
/* Luc dang keo tay LIEN TUC (chua sup vao thu gon): tat transition cua width,
   bam dung 1:1 theo chuot - co transition o day thi méi lan mousemove deu
   phai "duoi kip" muc tieu moi, cong don lai thanh do tre that su chu khong
   con la hieu ung tron tru nua. Luc sup vao thu gon thi class nay van con
   (chua tha chuot) nhung .qt-canh-thu-gon la mot nhanh CSS khac, duoc uu
   tien vi nam sau trong file nen width van nhay mot buoc dut khoat o dung
   thoi diem do - cam giac "sup" ro rang la mong muon, chi rieng doan KEO
   LIEN TUC truoc do moi can bam sat chuot. */
.qt-canh-dang-keo:not(.qt-canh-thu-gon) { transition: none; }

/* position:relative + z-index:1 o 3 khoi con TRUC TIEP duoi day (canh-dau,
   menu, chan) - de luon noi TREN hoa tiet botanical (position:absolute,
   z-index:0, xem BotanicalDecoration.tsx va noi dat trong SidebarQuanTri.tsx) */
.qt-canh-dau { position: relative; z-index: 1; display: flex; align-items: center; gap: .5rem; }

.qt-logo {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--qt-chu);
    text-decoration: none;
    line-height: 1.2;
}
/* Vong tron "SN" - CHI hien luc thu gon (.qt-canh-thu-gon duoi), luc do
   .qt-logo-anh an di nen can mot dau hieu gi do thay cho logo day du */
.qt-logo-dau {
    display: none;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    /* Dam hon nen sidebar mot nac (--qt-canh-active-nen) de noi ro thanh vong
       tron, khong "chim" vao nen toi xung quanh */
    background: var(--qt-canh-active-nen);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
}
/* Logo that (logo-full.png, 281x300 - icon tron + chu xep chong) thay cho chu
   "Song Ngọc / Quản trị" cu - khong con can nhan rieng "Quản trị" vi topbar
   (TopbarQuanTri.tsx) da hien san ten + avatar nguoi dang dang nhap, nhan hai
   lan la thua. Can CAO moi doc duoc chu nho duoi logo (anh gan vuong, chu
   chiem khoang 30% chieu cao duoi cung). */
.qt-logo-anh { display: block; height: 4.25rem; width: auto; min-width: 0; }

/* Nut thu gon/phong ra - kieu ChatGPT, dat canh logo. Chi hien tu 1024px
   (duoi do da co .qt-hamburger/.qt-dong-drawer lo viec dong/mo drawer roi) */
.qt-thu-gon-nut {
    display: none;
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: .5rem;
    background: rgba(241, 244, 237, .85);
    /* Nen nut SANG tren sidebar TOI - icon phai mau TOI de doc ro, KHONG
       dung var(--qt-chu-mo) (mau sang cua sidebar, se "bien mat" tren nen
       sang cua chinh nut nay) */
    color: var(--qt-canh-nen);
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.qt-thu-gon-nut:hover { background: #fff; }
@media (min-width: 1024px) {
    .qt-thu-gon-nut { display: inline-flex; align-items: center; justify-content: center; }
}

/*
 | Thanh keo co gian be rong - dat sat VIEN TRAI cua .qt-noi-dung (not canh
 | phai .qt-canh): .qt-khung co gap 1.25rem giua sidebar va trang view, nut
 | nay nam dung giua khoang gap do, can giua tai diem sat trang view (right:
 | -(1.25rem + nua be rong) tinh tu canh phai .qt-canh). Khong to mau bao gio,
 | ke ca luc ro chuot hay dang keo - CHI doi con tro thanh col-resize, khong
 | ve them gach/vien gi ca cho sach mat (do la ly do chinh yeu cau "thong
 | minh": nguoi dung bam dung vi tri la biet ngay qua con tro, khong can mot
 | duong ke mau luon hien ra lam roi giao dien).
 */
.qt-canh-keo {
    position: absolute;
    top: 0;
    right: calc(-1.25rem - 7px);
    width: 14px;
    height: 100%;
    cursor: col-resize;
    z-index: 45;
    display: none;
}
/* Chi hien o man that rong (>=1280px, dung tang hien chu day du) - duoi
   1280 (ke ca tang thu gon tu dong 1024-1279) be rong da bi media query
   khac quyet dinh roi, keo vao cung khong doi duoc gi, de thanh keo chi gay
   roi khong co tac dung */
@media (min-width: 1280px) {
    .qt-canh-keo { display: block; }
}

.qt-dong-drawer {
    display: none;
    border: 0;
    background: none;
    color: var(--qt-chu-mo);
    font-size: 1.1rem;
    cursor: pointer;
    padding: .25rem;
}

/*
 | overflow-x: hidden ghi RO RANG, khong de trinh duyet tu suy - CSS co quy
 | tac ngam: mot truc overflow khong phai "visible" thi truc con lai cung bi
 | ep thanh "auto" ngay ca khi khong khai bao. Truoc day chi co overflow-y
 | nen o rong tu dong thanh auto, roi luc be sidebar vua khit (keo het co,
 | hoac the "Sắp có" hoi dai) la hien ca mot thanh cuon NGANG xau xi (dung
 | mau gradient scrollbar cua ca site, nhin nhu mot "thanh keo" la - da co
 | nguoi tuong nham). Gio ghi han ca hai truc cho ro, khong con lo nua.
 */
/*
 | padding-right rieng cho .qt-menu (khong phai align-items: flex-start) -
 | MOI muc van STRETCH dong deu nhu nhau (align-items: stretch, mac dinh),
 | chi la ca khoi .qt-menu gio hep hon chinh no mot chut o canh phai, nen
 | nen rê/dang chon deu nhau tam tam, khong con dinh sat vien phai sidebar
 | nua. Khac voi lan truoc (da bo): lan do lam moi muc TU CO theo rieng do
 | dai chu cua no (ngan/dai khac nhau) - khong phai y muon, moi muc van phai
 | bang nhau, chi la khong con cham het be ngang.
 */
/*
 | An thanh cuon cua rieng menu - may Windows mot so trinh duyet/che do (vd
 | "lam to thanh cuon" trong Easy Access) ve thanh cuon mac dinh RAT TO kem nut
 | mui ten, khong theo kip CSS scrollbar-width:thin dat o <html> (bien nay
 | KHONG chac chan duoc ke thua xuong tung khung cuon con trong moi trinh
 | duyet). An han cho chac - menu van cuon duoc binh thuong bang chuot/cham,
 | chi la khong con thanh truot hien ra nua.
 */
.qt-menu {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-right: .85rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.qt-menu::-webkit-scrollbar { display: none; }

/* Moi nhom (Tong quan/Ban hang/Quan ly web/...) la mot khoi rieng - gap GIUA
   CAC MUC trong CUNG mot nhom giu dung .35rem nhu truoc, gap GIUA CAC NHOM
   lon hon (.qt-menu o tren) de mat de phan biet ranh gioi nhom */
.qt-menu-nhom { display: flex; flex-direction: column; gap: .35rem; }

.qt-menu-nhom-nhan {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--qt-canh-chu-mo);
    opacity: .75;
    padding: 0 .75rem;
    margin-bottom: .1rem;
}

.qt-menu a,
.qt-menu-sap-co {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 44px;
    padding: 0 .75rem;
    border-radius: .75rem;
    color: var(--qt-chu);
    text-decoration: none;
    /* .81rem truoc qua nho, chu shop yeu cau to ro ra - .95rem van vua het
       chieu cao co dinh 44px cua moi muc (align-items:center tu can giua) */
    font-size: .95rem;
    white-space: nowrap;
    /* CHI doi mau - khong con phong to/kinh mo (xem yeu cau dong bo mau: "Không
       thay đổi kích thước, vị trí hoặc gây layout shift") */
    transition: background-color .18s ease, color .18s ease;
}

/* Hover: nen phang --qt-canh-hover-nen, chu/icon giu nguyen mau xanh dam cua sidebar (currentColor) */
.qt-menu a:hover,
.qt-menu a:focus-visible {
    background: var(--qt-canh-hover-nen);
}
.qt-menu i {
    font-size: 1.05rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/*
 | Ten muc CO THE rut gon bang dau "..." khi sidebar keo het co (200px) - vd
 | "Báo cáo / Phân tích" dai hon cho con lai sau khi tru icon + badge "Sắp
 | có". flex:1 + min-width:0 moi cho phep span nay THAT SU co nho hon do
 | rong chu (mac dinh flex khong cho co qua noi dung ben trong). Badge em o
 | duoi da co flex-shrink:0 rieng nen luon hien du, chi ten muc la rut gon.
 */
.qt-menu a span,
.qt-menu-sap-co span {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

/*
 | Muc dang chon - nen DAM (--qt-canh-active-nen), chu TRANG (--qt-canh-active-chu)
 | + in dam, de nhan ra ngay CA KHI khong ro chuot vao. Khong con hieu ung
 | kinh mo/phong to (xem yeu cau dong bo mau).
 |
 | Selector PHAI la ".qt-menu a.qt-menu-dang-chon" (khong phai chi
 | ".qt-menu-dang-chon" suong) - ".qt-menu a" o tren co specificity (0,1,1),
 | cao hon mot class don le (0,1,0), nen neu chi ghi ".qt-menu-dang-chon" thi
 | DU dat sau trong file van bi ".qt-menu a { color: var(--qt-chu) }" de mat
 | mau chu trang (da gap thuc te - chu khong doi du nen da doi dung).
 */
.qt-menu a.qt-menu-dang-chon {
    background: var(--qt-canh-active-nen);
    color: var(--qt-canh-active-chu);
    font-weight: 600;
}

/*
 | Re vao DUNG muc dang chon: khong de ".qt-menu a:hover" (them mot
 | pseudo-class nen specificity cao hon ca luat tren) de len nen hover nhat,
 | lam chu trang vua doi o tren bi "chim" mat tren nen sang - giu nguyen mau
 | dang chon, chi RO RANG la van dang o do.
 */
.qt-menu a.qt-menu-dang-chon:hover,
.qt-menu a.qt-menu-dang-chon:focus-visible {
    background: var(--qt-canh-active-nen);
    color: var(--qt-canh-active-chu);
}

/* Muc chua co trang that (Bao cao, Cai dat) - mo, khong bam duoc. Sidebar gio
   toi mau (Forest Sage Botanical) nen phai dung TONG SANG mo di, khong phai
   tong toi nhu truoc (dang rgba tren mau toi se "bien mat" tren nen toi). */
.qt-menu-sap-co  { color: var(--qt-canh-chu-mo); cursor: default; }
.qt-menu-sap-co em {
    margin-left: auto;
    font-style: normal;
    font-size: .65rem;
    background: rgba(241, 244, 237, .14);
    color: var(--qt-canh-chu-mo);
    padding: .1rem .4rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

/* margin-top: auto day .qt-chan xuong sat day sidebar - truoc la dat o
   .qt-tagline (da bo), gio .qt-chan la phan tu cuoi cung nen tu minh nhan
   trach nhiem day xuong. */
.qt-chan {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding: 1rem .75rem 0;
    /* KHONG dung var(--qt-vien) o day - do la mau vien CHO THE SANG, gan nhu
       vo hinh tren nen sidebar toi. Dung mot vach mo rieng tren nen toi. */
    border-top: 1px solid rgba(241, 244, 237, .15);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .85rem;
}
.qt-ve-web { color: var(--qt-chu-mo); text-decoration: none; }
.qt-ve-web:hover { color: var(--qt-chu); }

/* Nut hamburger mo drawer - chi hien duoi 1024px. Van dung mau toi rieng
   (khong doi theo sidebar): day la nut NOI TREN NOI DUNG trang (nen sang),
   can tuong phan voi nen do chu khong phai voi sidebar. */
.qt-hamburger {
    display: none;
    position: fixed;
    top: .85rem;
    left: .85rem;
    z-index: 50;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: .5rem;
    background: var(--qt-canh-nen);
    color: #f1f2ec;
    font-size: 1.1rem;
    cursor: pointer;
}

.qt-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 39;
}

/*
 | Mau do - RIENG, khac han bo mau xanh/xam cua moi muc con lai trong sidebar
 | - dang xuat la hanh dong khac loai (roi khoi phien lam viec), khong phai
 | mot "trang" nhu Don hang/Chat..., can nhin la phan biet duoc ngay. Vien
 | van mau trung tinh nhu cu (var(--qt-vien)) - CHI chu/icon do thoi, vien do
 | theo nhin "nhac nho/canh bao" qua, khong hop voi tong "sang" cua ca khoi.
 | Mau do cung chinh sang hon #8c2f2f ban dau (nghieng hong-ranh ("wine") thay
 | vi do gach don thuan) cho nhe nhang, sang trong hon.
 */
.qt-thoat {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: none;
    /* KHONG dung var(--qt-vien) - do la mau vien cho THE SANG, gan nhu vo
       hinh tren sidebar toi (cung ly do voi .qt-chan o tren) */
    border: 1px solid rgba(241, 244, 237, .18);
    color: #e49aa8;
    border-radius: .4rem;
    padding: .45rem;
    cursor: pointer;
    text-align: left;
}
.qt-thoat:hover:not(:disabled) {
    background: rgba(228, 154, 168, .12);
    border-color: rgba(228, 154, 168, .4);
    color: #f0b7c2;
}
.qt-thoat:disabled { opacity: .6; cursor: default; }

/* ---------------------------- Noi dung ---------------------------- */

/*
 | "Trang view" - noi MOI trang quan tri (Dashboard, Don hang, Chat...) render
 | vao. background rieng (--qt-nen, nhat hon --qt-vo-nen cua .qt-khung mot
 | bac) + bo goc tron de doc duoc la mot "tam" dang noi tren nen xanh cua
 | khung, khong con la khoang trong khong mau nhu truoc.
 */
.qt-noi-dung {
    flex: 1;
    padding: 1.75rem 2rem;
    min-width: 0;
    background: var(--qt-nen);
    border-radius: 1rem;
}

.qt-tieu-de { font-size: 1.4rem; margin: 0 0 1.25rem; font-weight: 700; color: var(--qt-tieu-de); }

/* Tieu de + nut hanh dong (ví dụ "+ Thêm mã giảm giá") tren cung mot hang */
.qt-tieu-de-hang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.qt-tieu-de-hang .qt-tieu-de { margin-bottom: 0; }
.qtd-tieu-de-nut { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ---------------------------- O so lieu ---------------------------- */

.qt-o-so {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    /* 20-24px theo yeu cau khoang cach giua cac card tren desktop */
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.qt-o {
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: .6rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-decoration: none;
    color: inherit;
}
a.qt-o:hover { border-color: var(--qt-xanh); }

.qt-o i     { color: var(--qt-chu-mo); font-size: 1.1rem; margin-bottom: .3rem; }
.qt-so      { font-size: 1.6rem; font-weight: 600; line-height: 1.1; }
.qt-nhan    { font-size: .85rem; color: var(--qt-chu-mo); }
.qt-phu     { font-size: .72rem; color: var(--qt-chu-mo); opacity: .8; }

/* O co viec can lam: to len cho de thay */
.qt-o-can-lam            { border-color: var(--qt-xanh); background: var(--qt-nhan-nen); }
.qt-o-can-lam i          { color: var(--qt-xanh); }
.qt-o-can-lam .qt-so     { color: var(--qt-xanh-dam); }

/* ---------------------------- Khoi va bang ---------------------------- */

/*
 | DUNG CHUNG kieu the voi .qtd-khoi (chi dashboard dung, xem muc "Khoi the
 | sang dung chung" o duoi) - gop lai o day de doi mot cho la ca hai noi deu
 | theo, khong con lech kieu giua dashboard va cac trang quan tri khac.
 |
 | Gradient nhe (--qt-the -> --qt-the-2) + quang sang goc tren-phai
 | (::before, radial-gradient trong suot) la phan "pattern" moi thay cho the
 | phang mot mau truoc day - khong phai anh, chi la CSS, nen khong can tai
 | them tai nguyen nao.
 */
.qt-khoi, .qtd-khoi {
    position: relative;
    background: linear-gradient(165deg, var(--qt-the) 0%, var(--qt-the-2) 100%);
    border: 1px solid var(--qt-vien);
    /* 16px theo yeu cau Forest Sage Botanical */
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(32, 53, 43, .04), 0 12px 28px -18px rgba(32, 53, 43, .16);
    overflow: hidden;
}
.qt-khoi::before, .qtd-khoi::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--qt-glow) 0%, transparent 72%);
    pointer-events: none;
}
/* Noi dung luon nam TREN quang sang trang tri (::before khong co z-index nen o duoi theo thu tu ve, nhung dat ro cho chac) */
.qt-khoi > *, .qtd-khoi > * { position: relative; z-index: 1; }

.qt-khoi-dau {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .9rem;
}
.qt-khoi-dau h2 { font-size: 1rem; margin: 0; font-weight: 600; color: var(--qt-tieu-de); }
.qt-khoi-dau a  { font-size: .85rem; color: var(--qt-xanh); text-decoration: none; }

/* Bang rong hon man hinh thi CUON TRONG KHOI, khong day ca trang lech ngang */
.qt-bang-cuon { overflow-x: auto; }

/*
 | Mau XEN KE tung dong (zebra) - theo dung anh mau nguoi dung gui, thay cho
 | duong ke mong giua cac dong truoc day. Dung nth-child(even) tren tbody tr,
 | KHONG dong trong header (thead khong co .qt-bang-cuon rieng, chi la the
 | <tr> thuong trong <thead> nen selector ":is(tbody) tr" moi can, tranh "an"
 | ca dong tieu de). Hover dam hon mot chut de biet dang ro dong nao.
 */
.qt-bang { width: 100%; border-collapse: collapse; font-size: .88rem; }
.qt-bang th {
    text-align: left;
    padding: .65rem .75rem;
    color: var(--qt-chu-mo);
    font-weight: 600;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    /* Nen xanh xam rat nhat cho hang tieu de - dung chung mau voi topbar (--qt-tb-nen) */
    background: var(--qt-tb-nen);
    border-bottom: 1px solid var(--qt-vien);
    white-space: nowrap;
}
.qt-bang th:first-child { border-top-left-radius: 10px; }
.qt-bang th:last-child { border-top-right-radius: 10px; }
.qt-bang td { padding: .7rem .75rem; border-bottom: none; }
.qt-bang tbody tr:nth-child(even) td { background: var(--qt-nen); }
.qt-bang tbody tr:hover td { background: var(--qt-the-2); }
.qt-bang a { color: var(--qt-xanh); text-decoration: none; font-weight: 500; }

/* Nhin giong .qt-bang a (mot lien ket) nhung la <button> - mo popup thay vi chuyen trang */
.qt-bang-nut-lien {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--qt-xanh);
    font-weight: 500;
    cursor: pointer;
}
.qt-bang-nut-lien:hover { color: var(--qt-xanh-dam); text-decoration: underline; }

.qt-hanh-dong-hang { display: flex; align-items: center; gap: .5rem; }

.qt-phai { text-align: right; }
/* tabular-nums: cac chu so rong bang nhau nen cot tien thang hang */
.qt-tien { font-variant-numeric: tabular-nums; white-space: nowrap; }

.qt-trong { color: var(--qt-chu-mo); margin: 0; padding: 1rem 0; }

/* ---------------------------- Trang thai don ---------------------------- */

.qt-trang-thai {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 1rem;
    font-size: .78rem;
    white-space: nowrap;
}
.qt-tt-pending   { background: #fff4e0; color: #8a5a00; }
.qt-tt-confirmed { background: #e6f0fb; color: #1f5691; }
.qt-tt-shipping  { background: #e9ecfb; color: #3b3f96; }
/* Mau CHU ghi THANG HEX (khong qua var(--qt-xanh-dam)) - nen cua the nay LUON
   la mau sang (var(--qt-nhan-nen)) bat ke sang/toi, nen chu cung phai LUON la mau toi di
   kem, khong doi theo var se sang len o che do toi va mat tuong phan */
.qt-tt-completed { background: var(--qt-nhan-nen); color: var(--qt-xanh-dam); }
.qt-tt-cancelled { background: #f6e7e7; color: #8c2f2f; }

/* Trang thai hien thi cua ma giam gia - xem backend/src/serializers/couponAdminSerializer.ts */
.qt-tt-dang_chay { background: var(--qt-nhan-nen); color: var(--qt-xanh-dam); }
.qt-tt-sap_chay  { background: #e6f0fb; color: #1f5691; }
.qt-tt-het_han,
.qt-tt-het_luot  { background: #f6e7e7; color: #8c2f2f; }
.qt-tt-tat       { background: #eef1ea; color: var(--qt-chu-mo); }

/* ---------------------------- Sidebar: thu gon va drawer ---------------------------- */

/* 1024-1279: TU DONG chi con icon, man hinh qua hep khong du cho chu (cung
   nguong voi luoi KPI 2/3 cot). Dung CHUNG mot bo khai bao voi .qt-canh-thu-gon
   (nguoi dung tu bam thu gon, moi be rong tu 1024 tro len) - hai cach kich
   hoat khac nhau nhung cung MOT hinh dang, nen liet ke chung mot noi. */
@media (min-width: 1024px) and (max-width: 1279px) {
    .qt-canh { width: 76px; padding: 1.25rem .5rem; align-items: center; }
    .qt-canh-dau { flex-direction: column; gap: .5rem; }
    .qt-logo { flex-direction: column; gap: .35rem; }
    .qt-logo-dau { display: flex; }
    .qt-logo-anh { display: none; }
    .qt-menu a, .qt-menu-sap-co { width: 44px; justify-content: center; padding: 0; }
    .qt-menu a span, .qt-menu-sap-co span, .qt-menu-sap-co em { display: none; }
    /* Thu gon thi khong con cho de doc ten nhom - an chu, chi con khoang trong giua cac nhom lam ranh gioi */
    .qt-menu { gap: .7rem; }
    .qt-menu-nhom-nhan { display: none; }
    .qt-chan { align-items: center; }
    .qt-ve-web span { display: none; }
    .qt-thoat { justify-content: center; padding: .45rem; }
    .qt-thoat span { display: none; }
}

/* Nguoi dung tu bam nut thu gon (kieu ChatGPT) - dung HET hinh dang tren nhung
   KHONG gioi han trong khoang 1024-1279, ap dung o moi be rong tu 1024 tro len
   (man rong van thu gon duoc neu muon nhieu cho hon cho noi dung). */
@media (min-width: 1024px) {
    .qt-canh-thu-gon { width: 76px; padding: 1.25rem .5rem; align-items: center; }
    .qt-canh-thu-gon .qt-canh-dau { flex-direction: column; gap: .5rem; }
    .qt-canh-thu-gon .qt-logo { flex-direction: column; gap: .35rem; }
    .qt-canh-thu-gon .qt-logo-dau { display: flex; }
    .qt-canh-thu-gon .qt-logo-anh { display: none; }
    .qt-canh-thu-gon .qt-menu a,
    .qt-canh-thu-gon .qt-menu-sap-co { width: 44px; justify-content: center; padding: 0; }
    .qt-canh-thu-gon .qt-menu a span,
    .qt-canh-thu-gon .qt-menu-sap-co span,
    .qt-canh-thu-gon .qt-menu-sap-co em { display: none; }
    .qt-canh-thu-gon .qt-menu { gap: .7rem; }
    .qt-canh-thu-gon .qt-menu-nhom-nhan { display: none; }
    .qt-canh-thu-gon .qt-chan { align-items: center; }
    .qt-canh-thu-gon .qt-ve-web span { display: none; }
    .qt-canh-thu-gon .qt-thoat { justify-content: center; padding: .45rem; }
    .qt-canh-thu-gon .qt-thoat span { display: none; }
}

/*
 | Goi y (tooltip) ten muc luc sidebar thu gon - position:fixed, toa do do JS
 | tinh san (xem SidebarQuanTri.tsx ham hienGoiY/.qt-goi-y).
 |
 | The nay LUON nam san trong DOM (khong mount/unmount theo state) - chi doi
 | class .qt-goi-y-hien de bat/tat opacity. Truoc day React mount/unmount hang
 | luc ro chuot vao/ra nen KHONG co trang thai "truoc do" de transition chay
 | tu do - bat/tat tuc thi, nhin giat. Giu nguyen trong DOM thi opacity/transform
 | co diem xuat phat ro rang, mo dan/mat dan duoc that su.
 */
.qt-goi-y {
    position: fixed;
    transform: translateY(-50%) translateX(-4px);
    /* LUON toi + chu trang, bat ke theme - KHONG dung var(--qt-chu) (ben trong
       .qt-canh bien nay tro ve --qt-canh-chu, gio la mau SANG, se lam nhan
       nay "trang tren trang" khong doc duoc chu) */
    background: var(--qt-canh-nen);
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .4rem .7rem;
    border-radius: .4rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
    z-index: 70;
}
.qt-goi-y-hien { opacity: 1; transform: translateY(-50%) translateX(0); }

/* Duoi 1024: sidebar la drawer truot ra tu trai, khong con nam trong luong flex.
   .qt-khung ve lai padding/gap = 0 va .qt-noi-dung bo goc tron - "noi" tren nen
   xanh chi hop ly khi con cho de thay vien, man hep thi cho tran het man hinh
   dep hon la chua mot khung xanh mong xung quanh. */
@media (max-width: 1023px) {
    .qt-hamburger { display: block; }

    .qt-khung { padding: 0; gap: 0; }

    .qt-canh {
        position: fixed;
        inset: 0 auto 0 0;
        height: 100vh;
        width: 260px;
        border-radius: 0;
        transform: translateX(-100%);
    }
    .qt-canh-mo { transform: translateX(0); }
    .qt-scrim { display: block; }

    .qt-dong-drawer { display: block; }

    .qt-noi-dung { padding: 4rem 1rem 1.25rem; border-radius: 0; }
}

@media (max-width: 480px) {
    .qt-noi-dung { padding: 4rem .75rem 1.25rem; }
}

/* ---------------------------- Thanh loc va tim ---------------------------- */

.qt-thanh-loc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.qt-loc-nhom { display: flex; flex-wrap: wrap; gap: .35rem; }

.qt-loc {
    padding: .38rem .8rem;
    border: 1px solid var(--qt-vien);
    border-radius: 1.2rem;
    background: var(--qt-the);
    color: var(--qt-chu-mo);
    text-decoration: none;
    font-size: .85rem;
    white-space: nowrap;
}
.qt-loc:hover      { border-color: var(--qt-xanh); color: var(--qt-xanh-dam); }
.qt-loc-chon       { background: var(--qt-xanh); border-color: var(--qt-xanh); color: #fff; }
.qt-loc-chon:hover { color: #fff; }

.qt-tim { display: flex; }
.qt-tim input {
    border: 1px solid var(--qt-vien);
    border-right: none;
    border-radius: .4rem 0 0 .4rem;
    padding: .42rem .7rem;
    min-width: 16rem;
    font-size: .88rem;
}
.qt-tim button {
    border: 1px solid var(--qt-vien);
    border-radius: 0 .4rem .4rem 0;
    background: var(--qt-the);
    padding: .42rem .8rem;
    cursor: pointer;
    color: var(--qt-chu-mo);
}
.qt-tim button:hover { background: #eef1ea; color: var(--qt-xanh-dam); }

/* Dia chi dai thi cat bot, khong lam bang gian ra */
.qt-cat {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------- Phan trang ---------------------------- */

.qt-phan-trang {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: .5rem;
    border-top: 1px solid var(--qt-vien);
    font-size: .87rem;
    color: var(--qt-chu-mo);
}
.qt-phan-trang a { color: var(--qt-xanh); text-decoration: none; }

/* ---------------------------- Chi tiet don ---------------------------- */

.qt-quay-lai {
    display: inline-block;
    color: var(--qt-chu-mo);
    text-decoration: none;
    font-size: .87rem;
    margin-bottom: .6rem;
}
.qt-quay-lai:hover { color: var(--qt-xanh-dam); }

.qt-dau-trang { display: flex; align-items: center; gap: .75rem; }
.qt-dau-trang .qt-tieu-de { margin-bottom: 0; }
.qt-phu-trang { color: var(--qt-chu-mo); font-size: .87rem; margin: .3rem 0 1.25rem; }

.qt-hai-cot {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1000px) { .qt-hai-cot { grid-template-columns: 1fr; } }

.qt-tong-tien {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--qt-vien);
    display: flex;
    flex-direction: column;
    gap: .4rem;
    font-size: .9rem;
}
.qt-tong-tien > div { display: flex; justify-content: space-between; gap: 1rem; }
.qt-tong-tien > div > span:first-child { color: var(--qt-chu-mo); }
.qt-tong-cuoi {
    padding-top: .5rem;
    border-top: 1px solid var(--qt-vien);
    font-weight: 600;
    font-size: 1.02rem;
}

.qt-dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; font-size: .9rem; }
.qt-dl dt { color: var(--qt-chu-mo); white-space: nowrap; }
.qt-dl dd { margin: 0; }
.qt-dl a  { color: var(--qt-xanh); text-decoration: none; }

.qt-ghi-chu { margin: 0; white-space: pre-wrap; font-size: .9rem; }

/* ---------------------------- Doi trang thai ---------------------------- */

.qt-doi-tt label { display: block; font-size: .85rem; color: var(--qt-chu-mo); margin-bottom: .4rem; }
.qt-doi-tt-hang { display: flex; gap: .5rem; }

.qt-doi-tt select {
    flex: 1;
    border: 1px solid var(--qt-vien);
    border-radius: .4rem;
    padding: .45rem .6rem;
    font-size: .9rem;
    background: #fff;
}
.qt-doi-tt button {
    border: none;
    border-radius: .4rem;
    background: var(--qt-xanh);
    color: #fff;
    padding: .45rem 1.1rem;
    cursor: pointer;
    font-size: .9rem;
}
.qt-doi-tt button:hover:not(:disabled) { background: var(--qt-xanh-dam); }
.qt-doi-tt button:disabled { background: #c8cfc0; cursor: default; }

.qt-loi   { color: #8c2f2f; font-size: .85rem; margin: .5rem 0 0; }
.qt-xong  { color: var(--qt-xanh-dam); font-size: .85rem; margin: .5rem 0 0; }
.qt-luu-y {
    margin: .7rem 0 0;
    padding: .6rem .7rem;
    background: #fff8e8;
    border-radius: .4rem;
    font-size: .82rem;
    color: #7a5a12;
}

/* ---------------------------- Tin nhan ---------------------------- */

.qt-tin-moi { border-left: 3px solid var(--qt-xanh); }

.qt-tin-dau { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.qt-tin-lienhe { font-size: .85rem; color: var(--qt-chu-mo); margin-top: .15rem; }
.qt-tin-lienhe a { color: var(--qt-xanh); text-decoration: none; }
.qt-tin-gio { font-size: .82rem; color: var(--qt-chu-mo); white-space: nowrap; }

.qt-cham-moi {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .45rem;
    border-radius: 1rem;
    background: var(--qt-xanh);
    color: #fff;
    font-size: .7rem;
}

.qt-tin-tieude  { font-weight: 600; margin: 0 0 .35rem; font-size: .93rem; }
.qt-tin-noidung { margin: 0 0 .9rem; white-space: pre-wrap; font-size: .9rem; line-height: 1.55; }
.qt-tin-cuoi    { display: flex; flex-wrap: wrap; gap: .5rem; }

.qt-nut-nho {
    border: 1px solid var(--qt-vien);
    background: var(--qt-the);
    border-radius: .4rem;
    padding: .35rem .75rem;
    font-size: .84rem;
    cursor: pointer;
    color: var(--qt-chu);
    text-decoration: none;
}
.qt-nut-nho:hover:not(:disabled) { border-color: var(--qt-xanh); color: var(--qt-xanh-dam); }
.qt-nut-nho:disabled { opacity: .6; cursor: default; }

.qt-nut-chinh { background: var(--qt-xanh); border-color: var(--qt-xanh); color: #fff; }
.qt-nut-chinh:hover { background: var(--qt-xanh-dam); border-color: var(--qt-xanh-dam); color: #fff; }

/* Hanh dong pha huy (xoa...) - dung lai mau do cua .qt-thoat cho dong nhat, khong can vien do gay gat */
.qt-nut-nguy-hiem { color: #a8445a; }

/* Tai anh len (TaiAnhLen.tsx) - thay cho bat admin tu go duong dan file, xem chu thich dau component */
.qt-tai-anh { display: flex; flex-direction: column; gap: .4rem; }
.qt-tai-anh-hang { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qt-tai-anh-hang .qt-nut-nho { display: inline-flex; align-items: center; gap: .45rem; }

/* An input[type=file] that nhung VAN trong vung chon duoc (khong display:none) - de trinh doc man hinh va focus bang ban phim van toi duoc nut "Chon anh tu may" boc no */
.qt-tai-anh-input-an {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.qt-tai-anh-xoa {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: transparent;
    color: #a8445a;
    font-size: .82rem;
    cursor: pointer;
    padding: .3rem .4rem;
}
.qt-tai-anh-xoa:hover { text-decoration: underline; }

.qt-tai-anh-xoay { animation: qt-tai-anh-xoay 1s linear infinite; }
@keyframes qt-tai-anh-xoay { to { transform: rotate(360deg); } }
.qt-nut-nguy-hiem:hover:not(:disabled) { border-color: #a8445a; color: #8c2f2f; background: #fbeef1; }

/* Nut "Sua" tren danh sach - do, TACH RIENG mau voi nut Bat/Tat ben canh de khong lan y nghia */
.qt-nut-sua { color: #a8445a; border-color: #e3c3cb; }
.qt-nut-sua:hover:not(:disabled) { background: #fbeef1; border-color: #a8445a; color: #8c2f2f; }

/* Nut bat/tat nhanh - mau theo Y NGHIA hanh dong sap bam, xem BatTatMaGiamGia.tsx.
   Tat dung mau HO PHACH (khong phai do) vi do da danh cho nut Sua o tren -
   hai nut canh nhau cung mau do se gay nham lan ve y nghia. */
.qt-nut-tat { color: #8a5a00; border-color: #e8d4a8; }
.qt-nut-tat:hover:not(:disabled) { background: #fff4e0; border-color: #8a5a00; color: #6e4700; }

.qt-nut-bat { color: var(--qt-xanh-dam); border-color: var(--qt-vien); }
.qt-nut-bat:hover:not(:disabled) { background: var(--qt-nhan-nen); border-color: var(--qt-xanh); color: var(--qt-xanh-dam); }

/* ---------------------------- Trang dang nhap quan tri ---------------------------- */

.qtdn-khung {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qt-canh-nen);
    padding: 1.5rem;
}

.qtdn-hop { width: 100%; max-width: 22rem; }

.qtdn-dau { text-align: center; margin-bottom: 1.5rem; line-height: 1.3; }
.qtdn-dau strong { display: block; color: var(--qt-canh-chu); font-size: 1.15rem; letter-spacing: .02em; }
.qtdn-dau span   { color: rgba(241, 244, 237, .55); font-size: .85rem; }

.qtdn-the {
    background: var(--qt-the);
    border-radius: .6rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.qtdn-the label {
    font-size: .85rem;
    color: var(--qt-chu-mo);
    margin-bottom: .35rem;
}
.qtdn-the label + input { margin-bottom: 1rem; }

.qtdn-the input {
    border: 1px solid var(--qt-vien);
    border-radius: .4rem;
    padding: .55rem .7rem;
    font-size: .95rem;
}
.qtdn-the input:focus {
    outline: 2px solid var(--qt-xanh);
    outline-offset: 1px;
    border-color: transparent;
}

.qtdn-the button {
    margin-top: .5rem;
    border: none;
    border-radius: .4rem;
    background: var(--qt-xanh);
    color: #fff;
    padding: .6rem;
    font-size: .95rem;
    cursor: pointer;
}
.qtdn-the button:hover:not(:disabled) { background: var(--qt-xanh-dam); }
.qtdn-the button:disabled { background: #c8cfc0; cursor: default; }

.qtdn-loi {
    display: flex;
    gap: .5rem;
    background: #fbeaea;
    color: #8c2f2f;
    border-radius: .4rem;
    padding: .6rem .7rem;
    font-size: .85rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}

.qtdn-ve {
    display: block;
    text-align: center;
    margin-top: 1.1rem;
    color: rgba(255, 255, 255, .55);
    font-size: .85rem;
    text-decoration: none;
}
.qtdn-ve:hover { color: rgba(255, 255, 255, .85); }

/* ==========================================================================
   SOẠN NỘI DUNG SẢN PHẨM
   Danh sách sản phẩm bên trái, form soạn bên phải.
   ========================================================================== */

/* Câu dẫn dưới tiêu đề trang */
.qt-dan {
    max-width: 60ch;
    margin: -.5rem 0 1.25rem;
    font-size: .86rem;
    line-height: 1.6;
    color: var(--qt-chu-mo);
}

.snd {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* ---------------------------- Cot danh sach ---------------------------- */

.snd-cot {
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
    overflow: hidden;
    /*
     | Dính lại khi cuộn, và tự cao bằng màn hình.
     |
     | Danh sách 22 sản phẩm dài hơn một màn; không dính thì gõ tới cuối form
     | bên phải là mất hẳn danh sách, muốn đổi sản phẩm phải cuộn ngược lên.
     */
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
}

.snd-dem {
    margin: 0;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--qt-vien);
    font-size: .82rem;
    color: var(--qt-chu-mo);
}
.snd-dem strong { color: var(--qt-chu); font-variant-numeric: tabular-nums; }

.snd-ds { list-style: none; margin: 0; padding: 0; overflow-y: auto; }

.snd-muc {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--qt-vien);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s;
}
.snd-muc:hover { background: #f7f9f5; }
.snd-muc-chon { background: #eef4da; }
.snd-muc-chon .snd-ten strong { color: var(--qt-xanh-dam); }

/* Chấm trạng thái: xám = chưa có nội dung, xanh = đã có */
.snd-cham {
    width: .55rem;
    height: .55rem;
    flex-shrink: 0;
    margin-top: .35rem;
    border-radius: 50%;
    background: #cfd4cb;
}
.snd-cham-xong { background: var(--qt-xanh); }

.snd-ten { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.snd-ten strong { font-size: .84rem; font-weight: 500; line-height: 1.35; }
.snd-ten small { font-size: .72rem; color: var(--qt-chu-mo); }

/* ---------------------------- Form soạn ---------------------------- */

.snd-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.25rem;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
}

.snd-dau {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--qt-vien);
}
.snd-dau h2 { margin: 0 0 .2rem; font-size: 1.05rem; font-weight: 600; }
.snd-dau p { margin: 0; font-size: .78rem; color: var(--qt-chu-mo); }

.snd-anh {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--qt-vien);
}

.snd-o { display: flex; flex-direction: column; gap: .25rem; }
.snd-o > span { font-size: .84rem; font-weight: 600; }
.snd-o > small { font-size: .74rem; line-height: 1.5; color: var(--qt-chu-mo); }

.snd-o textarea,
.snd-o input {
    margin-top: .15rem;
    padding: .6rem .7rem;
    border: 1px solid var(--qt-vien);
    /* 10-12px theo yeu cau Forest Sage Botanical */
    border-radius: 10px;
    background: #fff;
    color: var(--qt-chu);
    font: inherit;
    font-size: .86rem;
    line-height: 1.6;
}
.snd-o textarea { resize: vertical; }
.snd-o textarea:focus-visible,
.snd-o input:focus-visible { outline: 2px solid var(--qt-xanh); outline-offset: 1px; border-color: var(--qt-xanh); }
/* O chi xem, khong sua duoc (vi du "Đã dùng" cua ma giam gia) */
.snd-o input:disabled { background: #f3f4f1; color: var(--qt-chu-mo); cursor: not-allowed; }

/* select dung chung kieu voi input/textarea cua .snd-o */
.qt-mgg-select {
    margin-top: .15rem;
    padding: .6rem .7rem;
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
    background: #fff;
    color: var(--qt-chu);
    font: inherit;
    font-size: .86rem;
}
.qt-mgg-select:focus-visible { outline: 2px solid var(--qt-xanh); outline-offset: 1px; border-color: var(--qt-xanh); }

.snd-chan {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-top: .3rem;
}

.snd-nut {
    padding: .6rem 1.6rem;
    border: 0;
    border-radius: 8px;
    background: var(--qt-xanh);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.snd-nut:hover:not(:disabled) { background: var(--qt-xanh-dam); }
/* Chưa sửa gì thì nút mờ đi — tránh bấm Lưu vô nghĩa hàng chục lần */
.snd-nut:disabled { background: #c3c8bf; cursor: not-allowed; }

.snd-xong { font-size: .84rem; color: var(--qt-xanh-dam); font-weight: 500; }
.snd-loi { font-size: .78rem; color: #b3261e; }

/* ---------------------------- Form ma giam gia ---------------------------- */

.qt-mgg-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
}
@media (max-width: 640px) { .qt-mgg-luoi { grid-template-columns: 1fr; } }

.qt-mgg-bat {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}

/* Tieu de nhom trong form - chia form dai thanh tung khoi de de doc (Thong tin
   ma / Cach giam & dieu kien / Thoi gian hieu luc), xem FormMaGiamGia.tsx */
.qt-mgg-nhom {
    grid-column: 1 / -1;
    margin: .5rem 0 -.25rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--qt-vien);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qt-xanh-dam);
}
.qt-mgg-luoi > .qt-mgg-nhom:first-child { margin-top: 0; }

/* ---------------------------- Danh gia / Binh luan ---------------------------- */

/* O chon sao trong thanh loc (page.tsx) - .qt-mgg-select von co radius+vien
   day du roi (dung duoc doc lap), chi can bo margin-top (danh cho ngu canh
   form co nhan phia tren) va them khoang cach voi o tim kien canh no */
.qt-dg-loc-sao { margin: 0 .5rem 0 0; padding: .42rem .7rem; }

/* Hang 5 sao trong bang danh sach - sao DA CHON mau xanh thuong hieu, sao con lai mau xam nhat */
.qt-dg-sao { white-space: nowrap; color: var(--qt-vien); font-size: .8rem; }
.qt-dg-sao .bi-star-fill { color: var(--qt-xanh); }

/* Cot "Trang thai" trong bang - xep CHONG trang thai Hien/An voi nhan "Nổi bật"
   (neu co), khong dung chung mot dong de khong qua rong */
.qt-dg-trang-thai-cot { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }

/* Nhan "Nổi bật" - mau ho phach giong cac nhan "dang bat/chu y" khac trong khu quan tri */
.qt-dg-noi-bat-nhan {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: #8a5a00;
}

/* ---------------------------- Danh muc (cay 2 cap) ---------------------------- */

/* Dong danh muc CON trong bang - thut vao de phan biet voi danh muc GOC (dam, khong thut) phia tren no */
.qt-danhmuc-con { padding-left: 2rem; color: var(--qt-chu-mo); }

/* ---------------------------- San pham (trang "Sản phẩm") ---------------------------- */

/* Nhan nho "Sapo" canh tieu de cot Giá/Tồn kho trong bang - bao cho biet CHI
   XEM, khong sua duoc tai day (gia/ton kho la Sapo ghi, xem page.tsx) */
.qt-sp-nhan-sapo {
    display: inline-block;
    margin-left: .3rem;
    padding: .05rem .4rem;
    border-radius: 1rem;
    background: #e6f0fb;
    color: #1f5691;
    font-size: .65rem;
    font-weight: 600;
    text-transform: none;
    vertical-align: middle;
}
.qt-sp-cot-sapo { color: var(--qt-chu-mo); }

/* Khoi nhac lai gia/ton kho/da ban hien tai o DAU form sua - CHI XEM, khong
   phai o nhap. Mau nen hoi khac (xanh duong nhat) de ro la mot khoi RIENG,
   tach bach voi cac truong ben duoi THAT SU sua duoc. */
.qt-sp-sapo-khoi {
    background: #f0f6fc;
    border: 1px solid #d7e6f5;
    border-radius: 8px;
    padding: .8rem .9rem;
    margin-bottom: .3rem;
}
.qt-sp-sapo-de {
    margin: 0 0 .5rem;
    font-size: .76rem;
    color: #1f5691;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.qt-sp-sapo-hang { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .84rem; color: var(--qt-chu); }
.qt-sp-sapo-hang strong { font-variant-numeric: tabular-nums; }

/* ---------------------------- Banner trang chu ---------------------------- */

/* Form banner CHINH - anh xem truoc ben trai, cac o nhap ben phai (khac FormBannerSlide
   dung .snd-o xep doc binh thuong, vi day la khoi RIENG o dau trang, co cho rong hon) */
.qt-banner-form-chinh { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
.qt-banner-form-o { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 1.1rem; }

.qt-banner-anh-xem {
    flex: 0 0 16rem;
    width: 16rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--qt-vien);
    border-radius: 8px;
    overflow: hidden;
    background: var(--qt-nen);
}
.qt-banner-anh-xem img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ban nho hon dung trong FormBannerSlide (khong can to bang banner chinh) */
.qt-banner-anh-xem-nho { width: 8rem; aspect-ratio: 1; }
/* Ban DOC dung cho banner sidebar trang san pham - ty le dung thay vi ngang */
.qt-banner-anh-xem-doc { width: 9rem; aspect-ratio: 3 / 4; flex: 0 0 9rem; }

.qt-banner-anh-cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 480px) { .qt-banner-anh-cap { grid-template-columns: 1fr; } }

/* O anh nho trong bang danh sach slide - button bao quanh anh, bam de sua giong het bam ten */
.qt-banner-thumb-nut { display: block; padding: 0; border-radius: 6px; overflow: hidden; }
.qt-banner-thumb-anh { width: 3.5rem; height: 3.5rem; object-fit: cover; display: block; }

/* ---------------------------- Banh xe chon ngay ---------------------------- */
/*
 | Kieu "bánh xe kéo" (nhu iOS) thay cho <input type="date"> mac dinh - moi
 | trinh duyet/he dieu hanh hien input date mot kieu khac nhau, khong hop
 | voi giao dien rieng cua khu quan tri. Xem BanhXeNgay.tsx.
 */

.qt-bx { display: flex; flex-direction: column; gap: .35rem; }

.qt-bx-dau { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.qt-bx-nhan { font-size: .84rem; font-weight: 600; }

.qt-bx-khong-gioi-han {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--qt-chu-mo);
    cursor: pointer;
    white-space: nowrap;
}

.qt-bx-goi-y { font-size: .74rem; line-height: 1.5; color: var(--qt-chu-mo); }

.qt-bx-banh-xe {
    position: relative;
    display: flex;
    gap: .25rem;
    height: 108px;
    padding: 0 .5rem;
    background: #fff;
    border: 1px solid var(--qt-vien);
    border-radius: 8px;
    /* Mo dan dong tren/duoi, giu dong giua (dang chon) net - 3 dong x 36px */
    mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 72px, transparent 108px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 72px, transparent 108px);
}

.qt-bx-cot {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    text-align: center;
}
.qt-bx-cot::-webkit-scrollbar { display: none; }

.qt-bx-dong {
    height: 36px;
    line-height: 36px;
    font-size: .86rem;
    color: var(--qt-chu-mo);
    scroll-snap-align: center;
    cursor: pointer;
    user-select: none;
}
.qt-bx-dong-chon { color: var(--qt-chu); font-weight: 700; font-size: .95rem; }

/* Vach ke dong giua (dang chon) - nam SAU cot ve DOM nhung z-index thap hon
   de chu cua cot van doc duoc tren no, khong bi che */
.qt-bx-vach {
    position: absolute;
    z-index: 0;
    left: .5rem;
    right: .5rem;
    top: 36px;
    height: 36px;
    background: #eef5e2;
    border-top: 1px solid var(--qt-xanh);
    border-bottom: 1px solid var(--qt-xanh);
    border-radius: 6px;
    pointer-events: none;
}

/* O co don vi (₫/%) ghim ben phai - doi theo kieu giam dang chon, xem FormMaGiamGia.tsx */
.qt-mgg-o-don-vi { position: relative; }
.qt-mgg-o-don-vi input { width: 100%; box-sizing: border-box; padding-right: 2.3rem; }
.qt-mgg-don-vi {
    position: absolute;
    top: 50%;
    right: .8rem;
    transform: translateY(-50%);
    color: var(--qt-chu-mo);
    font-size: .84rem;
    font-weight: 600;
    pointer-events: none;
}

@media (max-width: 900px) {
    .snd { grid-template-columns: 1fr; }
    /* Màn hẹp: danh sách thu ngắn lại, nhường chỗ cho form */
    .snd-cot { position: static; max-height: 18rem; }
}

/* ==========================================================================
   POPUP GIUA MAN HINH (them/sua mot ban ghi) - dung chung, khong rieng gi
   mot module. Ma giam gia la noi dau tien dung (ModalMaGiamGia.tsx).
   -------------------------------------------------------------------- */

.qt-modal-nen {
    position: fixed;
    inset: 0;
    background: rgba(35, 42, 32, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 200;
    animation: qt-modal-nen-vao .15s ease;
}

.qt-modal {
    background: var(--qt-nen);
    border-radius: 1rem;
    width: min(760px, 100%);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
    animation: qt-modal-vao .18s ease;
}

.qt-modal-dau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--qt-vien);
    position: sticky;
    top: 0;
    background: var(--qt-nen);
    border-radius: 1rem 1rem 0 0;
}
.qt-modal-dau h2 { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--qt-tieu-de); }

.qt-modal-dong {
    border: none;
    background: none;
    color: var(--qt-chu-mo);
    font-size: 1.05rem;
    line-height: 1;
    padding: .4rem;
    border-radius: .4rem;
    cursor: pointer;
}
.qt-modal-dong:hover { background: #eef1ea; color: var(--qt-chu); }

.qt-modal-than { padding: 1.5rem; }

.qt-modal-xoa {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--qt-vien);
}

@media (max-width: 640px) {
    .qt-modal-nen { padding: 0; align-items: flex-end; }
    .qt-modal { width: 100%; max-height: 92vh; border-radius: 1rem 1rem 0 0; }
}

@keyframes qt-modal-nen-vao {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes qt-modal-vao {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   TRANG DAU (/quan-tri) - THEME RIENG THEO ANH MAU "WoodForest Admin Dashboard"
   --------------------------------------------------------------------
   Nen rieng cho trang dau da bo - gio dung CHUNG nen xanh nhat cua
   .qt-noi-dung voi moi trang quan tri khac (xem --qt-nen o :root va chu
   thich tren .qt-noi-dung), dong bo toan khu thay vi moi trang mot mau.
   ========================================================================== */

.qtd-dashboard {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--qt-chu);
    font-size: 13px;
}

/* Khoi the sang dung chung - Topbar, Doanh thu, Top san pham, Don gan nhat, Thao tac nhanh.
   Doi tu nen rung/chu sang toi VE THEME SANG giong het cac trang quan tri khac
   (Don hang, Tin nhan...) theo mau WoodForest nguoi dung gui - chi con RIENG
   sidebar (.qt-canh) la giu van go toi, noi dung thi dong bo voi phan con lai.
   Kieu the chinh (nen, vien, bo goc, bong, quang sang goc) gio gop CHUNG voi
   .qt-khoi cua cac trang quan tri khac - xem muc "Khoi va bang" o tren. O day
   chi con lai phan RIENG cua dashboard: co chu h2 to hon mot chut. */
.qtd-khoi h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--qt-tieu-de);
}
.qtd-khoi-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.qtd-khoi-dau h2 { margin: 0; }
.qtd-khoi-dau a { color: var(--qt-xanh); text-decoration: none; font-size: 13px; white-space: nowrap; }
.qtd-khoi-dau a:hover { color: var(--qt-xanh-dam); }
.qtd-khoi-phu { margin: .2rem 0 0; font-size: 11px; color: var(--qt-chu-mo); }

/*
 | Khung icon tron/vuong bo goc dung chung - canh h2 (.qtd-tieu-de-icon), o
 | "trong" (.qtd-trong-icon), avatar don (.qtd-don-avatar)... Hai kieu: dam
 | (gradient xanh, chu trang - nhan manh) va nhat (nen nhat, chu xanh - phu).
 */
.qtd-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 16px;
    background: linear-gradient(145deg, var(--qt-xanh) 0%, var(--qt-xanh-dam) 100%);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(74, 125, 55, .6);
}
.qtd-icon-badge-nhat {
    background: linear-gradient(145deg, var(--qt-the) 0%, var(--qt-the-2) 100%);
    border: 1px solid var(--qt-vien);
    color: var(--qt-xanh-dam);
    box-shadow: 0 1px 2px rgba(31, 51, 36, .06);
}

/* Cham tron nho co dau "i" o goc tren-phai mot khoi - giai thich them, dat trong
   .qt-khoi/.qtd-khoi (da co position:relative san) */
.qtd-info-goc {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--qt-nen);
    border: 1px solid var(--qt-vien);
    color: var(--qt-chu-mo);
    font-size: 11px;
    cursor: help;
}

.qtd-tieu-de-icon { display: flex; align-items: center; gap: .85rem; }
.qtd-tieu-de-icon h2 { margin: 0; }
/* Dung trong the can giua (vd Tien do xu ly don) - icon + h2 nam canh nhau, ca cum can giua */
.qtd-tieu-de-icon-giua { justify-content: center; margin-bottom: .3rem; }

.qtd-trong {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--qt-chu-mo);
    margin: 0;
    padding: 1rem 1.1rem;
    font-size: 13px;
    background: var(--qt-nen);
    border: 1px dashed var(--qt-vien);
    border-radius: .85rem;
}
/* Khoi trong nhung la TIN VUI (vd "Việc cần xử lý" rong = khong con gi can lam) - chu to hon mot chut, khong phai dang canh bao nen nen dam hon mot chut */
.qtd-trong-mung {
    padding: 1.4rem 1.2rem;
    font-size: 14px;
    color: var(--qt-chu);
    background: linear-gradient(165deg, var(--qt-the-2) 0%, var(--qt-nen) 100%);
    border-style: solid;
}
.qtd-trong-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 20px;
    background: radial-gradient(circle at 35% 30%, var(--qt-the) 0%, var(--qt-the-2) 100%);
    border: 1px solid var(--qt-vien);
    color: var(--qt-xanh);
}
.qtd-mo { color: var(--qt-chu-mo); }

/* Bien the ".qtd-trong" co vet song trang tri ben phai (vd "Chưa có đơn nào trong tháng") */
.qtd-trong-song { padding: 1.1rem 1.3rem; }
.qtd-trong-chu { flex-shrink: 0; }
.qtd-song-trang-tri { flex: 1 1 auto; min-width: 40px; height: 32px; }

/*
 | Bien the ".qtd-trong-icon" co VONG NET DUT quay quanh (nhu dang "xoay nhe")
 | + hai tia lap lanh nho o hai goc - dung cho "Việc cần xử lý" rong (tin vui).
 | Vong net dut ve bang ::before (border-radius tron, border-style dashed),
 | KHONG phai anh.
 */
.qtd-trong-icon-vong {
    position: relative;
    width: 52px;
    height: 52px;
    font-size: 22px;
}
.qtd-trong-icon-vong::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1.5px dashed var(--qt-vien);
}
.qtd-lap-lanh {
    position: absolute;
    font-size: 11px;
    color: var(--qt-xanh);
    opacity: .85;
}
.qtd-lap-lanh-1 { top: -10px; right: -8px; }
.qtd-lap-lanh-2 { bottom: -6px; left: -12px; font-size: 9px; opacity: .6; }

/* ---------------------------- Topbar (dung chung MOI trang) ---------------------------- */
/*
 | Khac voi .qtd-khoi (chi dung o Dashboard), .qt-tb nam trong layout.tsx nen
 | co mat o moi trang quan tri - "noi" TREN NOI DUNG dang cuon ben duoi (xem
 | position:sticky), vi vay can NEN TRONG MO + backdrop-filter (yeu cau "nền
 | trắng trong") thay vi nen dac nhu .qtd-khoi, de con thay lo mo chu/bang
 | truot qua phia sau khi cuon trang. Nen (--qt-tb-nen) dua tren --qt-vo-nen
 | (dam hon --qt-nen cua trang view mot bac) - de topbar noi bat ro rang hon
 | la hoa lan vao trang view trang ben duoi.
 |
 | top: 1.25rem (khong phai 0) - KHOP voi .qt-canh (sidebar) cung sticky o
 | top:1.25rem, nhin nhu hai thu cung "noi" dung mot muc khi cuon, khong lech
 | nhau. Dung 0 se khien topbar truot qua het phan dem xanh cua .qt-khung lan
 | len sat canh tren trinh duyet, mat doi xung voi sidebar.
 */
.qt-tb {
    position: sticky;
    top: 1.25rem;
    z-index: 30;
    background: var(--qt-tb-nen);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0;
    border-bottom: 1px solid var(--qt-vien);
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
/*
 | >=1024px: keo thanh nay DINH SAT MEP TREN/HAI BEN cua .qt-noi-dung ngay tu
 | luc CHUA cuon - am dung BANG padding cua .qt-noi-dung (1.75rem tren, 2rem
 | hai ben, xem .qt-noi-dung) nen vien ngoai cua topbar khop THANG voi vien
 | trang view, khong con khe ho nao lo nen xanh cua .qt-khung ra giua.
 |
 | top:1.25rem (padding cua .qt-khung) TRUNG DUNG voi vi tri "da dinh" nay, nen
 | sticky kich hoat ma KHONG co cu giat/nhay nao luc bat dau cuon - vi tri luc
 | dung yen va luc "dinh" la MOT.
 |
 | CHI ap dung tu 1024px: duoi nguong nay .qt-noi-dung doi hang padding/bo goc
 | rieng cho drawer dien thoai (xem media query @max-width:1023px cuoi file) -
 | ghep am o day theo gia tri desktop se bi lech, nen de nguyen kieu cu (nam
 | trong luong, khong dinh mep) o man hep.
 */
@media (min-width: 1024px) {
    .qt-tb {
        margin: -1.75rem -2rem 20px;
        border-radius: 1rem 1rem 0 0;
        padding: 14px 2rem;
    }
}

.qt-tb-tim {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 999px;
    padding: 9px 16px;
    min-width: 0;
    flex: 1 1 200px;
    max-width: 320px;
    box-shadow: 0 1px 2px rgba(31, 51, 36, .05);
}
.qt-tb-tim i { color: var(--qt-chu-mo); font-size: 13px; flex-shrink: 0; }
.qt-tb-tim input {
    border: 0;
    background: none;
    color: var(--qt-chu);
    font-size: 12px;
    outline: none;
    width: 100%;
    min-width: 0;
}
.qt-tb-tim input::placeholder { color: var(--qt-chu-mo); }

/*
 | Hop goi y - "noi" NGAY DUOI o tim kiem (position:absolute, cha .qt-tb-tim
 | da co position:relative). Rong bang DUNG o tim kiem (left:0; right:0), khong
 | tran ra het be rong topbar.
 */
.qt-tb-goi-y {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(43, 47, 42, .12);
    padding: 6px;
    max-height: 340px;
    overflow-y: auto;
    z-index: 5;
}
.qt-tb-goi-y-trong { margin: 0; padding: .6rem .5rem; font-size: 12px; color: var(--qt-chu-mo); }

.qt-tb-goi-y-nhom + .qt-tb-goi-y-nhom { border-top: 1px solid var(--qt-vien); margin-top: 4px; padding-top: 4px; }
.qt-tb-goi-y-de {
    display: block;
    padding: .3rem .5rem .15rem;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--qt-chu-mo);
}

.qt-tb-goi-y-dong {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .45rem .5rem;
    border-radius: 7px;
    text-decoration: none;
    color: var(--qt-chu);
    font-size: 12.5px;
}
.qt-tb-goi-y-dong:hover { background: var(--qt-nen); }
.qt-tb-goi-y-dong i { color: var(--qt-chu-mo); font-size: 13px; flex-shrink: 0; }
.qt-tb-goi-y-don-chu { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qt-tb-goi-y-don-chu strong { font-size: 12.5px; }
.qt-tb-goi-y-don-chu span { font-size: 11px; color: var(--qt-chu-mo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-tb-goi-y-dong .qt-trang-thai { flex-shrink: 0; font-size: 10px; padding: .15rem .5rem; }

.qt-tb-phai { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

/* Chi hien ngay hom nay cho tien theo doi - KHONG phai bo loc that (backend
   chua co loc don theo khoang ngay), nen khong lam no trong giong mot nut bam */
.qt-tb-lich {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--qt-chu-mo);
    white-space: nowrap;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 999px;
    padding: 7px 14px;
    box-shadow: 0 1px 2px rgba(31, 51, 36, .05);
}
@media (max-width: 1100px) { .qt-tb-lich { display: none; } }

.qt-tb-theme {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    color: var(--qt-chu-mo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(31, 51, 36, .05);
}
.qt-tb-theme:hover { border-color: var(--qt-xanh); color: var(--qt-chu); }

/* Nut "Ẩn số tiền" - che so tien bang cham tron, cho chu shop khong lo lo doanh
   thu khi chia se man hinh hoac co nguoi dung xem qua vai. Trang thai nho qua
   localStorage, xem NoiDungTongQuan.tsx. */
.qtd-an-tien {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--qt-vien);
    background: var(--qt-the);
    color: var(--qt-chu-mo);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.qtd-an-tien:hover { border-color: var(--qt-xanh); color: var(--qt-chu); }
/* Dang BAT (dang che so) - mau ho phach, cung tong mau voi nut "Tắt" o khu ma giam gia: bao hieu "co gi do dang tat/an" */
.qtd-an-tien-dang-bat { background: #fff4e0; border-color: #e8d4a8; color: #8a5a00; }
.qtd-an-tien-dang-bat:hover { border-color: #8a5a00; color: #6e4700; }
@media (max-width: 1100px) {
    .qtd-an-tien span { display: none; }
    .qtd-an-tien { width: 32px; padding: 0; justify-content: center; }
}

/* ---------------------------- Bo loc Tháng/Năm (BoLocKy.tsx) ---------------------------- */
/* Nut cung kieu voi .qtd-an-tien canh no (cung pill, cung chieu cao) cho dong bo hang nut dau trang */

.qt-bl-ky { position: relative; flex-shrink: 0; }

.qt-bl-ky-nut {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--qt-vien);
    background: var(--qt-the);
    color: var(--qt-chu);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.qt-bl-ky-nut:hover { border-color: var(--qt-xanh); }
.qt-bl-ky-nut i:last-child { font-size: 10px; color: var(--qt-chu-mo); }

.qt-bl-ky-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(43, 47, 42, .14);
    padding: 12px;
}

/* .qt-bx-banh-xe (dung chung voi BanhXeNgay.tsx) chia deu theo so cot - chi
   2 cot (Tháng/Năm) thay vi 3 nen rong hon moi cot de "Cả năm" khong bi cat */
.qt-bl-ky-banh-xe { width: 180px; }

.qt-bl-ky-goi-y { margin: 8px 0 0; font-size: 11px; color: var(--qt-chu-mo); text-align: center; white-space: nowrap; }

/*
 | "Ẩn số tiền" - LAM MO con so that (khong phai thay bang dau cham tron) -
 | con so van nam nguyen trong DOM (dung dinh dang that, giu dung do dai/hinh
 | dang chu), chi bi mo di bang filter:blur nen khong doc duoc tu xa/qua man
 | hinh chia se. Chon mo thay vi thay chu "••••••" vi hinh dang van giu dung
 | - nhin "tu nhien" hon la mot chuoi dau cham co dinh thay cho moi con so.
 */
.qtd-an-blur {
    filter: blur(6px);
    user-select: none;
    transition: filter .15s;
}

.qt-tb-chuong {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--qt-chu);
    text-decoration: none;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(31, 51, 36, .05);
}
.qt-tb-cham-do {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c0392b;
    border: 1.5px solid var(--qt-the);
}

.qt-tb-ho-so { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qt-tb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--qt-xanh);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.qt-tb-ten { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--qt-chu); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .qt-tb-ten { display: none; } }

/* ---------------------------- Loi chao ---------------------------- */

.qtd-loi-chao { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.qtd-loi-chao h1 { margin: 0 0 5px; font-size: 26px; font-weight: 700; color: var(--qt-chu); }
.qtd-loi-chao p { margin: 0; font-size: 13px; color: var(--qt-chu-mo); }
.qtd-thong-bao {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--qt-xanh-dam);
    background: var(--qt-nhan-nen);
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.qtd-cham-xanh { width: 6px; height: 6px; border-radius: 50%; background: var(--qt-xanh); flex-shrink: 0; }

/* ---------------------------- KPI ---------------------------- */

.qtd-kpi-luoi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 1279px) {
    .qtd-kpi-luoi { grid-template-columns: repeat(2, 1fr); }
}

/* 4 the KPI chinh tren cung (dung bo cuc voi anh mau: nhan+icon tren dinh,
   so to, % thay doi canh so, chu thich so sanh duoi cung) - rieng voi
   .qtd-kpi-luoi (3 cot) dung o noi khac */
.qtd-kpi-luoi-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 1279px) { .qtd-kpi-luoi-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .qtd-kpi-luoi-4 { grid-template-columns: 1fr; } }

.qtd-kpi-o {
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(43, 47, 42, .04), 0 6px 16px rgba(43, 47, 42, .05);
    padding: 16px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s;
}
/* CHI doi mau vien - bo hieu ung nhoc len (transform: translateY) cua ban
   truoc, day la cho cuoi cung trong file con hieu ung hover gay cam giac
   "phong to" nhu kinh lup ma chu shop phan anh */
a.qtd-kpi-o:hover { border-color: var(--qt-xanh); }

.qtd-kpi-dau { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.qtd-kpi-dau .qtd-kpi-nhan { margin: 0; font-size: 13px; color: var(--qt-chu-mo); font-weight: 500; }

.qtd-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
/* Vong tron mau xoay vong 6 mau nhat - lay lai dung bo mau trang thai don
   (vang/xanh-duong/do) + sage/nau cua thuong hieu, khong bia mau moi */
.qtd-kpi-o:nth-child(6n+1) .qtd-kpi-icon { background: var(--qt-nhan-nen); color: var(--qt-xanh-dam); }
.qtd-kpi-o:nth-child(6n+2) .qtd-kpi-icon { background: #e6f0fb; color: #1f5691; }
.qtd-kpi-o:nth-child(6n+3) .qtd-kpi-icon { background: #fff4e0; color: #8a5a00; }
.qtd-kpi-o:nth-child(6n+4) .qtd-kpi-icon { background: #f3ece2; color: #8a6841; }
.qtd-kpi-o:nth-child(6n+5) .qtd-kpi-icon { background: #e9ecfb; color: #3b3f96; }
.qtd-kpi-o:nth-child(6n+6) .qtd-kpi-icon { background: #f6e7e7; color: #8c2f2f; }

.qtd-kpi-gia { margin: 0; font-size: 22px; font-weight: 700; color: var(--qt-chu); }
.qtd-kpi-phu { margin: -6px 0 0; font-size: 11px; color: var(--qt-chu-mo); }

/* % thay doi so voi thang truoc - CHI hien khi tinh duoc that (xem tinhDelta() trong NoiDungTongQuan.tsx) */
.qtd-kpi-gia-hang { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.qtd-kpi-gia-hang .qtd-kpi-gia { margin: 0; }
.qtd-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
/* Tang = tin tot (doanh thu/don hang nhieu hon), giam = can chu y - khac voi bieu do luong khong mang nghia tot/xau co dinh */
.qtd-kpi-delta-len   { background: var(--qt-nhan-nen); color: var(--qt-xanh-dam); }
.qtd-kpi-delta-xuong { background: #f6e7e7; color: #8c2f2f; }

/* ---------------------------- Analytics: doanh thu + top san pham ---------------------------- */

.qtd-analytics { display: flex; align-items: stretch; gap: 16px; }
.qtd-doanh-thu { flex: 1 1 0; min-width: 0; }
.qtd-top-sp { width: 350px; flex-shrink: 0; }
@media (max-width: 1023px) {
    .qtd-analytics { flex-direction: column; }
    .qtd-top-sp { width: 100%; }
}

/* Luoi hai cot chinh cua dashboard: trai RONG (bieu do doanh thu + co cau thanh
   toan xep chong), phai HEP (san pham ban chay + tien do xu ly xep chong) -
   dung bo cuc voi anh mau dashboard nguoi dung gui. */
.qtd-analytics-2cot { display: flex; align-items: flex-start; gap: 16px; }
.qtd-cot-trai { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.qtd-cot-phai { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1023px) {
    .qtd-analytics-2cot { flex-direction: column; }
    .qtd-cot-phai { width: 100%; }
}

/* Chu thich nam nay/nam truoc o goc bieu do BieuDoNamSoSanh - net lien xanh = nam nay, net dut xam = nam truoc */
.qtd-chu-thich-nam { display: flex; gap: 14px; font-size: 11px; color: var(--qt-chu-mo); flex-shrink: 0; }
.qtd-chu-thich-nam span { display: flex; align-items: center; gap: 5px; }
.qtd-chu-thich-nam i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }
.qtd-chu-thich-nam-nay i { background: var(--qt-xanh); }
.qtd-chu-thich-nam-truoc i { background: #8a93a6; border-top: 2px dashed #8a93a6; height: 0; }

.qtd-chenh-len   { color: var(--qt-xanh-dam); font-weight: 600; }
.qtd-chenh-xuong { color: #8c2f2f; font-weight: 600; }

/* Bieu do doanh thu dang duong/vung mo (SVG ve tay trong BieuDoNamSoSanh.tsx,
   khong dung thu vien ngoai) - giong "Quỹ lương lũy kế" trong anh mau */
.qtd-chart-wrap { padding-top: 8px; position: relative; }
.qtd-chart-svg { width: 100%; height: 190px; display: block; overflow: visible; cursor: crosshair; }
.qtd-chart-diem { fill: var(--qt-xanh); transition: r .1s; }
.qtd-chart-diem-hover { fill: var(--qt-xanh-dam); }
.qtd-bieu-do-nhan { display: flex; justify-content: space-between; margin-top: 4px; font-size: 10px; color: var(--qt-chu-mo); }

/* Truc Y (nhan gia tri dang "1,4 tỷ") - chu ve ngay trong SVG bang <text> */
.qtd-chart-truc-y { font-size: 9px; fill: var(--qt-chu-mo); }

/* Nhan thang canh theo diem du lieu (lech sang phai vi truc Y chiem cho ben trai) */
.qtd-bieu-do-nhan-co-truc { padding-left: 9%; }

/* O chu thich (tooltip) theo chuot tren bieu do - noi (vi tri %) do component tu tinh */
.qtd-chart-tooltip {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(43, 47, 42, .12);
    padding: 10px 12px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}
.qtd-chart-tooltip strong { display: block; margin-bottom: 5px; font-size: 12px; color: var(--qt-chu); }
.qtd-chart-tooltip-dong { display: flex; align-items: center; gap: 6px; color: var(--qt-chu-mo); margin-top: 3px; }
.qtd-chart-tooltip-dong .qtd-chu-thich-nam-nay i,
.qtd-chart-tooltip-dong .qtd-chu-thich-nam-truoc i { width: 10px; }

/* ---------------------------- Vong tron "Tiến độ xử lý đơn hàng" ---------------------------- */

.qtd-tien-do-don { text-align: center; }

.qtd-ring-wrap { position: relative; width: 150px; height: 150px; margin: 10px auto; }
/* Quang sang mo phia sau vong tron - trang tri, khong anh huong gia tri hien thi */
.qtd-ring-wrap::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--qt-glow) 0%, transparent 72%);
    z-index: -1;
}
.qtd-ring-svg { width: 100%; height: 100%; }
.qtd-ring-giua {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qtd-ring-giua strong { font-size: 26px; font-weight: 700; color: var(--qt-chu); }

.qtd-ring-chu-thich { margin: 0 0 14px; font-size: 12px; color: var(--qt-chu-mo); }

.qtd-ring-nut {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--qt-vien);
    color: var(--qt-chu);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.qtd-ring-nut:hover { border-color: var(--qt-xanh); color: var(--qt-xanh-dam); }

/* ---------------------------- Co cau "Đơn theo thanh toán" (dang segment canh nhau) ---------------------------- */

.qtd-co-cau-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }

.qtd-co-cau-cot { display: flex; flex-direction: column; gap: 4px; }
.qtd-co-cau-icon { font-size: 18px; margin-bottom: 2px; }
.qtd-co-cau-so { font-size: 22px; font-weight: 700; color: var(--qt-chu); line-height: 1.1; }
.qtd-co-cau-nhan { font-size: 12px; color: var(--qt-chu-mo); }
.qtd-co-cau-phantram { font-size: 11px; color: var(--qt-chu-mo); margin-bottom: 6px; }
.qtd-co-cau-vach { display: block; height: 4px; border-radius: 999px; }

/* ---------------------------- Cot "Sản phẩm bán chạy" theo DANH MUC ---------------------------- */
/*
 | Chi 3 cot CO DINH (ba danh muc goc) - khac voi ban truoc (moi san pham mot
 | cot, toi 10 cot hep dan): danh muc khong bao gio tran nen cot duoc rong
 | hon han, so + ten hien NGAY TREN/DUOI cot, khong can tooltip chi hien luc
 | re chuot nhu ban cu.
 */

.qtd-dm-wrap {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 150px;
    margin: 14px 0 10px;
    padding: 0 4px;
}
.qtd-dm-mot { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.qtd-dm-than { position: relative; flex: 1 1 0; width: 100%; display: flex; align-items: flex-end; }
.qtd-dm-cot {
    /* <button> (bam de chon danh muc) - reset lai cac mac dinh cua button */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border: 0;
    font: inherit;
    cursor: pointer;
    width: 100%;
    margin: 0 auto;
    border-radius: 8px 8px 0 0;
    background: #d8e4c6;
    min-height: 28px;
    padding-top: 6px;
    transition: height .25s ease, background-color .15s ease, box-shadow .15s ease;
}
/* Mau chu MAC DINH toi (nen cot mac dinh #d8e4c6 nhat, chu trang se chim mat) -
   doi sang trang CHI khi cot noi bat/dang chon/dang re (nen luc do dam hon han) */
.qtd-dm-so { font-size: 12px; font-weight: 700; color: var(--qt-xanh-dam); }
.qtd-dm-cot-noi-bat,
.qtd-dm-mot:hover .qtd-dm-cot {
    background: var(--qt-xanh);
}
.qtd-dm-cot-noi-bat .qtd-dm-so,
.qtd-dm-mot:hover .qtd-dm-so,
.qtd-dm-cot-chon .qtd-dm-so {
    color: #fff;
}
/* Dang CHON (da bam) - dam hon ca mau noi bat, them vien sang ben ngoai de
   nhan ra ngay du dang la cot noi bat hay khong (hai trang thai co the trung nhau) */
.qtd-dm-cot-chon { background: var(--qt-xanh-dam) !important; box-shadow: 0 0 0 2px var(--qt-the), 0 0 0 4px var(--qt-xanh-dam); }
.qtd-dm-nhan {
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--qt-chu-mo);
}
.qtd-dm-nhan-chon { color: var(--qt-xanh-dam); font-weight: 700; }

/* Nut "Bỏ lọc" - xem SanPhamTheoDanhMucBang.tsx */
.qtd-bo-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--qt-vien);
    background: var(--qt-the);
    color: var(--qt-chu-mo);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.qtd-bo-loc:hover { border-color: #c0392b; color: #c0392b; }

/*
 | Cot "so don theo kenh" (Shopee/Lazada/TikTok/Web) trong SanPhamTheoDanhMucBang.tsx -
 | CAN GIUA chu khong phai qt-phai (can PHAI nhu cot tien) - so o day chi 1-3
 | chu so, can phai duoi mot chu tieu de dai ("Shopee", "TikTok") tao khoang
 | trong lon ben trai so, mat de nhin lai tuong so do thuoc ve COT KE BEN
 | TRAI. Can giua + vien doc ngan cach moi cot (border-left) moi het nham.
 */
/* .qt-bang th{text-align:left} co specificity cao hon (class+the) mot class
   suong - phai viet ro ".qt-bang th.qtd-kenh-cot" moi thang duoc, khong thi
   RIENG header van bi keo ve trai trong khi du lieu dung giua (da gap thuc
   te luc kiem tra) */
.qt-bang th.qtd-kenh-cot,
.qtd-kenh-cot {
    text-align: center;
    border-left: 1px solid var(--qt-vien);
    font-variant-numeric: tabular-nums;
}

.qtd-cot-dung-cao-nhat { margin: 0; font-size: 11px; color: var(--qt-chu-mo); padding-top: 10px; border-top: 1px solid var(--qt-vien); }
.qtd-cot-dung-cao-nhat strong { color: var(--qt-chu); }

.qtd-sp-hang + .qtd-sp-hang { margin-top: 16px; }
.qtd-sp-dong { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 7px; }
.qtd-sp-dong p { margin: 0; font-size: 13px; color: var(--qt-chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtd-sp-dong span { font-size: 11px; color: var(--qt-chu-mo); white-space: nowrap; flex-shrink: 0; }
.qtd-sp-track { height: 6px; background: var(--qt-nen); border-radius: 999px; overflow: hidden; }
.qtd-sp-tien-trinh { height: 100%; border-radius: 999px; transition: width .25s ease; }
/* Moi hang mot mau, xoay vong cung bo mau voi icon KPI o tren cho dong bo */
.qtd-sp-hang:nth-child(5n+1) .qtd-sp-tien-trinh { background: var(--qt-xanh); }
.qtd-sp-hang:nth-child(5n+2) .qtd-sp-tien-trinh { background: #4a90d9; }
.qtd-sp-hang:nth-child(5n+3) .qtd-sp-tien-trinh { background: #d6a33f; }
.qtd-sp-hang:nth-child(5n+4) .qtd-sp-tien-trinh { background: #a67c52; }
.qtd-sp-hang:nth-child(5n+5) .qtd-sp-tien-trinh { background: #6a6fc7; }

/* ---------------------------- Tinh trang van hanh ---------------------------- */

.qtd-van-hanh { display: flex; gap: 12px; flex-wrap: wrap; }
.qtd-vh-the {
    flex: 1 1 190px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(43, 47, 42, .04), 0 6px 16px rgba(43, 47, 42, .05);
    padding: 14px;
}
.qtd-vh-cham { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.qtd-vh-xanh-la  { background: #3f9142; }
.qtd-vh-vang     { background: #c9971f; }
.qtd-vh-do       { background: #c0392b; }
.qtd-vh-xanh-duong { background: #2f6fa8; }
.qtd-vh-the strong { display: block; font-size: 13px; font-weight: 600; color: var(--qt-chu); }
.qtd-vh-the p { margin: 3px 0 0; font-size: 11px; color: var(--qt-chu-mo); }
/* Mot so the la <Link> (bam duoc) thay vi <div> thuong - bo mac dinh cua lien ket, them hieu ung hover nhe */
a.qtd-vh-the { color: inherit; text-decoration: none; transition: border-color .15s; }
a.qtd-vh-the-bam:hover { border-color: var(--qt-xanh); }
/*
 | Duoi 1024 (768 va 390): xep chong tung dong day du chieu rong, dung nhu
 | Figma. PHAI dat lai flex-basis ve auto: o container flex-direction:column,
 | "flex: 1 1 190px" bien 190px thanh CHIEU CAO toi thieu (truc chinh doi
 | huong), khien moi the cao vong 200px thay vi vua khit noi dung.
 */
@media (max-width: 1023px) {
    .qtd-van-hanh { flex-direction: column; }
    .qtd-vh-the { flex: 0 0 auto; width: 100%; }
}

/* ---------------------------- Don hang gan nhat ---------------------------- */
/* Danh sach dong (khong con la bang) - dung MOT bo cuc cho moi be rong thay vi
   ban bang/the rieng nhu truoc, gan voi "Recent Orders" trong anh mau. */

.qtd-don-ds { display: flex; flex-direction: column; }

.qtd-don-dong {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--qt-vien);
    text-decoration: none;
    color: inherit;
}
.qtd-don-ds > a:first-child { border-top: none; }
.qtd-don-dong:hover .qtd-don-info strong { color: var(--qt-xanh-dam); }

.qtd-don-avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: radial-gradient(circle at 35% 30%, var(--qt-the) 0%, var(--qt-the-2) 100%);
    border: 1px solid var(--qt-vien);
    color: var(--qt-xanh-dam);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px -2px rgba(31, 51, 36, .14);
}

.qtd-don-info { flex: 1 1 0; min-width: 0; }
.qtd-don-info strong { display: block; font-size: 13px; color: var(--qt-chu); font-weight: 600; }
.qtd-don-info span { display: block; font-size: 11px; color: var(--qt-chu-mo); margin-top: 1px; }

.qtd-don-phai { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.qtd-don-phai strong { font-size: 13px; color: var(--qt-chu); font-weight: 600; }

/* ---------------------------- Bang "Đơn hàng gần đây" day du cot ---------------------------- */
/* Dung kieu trinh bay voi "Bảng lương tháng..." trong anh mau - tim + loc
   trang thai ngay tren dau bang, bam ca dong de xem chi tiet. */

.qtd-bang-don-loc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0;
}

.qtd-bang-don-tim {
    flex: 1 1 240px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--qt-vien);
    border-radius: 8px;
    padding: 0 12px;
    background: var(--qt-nen);
}
.qtd-bang-don-tim i { color: var(--qt-chu-mo); font-size: 13px; flex-shrink: 0; }
.qtd-bang-don-tim input {
    border: 0;
    background: none;
    padding: .55rem 0;
    font-size: 13px;
    color: var(--qt-chu);
    width: 100%;
    outline: none;
}

.qtd-bang-don-select {
    border: 1px solid var(--qt-vien);
    border-radius: 8px;
    padding: .55rem .7rem;
    font-size: 13px;
    background: var(--qt-nen);
    color: var(--qt-chu);
    flex-shrink: 0;
}

.qtd-bang-don-dong { cursor: pointer; transition: background-color .1s ease; }
.qtd-bang-don-dong:hover { background: var(--qt-nen); }
.qtd-bang-don-dong td { vertical-align: middle; }

.qtd-bang-don-khach { display: flex; align-items: center; gap: 10px; }
.qtd-bang-don-khach strong { display: block; font-size: 13px; color: var(--qt-chu); font-weight: 600; }
.qtd-bang-don-khach span { display: block; font-size: 11px; color: var(--qt-chu-mo); margin-top: 1px; }

/* ---------------------------- Thao tac nhanh ---------------------------- */
/* Luoi nut co icon tron o tren, chu o duoi - thay cho hang nut vien bau duc
   truoc day, giong "Quick Actions" trong anh mau. */

.qtd-thao-tac-ds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.qtd-tt-nut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 12px;
    border: 1px solid var(--qt-vien);
    background: var(--qt-the);
    color: var(--qt-chu);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.qtd-tt-nut:hover { border-color: var(--qt-xanh); background: var(--qt-nhan-nen); }
.qtd-tt-nut i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--qt-nhan-nen);
    color: var(--qt-xanh-dam);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.qtd-tt-chinh { border-color: var(--qt-xanh); }
.qtd-tt-chinh i { background: var(--qt-xanh); color: #fff; }

/* ---------------------------- Hoat dong gan day ---------------------------- */
/* Gop tu don hang + tin nhan CHUA DOC that (khong bia du lieu) - xem page.tsx */

.qtd-hd-dong {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--qt-vien);
    text-decoration: none;
    color: inherit;
}
.qtd-hd-ds > a:first-child,
.qtd-hd-ds > div:first-child { border-top: none; }
.qtd-hd-dong:hover .qtd-hd-noidung strong { color: var(--qt-xanh-dam); }

.qtd-hd-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: radial-gradient(circle at 35% 30%, var(--qt-the) 0%, var(--qt-the-2) 100%);
    border: 1px solid var(--qt-vien);
    color: var(--qt-xanh-dam);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}
.qtd-hd-noidung { flex: 1 1 0; min-width: 0; }
.qtd-hd-noidung strong { display: block; font-size: 12.5px; color: var(--qt-chu); font-weight: 600; }
.qtd-hd-noidung span { display: block; font-size: 11.5px; color: var(--qt-chu-mo); margin-top: 1px; }
.qtd-hd-thoigian { font-size: 10.5px; color: var(--qt-chu-mo); white-space: nowrap; flex-shrink: 0; margin-top: 2px; }

/* ---------------------------- Chat nhanh ---------------------------- */

.qt-chat-khung {
    display: flex;
    gap: 1rem;
    height: calc(100vh - 9.5rem);
    min-height: 26rem;
}

/* Cot trai: danh sach hoi thoai */
.qt-chat-ds {
    width: 17.5rem;
    flex-shrink: 0;
    overflow-y: auto;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: .6rem;
}

.qt-chat-ds-muc {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--qt-vien);
    padding: .75rem .9rem;
    cursor: pointer;
}
.qt-chat-ds-muc:hover { background: var(--qt-nen); }
.qt-chat-ds-chon { background: var(--qt-nhan-nen); }

.qt-chat-ds-dau { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.qt-chat-ds-dau span { font-weight: 600; font-size: .9rem; }

.qt-chat-ds-muc p {
    margin: 0 0 .25rem;
    font-size: .82rem;
    color: var(--qt-chu-mo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qt-chat-ds-muc time { font-size: .74rem; color: var(--qt-chu-mo); }

/* Cot phai: hoi thoai dang mo */
.qt-chat-thread {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: .6rem;
    overflow: hidden;
    min-width: 0;
}
.qt-chat-thread > .qt-trong { padding: 1.25rem; }

.qt-chat-than {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.qt-chat-bong {
    max-width: 70%;
    margin: 0;
    padding: .55rem .85rem;
    border-radius: .8rem;
    font-size: .88rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.qt-chat-bong-khach {
    align-self: flex-start;
    background: var(--qt-nen);
    color: var(--qt-chu);
    border-bottom-left-radius: .2rem;
}
.qt-chat-bong-admin {
    align-self: flex-end;
    background: var(--qt-xanh);
    color: #fff;
    border-bottom-right-radius: .2rem;
}

.qt-chat-nhap {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--qt-vien);
}
.qt-chat-nhap textarea {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--qt-vien);
    border-radius: .5rem;
    padding: .5rem .7rem;
    font: inherit;
    font-size: .88rem;
    color: var(--qt-chu);
}
.qt-chat-nhap textarea:focus-visible { outline: none; border-color: var(--qt-xanh); }

@media (max-width: 991.98px) {
    .qt-chat-khung { flex-direction: column; height: auto; }
    .qt-chat-ds { width: 100%; max-height: 14rem; }
    .qt-chat-thread { height: 28rem; }
}

/* ---------------------------- Dang tai (loading.tsx) ---------------------------- */

.qt-tai { display: flex; align-items: center; justify-content: center; min-height: 16rem; }
.qt-tai-vong {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 3px solid var(--qt-vien);
    border-top-color: var(--qt-xanh);
    animation: qt-quay .7s linear infinite;
}
@keyframes qt-quay { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .qt-tai-vong { animation-duration: 1.6s; }
}

/* ---------------------------- Phi giao hang ---------------------------- */
/* Moi vung mot cot trong luoi hai cot cua form ma giam gia (.qt-mgg-luoi) */
.qt-pgh-vung { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.qt-pgh-vung .qt-mgg-nhom { margin-top: 0; }
.qt-pgh-goi-y { margin: -.6rem 0 0; font-size: .8rem; color: var(--qt-chu-mo); }
.qt-pgh-ok { font-size: .85rem; color: var(--qt-xanh); font-weight: 600; }

/* ---------------------------- Thong bao he thong (toast) ---------------------------- */
/* ThongBaoQuanTri.tsx - hien goc duoi-phai man hinh, tren CA sidebar/topbar (z-index cao hon .qt-canh) */
.qt-tbq-khu {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 500;
    display: flex;
    flex-direction: column-reverse;
    gap: .6rem;
    max-width: min(360px, calc(100vw - 2.5rem));
}

.qt-tbq-the {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
    background: var(--qt-the);
    border: 1px solid var(--qt-vien);
    border-radius: .85rem;
    box-shadow: 0 12px 28px rgba(32, 53, 43, .18);
    animation: qt-tbq-vao .25s cubic-bezier(.16, 1, .3, 1);
}
.qt-tbq-the i.bi-bell-fill { color: var(--qt-xanh); font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }

.qt-tbq-noi-dung { flex: 1 1 auto; font-size: .86rem; color: var(--qt-chu); line-height: 1.45; }
.qt-tbq-noi-dung a { color: var(--qt-tieu-de); font-weight: 600; text-decoration: none; }
.qt-tbq-noi-dung a:hover { text-decoration: underline; }

.qt-tbq-dong {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: var(--qt-chu-mo);
    font-size: .8rem;
    cursor: pointer;
    padding: .2rem;
    border-radius: .3rem;
}
.qt-tbq-dong:hover { background: var(--qt-nen); color: var(--qt-chu); }

@keyframes qt-tbq-vao {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .qt-tbq-the { animation: none; }
}