/* GD3 - he mau hoc theo mkt-meta.feelex.vn (do chinh user chi sang lam mau,
   12/09). Khong thu vien, khong build step, khong CDN -- chi lay lai GIA TRI
   mau/bo goc/do do bong, khong keo Tailwind ve.

   Do duoc tu trang do:
     nen trang   #f8fafc   the/khoi  #ffffff   vien  #e2e8f0 (o nhap #cbd5e1)
     chu         #0f172a   chu phu   #64748b
     xanh chinh  #1e3ff0   nen xanh nhat #eef4ff   chu tren nen xanh #182fdc
     bo goc      khoi/the 12px, nut & o nhap 8px
     do bong khoi 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1)
     sidebar     NEN TRANG, chi mot duong ke phai -- khong do bong, khong to nen

   Giu nguyen TEN token kieu MD3 de khong phai sua lai tung quy tac bo cuc;
   chi doi GIA TRI. Che do toi dinh nghia LAI token, khong viet lai bo cuc. */

:root {
  --md-primary:          #1e3ff0;
  --md-on-primary:       #ffffff;
  --md-primary-container:#eef4ff;
  --md-on-primary-container:#182fdc;
  /* Nen TRANG (khac --md-surface): trang mau dat the trang tren nen xam nhat,
     do la thu tao ra chieu sau chu khong phai do bong dam. */
  --md-background:       #f8fafc;
  --md-surface:          #ffffff;
  --md-surface-container:#ffffff;
  --md-surface-container-high:#ffffff;   /* sidebar cung mau trang */
  --md-surface-variant:  #f1f5f9;        /* nen khi ro chuot, thanh tien do */
  /* Nen cua o KPI: o nam TRONG mot khoi trang nen phai xam nhat mot bac,
     neu khong thi trang tren trang la khong thay gi. */
  --md-the-nen:          #f8fafc;
  --md-on-surface:       #0f172a;
  --md-on-surface-variant:#64748b;
  --md-outline:          #cbd5e1;        /* vien o nhap */
  --md-outline-variant:  #e2e8f0;        /* vien khoi, duong ke bang */
  --md-error:            #dc2626;
  --md-on-error:         #ffffff;
  --md-tang:             #059669;   /* xanh la: tang so voi ky truoc */
  --md-giam:             #dc2626;
  /* Canh bao dung mau ho phach chu KHONG dung xanh thuong hieu: mot canh bao
     mau xanh doc ra thanh thong tin binh thuong. */
  --md-canh-bao-nen:     #fffbeb;
  --md-canh-bao-chu:     #92400e;
  --md-canh-bao-vien:    #fcd34d;

  /* Chuoi mau bieu do, hop voi he xanh moi. Van phan biet duoc khi in den
     trang (do sang khac nhau), khong chi khac mau. */
  --bd-1: #1e3ff0; --bd-2: #059669; --bd-3: #dc2626;
  --bd-4: #d97706; --bd-5: #0891b2;
  --bd-6: #7c3aed; --bd-7: #475569;

  /* Chu o sidebar co token RIENG: truoc day no dung chung --md-on-surface-
     variant voi chu phu trong bang, ma chu phu trong bang thi co quyen nhat
     (no la ghi chu), con thanh dieu huong thi khong -- nguoi dung phai doc
     duoc ten trang ma khong can nhin ky. */
  --nav-chu:         #334155;   /* ten muc menu */
  --nav-nhan:        #475569;   /* tieu de nhom, dong phu, vai tro */
  --nav-thuong-hieu: #1a35c9;   /* ten ung dung o dau sidebar */

  --r-the: 12px; --r-khoi: 12px; --r-nut: 8px;
  /* e1 = "shadow-card" cua trang mau: rat nhe, chi de tach the khoi nen. */
  --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --e2: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --e3: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  --cong: cubic-bezier(0.2, 0, 0, 1);
  --sidebar-rong: 240px;

  /* 15/09 -- khoang cach nguoi dung chinh duoc (doi MOT cho): */
  --khoang-khoi: 25px;      /* khoang giua cac khoi */
  --kpi-ngang: 14px;        /* khoang ngang giua cac o KPI (doc 20px) */
  --tron-cach: 40px;        /* khoang ngang giua 4 hinh tron (>= 900px) */
  --ds-day: 7.5px;          /* be day thanh ngang */
  --ds-cach: 2.5px;         /* khoang giua hai thanh cung dong */
  --ds-phu-cach: 1px;       /* chu thich (vd "139 don") cach ten dong */
  --ds-hang-cach: 5px;      /* khoang giua cac dong bieu do cot (khoi ca hang) */
  --ds-hang-cach-nua: 5px;  /* ... o khoi nua hang (Top 10 TK, Nganh hang) */
  --ds-cot-pt: 2.75rem;     /* cot % ben phai so tien, du cho '126,2%' */
  --ct-canh: #d98a0a;       /* mau canh bao (50-60% chi phi, ROAS 1,5-2) */
}

/* Che do toi: index.html LUON dat data-theme=light|dark len <html> (lua chon
   da luu, khong co thi theo he thong) -> CSS chi can MOT bo token toi. */
:root[data-theme="dark"] {
    --md-primary:          #93b4ff;
    --md-on-primary:       #0f172a;
    --md-primary-container:#1e2f6b;
    --md-on-primary-container:#dbe6ff;
    --md-background:       #0f172a;
    --md-surface:          #1e293b;
    --md-surface-container:#1e293b;
    --md-surface-container-high:#182234;
    --md-surface-variant:  #334155;
    --md-the-nen:          #172033;
    --md-on-surface:       #e2e8f0;
    --md-on-surface-variant:#94a3b8;
    /* Nen toi: "dam hon" = SANG hon, vi tuong phan moi la thu can tang. */
    --nav-chu:         #cbd5e1;
    --nav-nhan:        #b6c0d4;
    --nav-thuong-hieu: #b9c9ff;
    --md-outline:          #475569;
    --md-outline-variant:  #334155;
    --md-error:            #f87171;
    --md-on-error:         #450a0a;
    --md-tang:             #34d399;
    --md-giam:             #f87171;
    --md-canh-bao-nen:     #422006;
    --md-canh-bao-chu:     #fde68a;
    --md-canh-bao-vien:    #92400e;
    --bd-1: #93b4ff; --bd-2: #34d399; --bd-3: #fca5a5;
    --bd-4: #fbbf24; --bd-5: #22d3ee;
    --bd-6: #c4b5fd; --bd-7: #cbd5e1;
}

* { box-sizing: border-box; }

/* BAT BUOC: quy tac display cua rieng minh phai THANG [hidden] cua trinh
   duyet -- khong co dong nay thi el.hidden = true khong an duoc gi (lich
   chon ngay va nhieu khoi khac dua vao thuoc tinh nay). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--md-background);
  color: var(--md-on-surface);
  /* Inter dat dau nhu trang mau, nhung KHONG tai webfont: giu nguyen tac
     khong phu thuoc CDN. May nao co Inter thi dung, khong thi roi ve
     system-ui -- hai font rat gan nhau nen bo cuc khong xe. */
  font: 400 14px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  display: grid;
  grid-template-columns: var(--sidebar-rong) 1fr;
  min-height: 100vh;
}

/* -- thang chu MD3 -- */
h1 { font-weight: 400; font-size: 32px; line-height: 40px; margin: 0 0 8px; letter-spacing: 0; }
h2 { font-weight: 400; font-size: 22px; line-height: 28px; margin: 0 0 12px; }
h3 { font-weight: 500; font-size: 16px; line-height: 24px; margin: 20px 0 8px; }

/* -- sidebar -- */
/* 12/09: dung lai theo mau khsp-mt (cung nha, cung thuong hieu) -- o logo o
   dau, bieu tuong SVG thay cho ky tu, khoi tai khoan tut xuong day.

   `height: 100vh` + flex doc + `margin-top:auto` o khoi chan: khoi tai khoan
   luon dinh day khung nhin, khong troi xuong cuoi trang khi menu dai ra. */
#sidebar {
  background: var(--md-surface-container-high);
  border-right: 1px solid var(--md-outline-variant);
  /* KHONG do bong: trang mau tach sidebar bang DUY NHAT mot duong ke phai.
     Do bong o day lam vien doi thanh mot vet xam day, trong ban nang. */
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; min-height: 0;
}

/* Dau sidebar: khoi thuong hieu tach han khoi menu bang mot duong ke, de
   mat co diem dung thay vi mot cot chu deu tap. */
.sidebar-dau {
  display: flex; align-items: center; gap: 12px;
  flex: none; padding: 16px 20px;
  border-bottom: 1px solid var(--md-outline-variant);
}
/* Logo la anh PNG nen vuong: bo goc o day chu khong sua file anh, de doi
   bo goc mot cho la doi ca noi khac dung lai no. */
.sidebar-logo {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: block; object-fit: cover;
}
.sidebar-chu { min-width: 0; }
.sidebar-ten {
  font-weight: 700; font-size: 16px; line-height: 22px;
  color: var(--nav-thuong-hieu); letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-phu {
  font-weight: 400; font-size: 12px; line-height: 16px; color: var(--nav-nhan);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
}

.nav-muc {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 16px; border-radius: var(--r-nut);
  color: var(--nav-chu); text-decoration: none;
  font-weight: 500; font-size: 14px; line-height: 20px;
  transition: background 200ms var(--cong), color 200ms var(--cong);
}
/* Bieu tuong TRAN, khong khung: trang mau dat icon canh nhan, khong long
   trong o vuong. Van giu be rong co dinh de moi dong neo cung mot cot. */
.nav-bt {
  flex: none; width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  color: currentColor;
}
.nav-bt svg { display: block; }
.nav-ten { min-width: 0; }
.nav-muc:hover  { background: var(--md-surface-variant); color: var(--md-on-surface); }
.nav-muc:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
/* Dau hieu "dang xem": nen xanh nhat + chu xanh dam + VACH XANH ben trai.
   Ba tin hieu chu khong mot -- o che do tuong phan cao hoac khi in, nen
   nhat co the bien mat nhung vach thi con. */
.nav-muc.dang-xem {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 600;
}
.nav-muc.dang-xem::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--md-primary);
}

/* -- khoi tai khoan o day sidebar -- */
.sidebar-chan {
  flex: none; margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--md-outline-variant);
}
.tk {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: var(--r-nut);
}
.tk-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  font-weight: 600; font-size: 14px; line-height: 1;
}
.tk-chu { min-width: 0; }
.tk-ten {
  font-weight: 500; font-size: 14px; line-height: 19px; color: var(--md-on-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-vai { font-weight: 400; font-size: 12px; line-height: 16px; color: var(--nav-nhan); }

/* Nut o chan sidebar: trong nhu mot dong menu chu khong nhu mot nut bam,
   de no khong tranh cho voi cac muc dieu huong ngay ben tren. */
.nut-chan {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 2px; padding: 8px; border: 0; border-radius: var(--r-nut);
  background: none; color: var(--nav-chu);
  font-weight: 500; font-size: 13px; line-height: 18px; text-align: left; cursor: pointer;
  transition: background 200ms var(--cong), color 200ms var(--cong);
}
.nut-chan:hover { background: var(--md-surface-variant); color: var(--md-on-surface); }
.nut-chan:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.nut-chan svg { flex: none; display: block; }

/* -- vung noi dung -- */
main { padding: 24px; min-width: 0; }

.khoi {
  position: relative;               /* bo loc goc khoi neo theo khoi */
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-khoi);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--e1);
}
.khoi[aria-busy="true"] { opacity: .6; }
.khoi.dang-tai { opacity: .6; }

/* thanh dieu khien: mot .khoi dinh o dau trang, luon noi tren cac khoi khac */
.khoi-dieu-khien {
  position: sticky; top: 12px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0;
}
.khoi-dieu-khien select { min-width: 0; }
.o-dieu-khien { display: inline-flex; align-items: center; gap: 8px; }
.nhan-chu { font-weight: 600; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant);
            white-space: nowrap; }
.tom-tat   { font-size: 12px; color: var(--md-on-surface-variant);
             margin-left: auto; padding-left: 24px; text-align: right; }
.ngay-ten-ky { font-weight: 600; }

/* -- the KPI bo goc -- */
/* minmax 236px: mot so tien viet DAY DU ('1.234.567.890 d') phai vua trong
   mot o ma khong bi cat -- do la he qua cua muc 3 trong feedback 11/09. */
.hang-the, .the-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 14px;
}

/* O nam TRONG mot khoi trang nen to nen xam nhat + vien, KHONG do bong:
   do bong long trong do bong doc ra thanh ban. Vach mau ben trai cung bo --
   trang mau khong co, va con so da du noi bat nho co chu. */
.the {
  background: var(--md-the-nen);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--r-the);
  padding: 16px 18px;
  transition: background 200ms var(--cong), box-shadow 200ms var(--cong);
}
.the:hover   { background: var(--md-surface); box-shadow: var(--e1); }
/* Nhan KHONG viet hoa toan bo nua: ten dai kieu "Gia tri don trung binh"
   viet hoa het thi kho doc va chiem hai dong. */
.the-nhan    { font-weight: 600; font-size: 12.5px; line-height: 17px; color: var(--md-on-surface-variant);
               letter-spacing: .2px; }
/* Con so la thong tin chinh cua o -> to va dam han han truoc. clamp() de mot
   so 13 chu so khong lam vo o tren man hinh hep. */
.the-so      { font-weight: 600; font-size: clamp(21px, 1.85vw, 29px); line-height: 1.28; margin-top: 6px;
               color: var(--md-on-surface); letter-spacing: -.3px;
               font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.the-phu     { font-weight: 400; font-size: 12.5px; line-height: 17px; color: var(--md-on-surface-variant);
               margin-top: 6px; }
.the-phu.tang { color: var(--md-tang); }
.the-phu.giam { color: var(--md-giam); }

/* -- SVG cua bieu-do.js -- */
.bang-boc svg { width: 100%; height: auto; display: block; }

.chu-thich { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12px; }
.chu-thich .muc { display: inline-flex; align-items: center; gap: 6px;
                  color: var(--md-on-surface-variant); }
.chu-thich .muc::before {
  content: ''; width: 18px; height: 0; border-top: 2px solid var(--mau);
}
.chu-thich .muc.dut::before { border-top-style: dashed; }

/* -- bang -- */
.bang-boc { overflow-x: auto; }   /* bang rong cuon trong khung, KHONG lam
                                     ca trang cuon ngang */
.bang-cuon { overflow-x: auto; }
.bang-chan { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bang-rong { color: var(--md-on-surface-variant); text-align: center; padding: 18px; }

table.bang, .bang-cuon table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bang th, table.bang td,
.bang-cuon th, .bang-cuon td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--md-outline-variant);
}
table.bang th, .bang-cuon th {
  font-weight: 500; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant);
  text-transform: uppercase; letter-spacing: .5px;
  position: sticky; top: 0; background: var(--md-surface-container);
  cursor: pointer; user-select: none; vertical-align: bottom;
}
table.bang td:not(:first-child) { text-align: right;
                                  font-variant-numeric: tabular-nums; }
/* Bang NHAP (chi tieu, cai dat Meta): o chua <input> nen quy tac "td khong
   phai cot dau thi can phai" o tren day input sang phai trong khi <th> van
   can trai -> header lech han so voi noi dung (feedback 11/09 muc 7). Bang
   nhap khong co cot so nao ca nen can trai toan bo va cho input chiem het
   be rong o. */
/* Phai viet `table.bang.bang-form` chu khong phai `table.bang-form`: quy tac
   can-phai o tren co do dac hieu (0,2,2) (1 class + :first-child + 2 type),
   nen `table.bang-form td` (0,1,2) KHONG de duoc no -- cot chu thuong van bi
   day sang phai. Hai class deu co mat that (className = 'bang bang-form'). */
table.bang.bang-form td, table.bang.bang-form th {
  text-align: left; vertical-align: middle;
}
table.bang.bang-form input { width: 100%; min-width: 90px; }
table.bang.bang-form th { cursor: default; }
table.bang.bang-form td:last-child, table.bang.bang-form th:last-child {
  white-space: nowrap; width: 1%;
}
.bang-cuon td.so, .bang-cuon th.so { text-align: center;
                                     font-variant-numeric: tabular-nums; }
table.bang tbody tr:hover, .bang-cuon tbody tr:hover {
  background: var(--md-background);
}
tr.chua-phan-bo { background: var(--md-canh-bao-nen); color: var(--md-canh-bao-chu);
                  font-style: italic; }

/* tieu de cot kieu Google Sheets (sap xep + loc) */
.th-hop { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
th.so .th-hop { justify-content: center; }
.th-ten {
  font-weight: 500; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant);
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .5px;
}
.th-ten:hover { color: var(--md-primary); }
.th-mui { font-size: 10px; color: var(--md-primary); }

.th-phieu {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1px solid transparent; border-radius: 6px;
  background: none; color: var(--md-on-surface-variant); cursor: pointer; padding: 0;
}
.th-phieu:hover { background: var(--md-surface-variant); color: var(--md-primary); }
.th-phieu.bat   { color: var(--md-primary); background: var(--md-primary-container);
                  border-color: var(--md-primary); }

/* menu loc kieu Google Sheets */
.loc-panel {
  position: fixed; z-index: 60; width: 292px;
  background: var(--md-surface); color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant); border-radius: 8px;
  box-shadow: var(--e3); padding: 8px 0; text-align: left; white-space: normal;
  font-weight: 400; display: flex; flex-direction: column; overflow: hidden;
}
.loc-muc {
  font: inherit; display: block; width: 100%; text-align: left; padding: 9px 18px;
  border: 0; background: none; cursor: pointer; color: var(--md-on-surface);
}
.loc-muc:hover { background: var(--md-surface-variant); }
.loc-muc.dang  { color: var(--md-primary); font-weight: 600;
                 background: var(--md-primary-container); }
.loc-vach { height: 1px; background: var(--md-outline-variant); margin: 8px 0; }
.loc-lien {
  display: flex; align-items: center; gap: 4px; padding: 2px 18px 8px;
  font-size: 13px; color: var(--md-on-surface-variant);
}
.loc-a {
  font: inherit; border: 0; background: none; padding: 0; color: var(--md-primary);
  cursor: pointer; text-decoration: none;
}
.loc-a:hover { text-decoration: underline; }
.loc-dang { margin-left: auto; font-size: 12px; }
.loc-tim {
  font: inherit; width: calc(100% - 36px); margin: 0 18px 8px; padding: 7px 10px;
  border: 1px solid var(--md-outline); border-radius: 6px;
  background: var(--md-surface); color: var(--md-on-surface);
}
.loc-ds { flex: 1; min-height: 60px; max-height: 240px; overflow-y: auto; padding: 0 8px; }
.loc-dong {
  font: inherit; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 13px; color: var(--md-on-surface); text-align: left;
}
.loc-dong:hover { background: var(--md-surface-variant); }
.loc-tick { width: 14px; flex: none; color: var(--md-primary); font-weight: 700; }
.loc-ten  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc-dem  { color: var(--md-on-surface-variant); font-size: 11px;
            font-variant-numeric: tabular-nums; }
.loc-trong { color: var(--md-on-surface-variant); font-size: 12px; padding: 8px 10px;
             margin: 0; }
.loc-chan {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
  padding: 10px 18px 2px; border-top: 1px solid var(--md-outline-variant);
}

/* cua so phong to bang */
.bang-dialog {
  width: min(1500px, 94vw); max-width: none; height: 88vh; padding: 0; border: 0;
  border-radius: var(--r-khoi); box-shadow: var(--e3);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--md-surface); color: var(--md-on-surface);
}
.bang-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog-dau {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--md-outline-variant); flex: none;
}
.dialog-dau h3 { margin: 0; }
.dialog-dong {
  font: inherit; font-size: 18px; line-height: 1;
  border: 1px solid var(--md-outline); border-radius: 8px;
  background: var(--md-surface); cursor: pointer; padding: 5px 11px;
  color: var(--md-on-surface-variant);
}
.dialog-dong:hover { background: var(--md-surface-variant); color: var(--md-on-surface); }
.dialog-than { flex: 1; overflow: auto; padding: 0 18px 18px; }
/* CA HAI lop boc deu phai tat cuon rieng, khong chi .bang-cuon: .bang-boc
   cung co `overflow-x: auto` tu quy tac chung. Neu de sot mot cai thi no
   nuot mat truc ngang, va vi no cao BANG CA BANG (880px trong mot khung
   617px) nen thanh cuon ngang bi day xuong duoi day man hinh -- phai cuon
   het bang xuong moi cham toi duoc.
   Tat ca -> .dialog-than la phan tu cuon DUY NHAT, thanh ngang cua no nam
   dung o day cua so va luon nhin thay. */
.dialog-than .bang-boc,
.dialog-than .bang-cuon { overflow: visible; }
.dialog-than thead th {
  position: sticky; top: 0; background: var(--md-surface-container); z-index: 2;
  box-shadow: inset 0 -1px 0 var(--md-outline-variant);
}
.dialog-than .bang-chan { position: sticky; left: 0; }

/* -- nut, o nhap -- */
/* Nut phu theo trang mau: nen trang, vien xam, chu dam mau chu -- KHONG
   phai chu xanh tren nen trong. Xanh de danh cho .nut-chinh, de tren mot
   man hinh chi co MOT thu bat mat. */
button, .nut-nho {
  font-weight: 500; font-size: 14px; line-height: 20px; border-radius: var(--r-nut);
  border: 1px solid var(--md-outline); padding: 8px 16px;
  background: var(--md-surface); color: var(--md-on-surface); cursor: pointer;
  transition: background 200ms var(--cong);
}
button:hover:not(:disabled) { background: var(--md-background); }
button:disabled { opacity: .38; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.nut-nho { padding: 6px 12px; font-size: 13px; }
.nut-chinh {
  padding: 8px 16px; border-radius: var(--r-nut);
  border: 1px solid var(--md-primary); background: var(--md-primary);
  color: var(--md-on-primary); cursor: pointer;
}
.nut-chinh:hover:not(:disabled) { opacity: .9; }
.nut-chinh:disabled { opacity: .38; cursor: not-allowed; }

input, select {
  font: inherit; padding: 8px 12px; border-radius: var(--r-nut);
  border: 1px solid var(--md-outline);
  background: var(--md-surface); color: var(--md-on-surface);
  max-width: 100%;
}
input:focus { outline: 2px solid var(--md-primary); outline-offset: -1px; }
input[readonly] { background: var(--md-surface-variant); color: var(--md-on-surface-variant); }
.form-dang-nhap { display: flex; gap: 6px; flex-wrap: wrap; }
.form-dang-nhap input { width: 130px; }
/* Trong chan sidebar (rong 240px) thi hai o nhap va nut xep DOC, moi thu
   chiem tron be ngang -- de canh nhau se con 60px moi o, khong go noi. */
.sidebar-chan .form-dang-nhap { flex-direction: column; }
.sidebar-chan .form-dang-nhap input,
.sidebar-chan .form-dang-nhap button { width: 100%; }

/* -- bo chon khoang ngay -- */
.ngay-goc { position: relative; }
.ngay-nut {
  font: inherit; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--md-outline); border-radius: var(--r-nut);
  background: var(--md-surface); color: var(--md-on-surface); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ngay-nut:hover { border-color: var(--md-primary); }
.ngay-icon { }
.ngay-mui { color: var(--md-on-surface-variant); }

.ngay-bang {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  display: flex; background: var(--md-surface); color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant); border-radius: 16px;
  box-shadow: var(--e3); overflow: hidden;
}
.ngay-ky {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--md-outline-variant); padding: 8px 0; min-width: 168px;
}
.ngay-ky button {
  font: inherit; text-align: left; padding: 9px 18px; border: 0; background: none;
  cursor: pointer; color: var(--md-on-surface); white-space: nowrap; border-radius: 0;
}
.ngay-ky button:hover { background: var(--md-surface-variant); }
.ngay-ky button.dang-chon {
  color: var(--md-primary); font-weight: 600; background: var(--md-primary-container);
}

.ngay-phai { padding: 14px 16px; }
.ngay-dinh { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ngay-o {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--md-outline-variant); border-radius: var(--r-nut);
  padding: 7px 14px; font-variant-numeric: tabular-nums;
}
.ngay-o-mot { padding: 2px 4px; border-radius: 5px; }
.ngay-o-mot.dang-sua { background: var(--md-primary-container);
                       color: var(--md-on-primary-container); font-weight: 600; }
.ngay-gach { color: var(--md-on-surface-variant); }
.ngay-goi-y { font-size: 12px; color: var(--md-primary); }

.ngay-lich { display: flex; gap: 26px; }
.ngay-thang { width: 244px; }
.ngay-thang-dau {
  display: grid; grid-template-columns: 28px 1fr 28px; align-items: center;
  margin-bottom: 8px;
}
.ngay-thang-ten { text-align: center; font-weight: 600; }
.ngay-dh {
  font: inherit; font-size: 18px; line-height: 1;
  border: 1px solid var(--md-outline-variant); border-radius: 6px;
  background: var(--md-surface); cursor: pointer; padding: 2px 0;
  color: var(--md-on-surface);
}
.ngay-dh:hover { background: var(--md-surface-variant); }

.ngay-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.ngay-thu { text-align: center; font-size: 11px; color: var(--md-on-surface-variant);
            padding-bottom: 6px; }
.ngay-o-lich {
  font: inherit; border: 0; background: none; cursor: pointer; padding: 7px 0;
  border-radius: 7px; color: var(--md-on-surface); font-variant-numeric: tabular-nums;
}
.ngay-o-lich:hover:not(:disabled) { background: var(--md-surface-variant); }
.ngay-o-lich:disabled { color: var(--md-outline-variant); cursor: default; }
.ngay-o-lich.hom-nay { box-shadow: inset 0 0 0 1px var(--md-primary); }
.ngay-o-lich.trong-khoang { background: var(--md-primary-container); border-radius: 0; }
.ngay-o-lich.dau-cuoi {
  background: var(--md-primary); color: var(--md-on-primary); font-weight: 600;
}

.ngay-chan {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--md-outline-variant);
}
/* 05/10: So sanh nam o chan bo chon ngay -- mot hang rieng tren cac nut. */
.ngay-ss { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ngay-ss-nut { display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--md-surface-variant); }
.ngay-ss-nut button { font: inherit; font-size: 12.5px; font-weight: 600; height: 30px; padding: 0 10px;
  border: 0; border-radius: 7px; background: none; color: var(--md-on-surface-variant); cursor: pointer; white-space: nowrap; }
.ngay-ss-nut button.dang { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--e1); }
.ngay-ss-chu { font-size: 12px; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.ngay-ky button.da-ap::after { content: '✓'; float: right; margin-left: 12px; font-weight: 700; color: var(--md-primary); }
.ngay-dh:disabled { opacity: .35; cursor: default; }
.ngay-nhap-dt { display: none; }

/* -- thong bao -- */
.ghi-chu  { font-size: 12px; color: var(--md-on-surface-variant); margin: 8px 0 0; }
.loi      { border-radius: var(--r-the); padding: 12px 16px; margin: 8px 0;
            background: var(--md-error); color: var(--md-on-error); }
.loi p    { margin: 0 0 8px; }
.loi button {
  font: inherit; padding: 4px 10px; border: 1px solid var(--md-on-error);
  border-radius: 6px; background: transparent; color: var(--md-on-error); cursor: pointer;
}
.loi button:hover { background: rgba(255,255,255,.15); }
.loi-nho  { color: var(--md-error); font-size: 12px; margin: 4px 0 0; }
/* Banner suc khoe du lieu (blocks/health.js). Khong co token error-container/
   tertiary rieng nen dung lai --md-error va --md-primary-container nhu .loi
   va .canh-bao de mau van dung trong ca sang lan toi. */
.banner { border-radius: var(--r-the); padding: 10px 12px; margin: 8px 0; }
.banner-error   { background: var(--md-error); color: var(--md-on-error);
                  border: 1px solid var(--md-error); }
.banner-warn    { background: var(--md-canh-bao-nen);
                  color: var(--md-canh-bao-chu);
                  border: 1px solid var(--md-canh-bao-vien); }
.banner-unknown { background: var(--md-surface-variant);
                  color: var(--md-on-surface-variant);
                  border: 1px solid var(--md-outline); }
.banner ul { margin: 6px 0 0; padding-left: 20px; }

/* -- man hinh hep -- */
#nut-menu {
  display: none; position: fixed; bottom: 20px; right: 20px; z-index: 10;
  width: 56px; height: 56px; border-radius: 16px; font-size: 20px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  border: none; box-shadow: var(--e3);
}

@media (max-width: 900px) {
  body { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; left: 0; top: 0; z-index: 20;
    width: var(--sidebar-rong);
    transform: translateX(-100%);
    transition: transform 200ms var(--cong);
  }
  body.sidebar-mo #sidebar { transform: none; }
  #nut-menu { display: block; }
  main { padding: 16px; }
  /* Xuong dong thi duong ke doc thanh vo nghia (no se nam o dau dong). */
  .khoi-dieu-khien { gap: 12px 16px; }
  .tom-tat { margin-left: 0; padding-left: 0; text-align: left; }
  .ngay-bang { flex-direction: column; }
  .ngay-lich { flex-direction: column; gap: 12px; }
  .ngay-thang { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ═══ Nang cap 12/09 — o KPI va bieu do ══════════════════════════════════
   Yeu cau: "cai tien them cac bieu do va cac o vuong tai trang chinh".
   Khong them token mau moi -- tat ca dung lai bo token o dau file, nen che
   do toi tu dung khong phai viet lai mot dong nao. */

/* -- phan cap: hang o CHINH cua trang Tong quan -- */
/* 4 o lon, moi o toi thieu 268px de mot so tien viet DAY DU khong xuong
   dong. Man hinh hep thi tu rot xuong 2 cot roi 1 cot. */
.hang-the-chinh { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.the-lon { padding: 18px 20px; }
.the-lon .the-nhan { font-size: 13px; }
.the-lon .the-so   { font-size: clamp(21px, 1.75vw, 30px); overflow-wrap: anywhere; }

/* -- dau '?' giai thich cach tinh ngay tren o -- */
.the-hoi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--md-outline);
  font-weight: 600; font-size: 10px; line-height: 1; color: var(--md-on-surface-variant);
  cursor: help; vertical-align: 1px;
}
.the-hoi:hover, .the-hoi:focus-visible {
  background: var(--md-primary-container);
  border-color: var(--md-primary);
  color: var(--md-on-primary-container);
}

/* -- chip so sanh ky truoc -- */
/* Thay cho chuoi '+12% so ky' nhet vao dong phu. Mui ten + dau +/- + mau =
   ba tin hieu; nguoi mu mau doc bang hai cai con lai. */
.the-delta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.chip-delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  font-weight: 600; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-delta.tang { color: var(--md-tang); background: color-mix(in srgb, var(--md-tang) 12%, transparent); }
.chip-delta.giam { color: var(--md-giam); background: color-mix(in srgb, var(--md-giam) 12%, transparent); }
/* Trinh duyet chua co color-mix van phai doc duoc: chu da co mau, chi mat
   phan nen nhat. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .chip-delta { background: var(--md-surface-variant); }
}
.the-truoc {
  font-weight: 400; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

/* -- bieu do: crosshair + tooltip -- */
.bd-tuong-tac { position: relative; }
.bd-tuong-tac svg { cursor: crosshair; }
.bd-tuong-tac svg:focus-visible {
  outline: 2px solid var(--md-primary); outline-offset: 2px;
}
.bd-tooltip {
  position: absolute; top: 10px; z-index: 2; pointer-events: none;
  min-width: 190px; max-width: 320px;
  padding: 9px 11px; border-radius: var(--r-nut);
  background: var(--md-surface); border: 1px solid var(--md-outline-variant);
  box-shadow: var(--e2); font-size: 12.5px;
}
/* Gan mep phai thi lat hop sang trai de khong tran ra ngoai khung. */
.bd-tooltip[data-neo="trai"] { transform: translateX(10px); }
.bd-tooltip[data-neo="phai"] { transform: translateX(calc(-100% - 10px)); }
.bd-tooltip-dau {
  font-weight: 600; color: var(--md-on-surface);
  margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--md-outline-variant);
}
.bd-tooltip-dong {
  display: flex; align-items: center; gap: 7px; padding: 2px 0;
  color: var(--md-on-surface-variant);
}
.bd-tooltip-duong { width: 18px; height: 0; border-top: 2px solid var(--mau); flex: none; }
.bd-tooltip-duong.dut { border-top-style: dashed; }
.bd-tooltip-ten { flex: 1; }
.bd-tooltip-gt {
  font-weight: 600; color: var(--md-on-surface);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.bd-cot { transition: opacity 150ms var(--cong); }
.bd-cot:hover { opacity: .78; }
.bd-rong {
  padding: 20px; text-align: center;
  background: var(--md-the-nen); border: 1px dashed var(--md-outline-variant);
  border-radius: var(--r-the); margin: 8px 0;
}

/* -- co cau: donut / thanh 100% + chu giai -- */
.bd-co-cau {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 4px;
}
.bd-donut { width: 240px; height: 240px; flex: none; }
.bd-mieng { transition: opacity 150ms var(--cong); }
.bd-donut:hover .bd-mieng { opacity: .55; }
.bd-donut .bd-mieng:hover { opacity: 1; }
/* Dang thanh 100%: thanh nam TREN, chu giai xuong duoi chu khong dung canh
   -- thanh von da chiem het be ngang. */
.bd-co-cau-thanh { display: block; }
.bd-co-cau-thanh > svg { width: 100%; height: auto; }

.bd-chu-giai {
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 320px; min-width: 260px; font-size: 13px;
}
.bd-chu-giai li {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-bottom: 1px solid var(--md-outline-variant);
}
.bd-chu-giai li:last-child { border-bottom: 0; }
.bd-chu-giai-o { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.bd-chu-giai-ten {
  flex: 1; color: var(--md-on-surface);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-chu-giai-gt {
  color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .bd-co-cau { gap: 16px; }
  .bd-donut { width: 190px; height: 190px; margin: 0 auto; }
  .bd-tooltip { min-width: 150px; font-size: 11.5px; }
}

/* Nguoi tat hieu ung chuyen dong: bo moi transition o phan moi them. */
@media (prefers-reduced-motion: reduce) {
  .bd-cot, .bd-mieng { transition: none; }
}

/* Trang chi tieu 14/09 (chieu) -- ca trang la mot bang: moi dong mot
   (doi tuong, chi so); cot muc thang / thuc te / tien do / du bao / trang thai.
   Mau trang thai (tot/canh/xau) tach khoi mau nhan --md-primary. */
.ct-trang { --ct-tot:var(--md-tang, #0f9d68); --ct-canh:#d98a0a; --ct-xau:var(--md-giam, #d64545);
  --ct-tot-nen:rgba(16,157,104,.12); --ct-canh-nen:rgba(217,138,10,.14); --ct-xau-nen:rgba(214,69,69,.12);
  --ct-vien:var(--md-outline-variant, #e2e8f0); --ct-vien-mo:color-mix(in srgb, var(--md-outline-variant, #e2e8f0) 55%, transparent);
  --ct-moc:var(--md-on-surface, #151b2b); }
.ct-trang .num { font-variant-numeric:tabular-nums; }
.ct-dau { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
.ct-dau h2 { font-size:20px; font-weight:600; margin:0; letter-spacing:-.01em; }
.ct-ky { font-size:.85rem; opacity:.75; margin-top:2px; }
.ct-ky b { font-weight:600; opacity:1; }
.ct-thang { display:flex; align-items:center; gap:.4rem; }
.ct-thang input[type="month"] { padding:.3rem .5rem; }
.ct-thang .nut-nho { min-width:2rem; padding:.3rem .5rem; font-size:1rem; line-height:1; }

.ct-tom-tat { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; margin-bottom:1.1rem; }
.ct-o { border:1px solid var(--ct-vien); border-radius:8px; padding:.7rem .9rem; display:flex; flex-direction:column; gap:.3rem; }
.ct-o-nhan { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.65; font-weight:600; }
.ct-o-gia { font-size:1.45rem; font-weight:600; line-height:1.1; }
.ct-o-gia small { font-size:.85rem; font-weight:400; opacity:.7; margin-left:.3rem; }
.ct-o-phu { font-size:.8rem; opacity:.75; }
.ct-o.tot .ct-o-gia { color:var(--ct-tot); } .ct-o.canh .ct-o-gia { color:var(--ct-canh); } .ct-o.xau .ct-o-gia { color:var(--ct-xau); }

.ct-cuon { overflow-x:auto; border:1px solid var(--ct-vien); border-radius:10px; }
.ct-bang { border-collapse:collapse; width:100%; min-width:840px; font-size:.875rem; }
.ct-bang th { font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.65; font-weight:600;
  text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--ct-vien); white-space:nowrap; }
.ct-bang td { padding:.5rem .75rem; border-bottom:1px solid var(--ct-vien-mo); vertical-align:middle; }
.ct-bang tr:last-child td { border-bottom:0; }
.ct-ten { width:24%; min-width:200px; }
.ct-chi-so { font-weight:500; white-space:nowrap; }
.ct-ai { font-size:.75rem; opacity:.6; }
tr.ct-nhom td { background:color-mix(in srgb, var(--md-primary) 9%, transparent); font-weight:600; padding:.55rem .75rem;
  border-top:1px solid var(--ct-vien); border-bottom:1px solid var(--ct-vien); }
tr.ct-nhom td span { font-weight:400; opacity:.7; font-size:.78rem; margin-left:.5rem; }
tr.ct-nguoi td.ct-ten { padding-left:1.75rem; }
tr.ct-nguoi .ct-chi-so { font-weight:400; }
tr.ct-dau-nguoi td { border-top:1px dashed var(--ct-vien); }
.ct-thuc { font-weight:600; white-space:nowrap; }
.ct-tien-do { width:30%; min-width:220px; }
.ct-du-bao { opacity:.75; white-space:nowrap; }
.ct-bar { position:relative; height:8px; background:var(--md-surface-variant, #e6e9f1); border-radius:4px; }
.ct-fill { height:100%; border-radius:4px; background:var(--md-primary); }
.ct-fill.tot { background:var(--ct-tot); } .ct-fill.canh { background:var(--ct-canh); } .ct-fill.xau { background:var(--ct-xau); }
.ct-pace { position:absolute; top:-3px; width:2px; height:14px; background:var(--ct-moc); border-radius:1px; }
.ct-bar-chu { display:flex; justify-content:space-between; font-size:.72rem; opacity:.7; margin-top:4px; gap:.5rem; }
.ct-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:.75rem; font-weight:500; white-space:nowrap; }
.ct-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.ct-chip.tot { color:var(--ct-tot, var(--md-tang)); background:var(--ct-tot-nen, color-mix(in srgb, var(--md-tang) 12%, transparent)); }
.ct-chip.canh { background:var(--ct-canh-nen); color:var(--ct-canh); }
.ct-chip.xau { background:var(--ct-xau-nen); color:var(--ct-xau); }
.ct-chip.trong { opacity:.55; }
.ct-chu-thich { display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.75rem; opacity:.65; margin:.6rem 0 1.4rem; }
.ct-chu-thich span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
.ct-chu-thich .a::before { background:var(--ct-tot); } .ct-chu-thich .b::before { background:var(--ct-canh); }
.ct-chu-thich .c::before { background:var(--ct-xau); } .ct-chu-thich .d::before { background:var(--ct-moc); width:2px; height:12px; }
.ct-co-cau { border-top:1px solid var(--ct-vien); padding-top:.75rem; }
.ct-co-cau summary { cursor:pointer; font-weight:600; font-size:1rem; padding:.3rem 0; }
.ct-co-cau summary .ct-ai { font-weight:400; }
.ct-co-cau[open] summary { margin-bottom:.5rem; }

/* O nhap muc thang: nam trong bang, canh phai, rong theo kieu so. */
.o-chi-tieu { display:inline-flex; align-items:center; gap:.35rem; justify-content:flex-end; }
/* Moi o nhap (tien, %, so) cung 15ch -> don vi d/% thang hang voi cot tien. */
.o-chi-tieu input { width:15ch; font-size:.85rem; padding:.3rem .5rem; text-align:right; font-variant-numeric:tabular-nums; }
.o-chi-tieu.ct-tu { opacity:.7; font-style:italic; }
.o-don-vi { font-size:.78rem; opacity:.7; min-width:.8em; }
.o-trang-thai { font-size:.78rem; min-width:1.1rem; }
.o-trang-thai.xong { color:var(--ct-tot, #059669); }
@media (max-width:640px) { .ct-ten { width:auto; } .ct-tien-do { min-width:160px; } }

/* ══ 15/09 — bo cuc Tong quan + trang con theo file thiet ke ═══════════════
   (Gop lai 15/09 toi tu ~200 dong viet chong nhau; gia tri = gia tri CUOI
   CUNG cua tung thuoc tinh, da do lai bang getComputedStyle truoc/sau.) */

/* Dau trang: ten trang + mo ta ben trai, gio cap nhat ben phai. */
.trang-dau { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 0 2px; }
.trang-dau h1 { font-size: 24px; line-height: 30px; font-weight: 600; margin: 0; letter-spacing: -.2px; }
.trang-mo-ta { font-size: 12.5px; color: var(--md-on-surface-variant); margin-top: 2px; }
.trang-cap-nhat { font-size: 12px; color: var(--md-on-surface-variant); white-space: nowrap; }
/* 29/09: nut bo loc xuong mot dong rieng, tren dong gio cap nhat. De
   chung mot hang thi `.trang-dau { align-items: flex-end }` dim no xuong
   day tieu de, nhin nhu bi lech. */
.trang-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.trang-phai .khoi-bo-loc-boc { position: static; }

/* Vung noi dung la LUOI 6 cot: khoi thuong chiem ca hang, `khoi-nua` = 3 cot,
   `khoi-ba` = 2 cot (rot xuong o phan RESPONSIVE). */
#noi-dung { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--khoang-khoi); align-items: start; }
#noi-dung > .khoi { grid-column: 1 / -1; margin-bottom: 0; min-width: 0; }
#noi-dung > .khoi-nua { grid-column: span 3; align-self: stretch; }
#noi-dung > .khoi-ba  { grid-column: span 2; }
/* Bieu do tu lap day chieu cao khoi (vd thang tin nhan cao bang khoi canh ben). */
.khoi:has(> .bd-lap-day) { display: flex; flex-direction: column; }
.bd-lap-day { flex: 1; position: relative; min-height: 280px; }
.bd-lap-day > * { position: absolute; inset: 0; }
@media (max-width: 1100px) { #noi-dung > .khoi-ba { grid-column: span 3; } }
@media (max-width: 760px)  { #noi-dung > .khoi-ba { grid-column: 1 / -1; } }

/* Dau khoi: tieu de + dong phu nho + link "Xem chi tiet" canh phai. */
.khoi-dau { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.khoi-dau h2 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.khoi-phu { font-size: 12px; color: var(--md-on-surface-variant); }
.khoi-lien-ket { margin-left: auto; font-size: 12.5px; color: var(--md-primary); text-decoration: none; }
.khoi-lien-ket:hover { text-decoration: underline; }

/* Bo loc goc phai tren khoi: [↓][Theo doanh thu ▾]. */
.khoi-bo-loc-boc { position: absolute; top: 16px; right: 18px; display: inline-flex; gap: 4px; align-items: stretch; }
.khoi-bo-loc { font: inherit; font-size: 12.5px; padding: 4px 8px; border-radius: var(--r-nut);
  line-height: 1.45;
  border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface); }
.khoi-bo-loc-chieu { font: inherit; font-size: 13px; line-height: 1; padding: 4px 8px; border-radius: var(--r-nut);
  border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface); cursor: pointer; }
.khoi-bo-loc-chieu:hover { background: var(--md-surface-variant); }

/* Thanh dieu khien: o so sanh + bo chon khoang tu chon (nut hien khi che do
   la "Tu chon", JS dat hidden); lich cua no neo mep phai de khong tran. */
.o-so-sanh { flex-wrap: wrap; }
.o-so-sanh .nhan-chu { margin-left: 4px; }
.ngay-so-sanh { margin-left: 4px; }
.ngay-so-sanh .ngay-bang { left: auto; right: 0; }
/* 30/09: bo loc nganh cua Tong quan tren thanh -- vach ngan mong tach khoi
   cum ngay, nut cao bang o select ben canh, bang chon mo sang phai. */
.o-loc-trang { margin-left: 16px; padding-left: 16px; border-left: 1px solid var(--md-outline-variant); }
.o-loc-trang .loc-nganh-nut { padding: 8px 12px; font-size: inherit; border-color: var(--md-outline); }
.o-loc-trang .loc-nganh-bang { left: 0; right: auto; }

/* Hang KPI: 5 o / hang, ca ba hang cung co chu; cot doi theo be ngang o RESPONSIVE. */
.hang-the-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px var(--kpi-ngang); }
.hang-the-kpi + .hang-the-kpi { margin-top: 20px; }
/* 17/09 trang Pancake: hai hang 6 o (ban hang / chat), user duyet mockup. */
@media (min-width: 900px) { .hang-the-kpi.kpi-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hang-the-kpi .the { padding: 14px 16px; }
.hang-the-kpi .the-so { font-size: clamp(19px, 1.5vw, 24px); overflow-wrap: anywhere; }
/* Hang o "chinh" (GSC, pheu GA4): 4 o cung co chu voi hang KPI. */
@media (min-width: 1100px) { .hang-the-chinh { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hang-the-chinh .the { padding: 14px 16px; }
.hang-the-chinh .the-so { font-size: clamp(19px, 1.5vw, 24px); }

/* Xu huong: so tong o dau bieu do (dung .the nhung khong vien, khong nen). */
.xu-huong-dau.the { background: transparent; border: 0; padding: 0 0 8px; box-shadow: none; }
.xu-huong-dau:hover { background: transparent; box-shadow: none; }
.xu-huong-dau .the-nhan { display: none; }
.xu-huong-dau .the-so { margin-top: 0; font-size: clamp(19px, 1.5vw, 24px); }

/* Danh sach thanh ngang: hang = ten | cot thanh | cot so. Cot thanh tu xep theo
   --ds-cach; cot so rong CO DINH (--ds-cot-so) de thanh cac dong cung thang do;
   so = [tien canh phai][% cot rieng] de chu "d" thang hang. */
.ds-thanh { display: flex; flex-direction: column; gap: var(--ds-hang-cach); }
.khoi-nua .ds-thanh { gap: var(--ds-hang-cach-nua); }
.ds-hang { display: grid; grid-template-columns: minmax(84px, 18%) 1fr var(--ds-cot-so, 9.6rem); gap: 10px 8px; align-items: center; }
.khoi-nua .ds-hang { grid-template-columns: minmax(110px, 25%) 1fr var(--ds-cot-so, 9.6rem); }
#blk-topsp .ds-hang { grid-template-columns: minmax(200px, 34%) 1fr var(--ds-cot-so, 9.6rem); }  /* ca hang: doc du ten */
#blk-tin-nhan .ds-hang { grid-template-columns: minmax(200px, 30%) 1fr var(--ds-cot-so, 9.6rem); } /* dong phu mot dong */
.ds-ten { font-size: 12.5px; font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.khoi-nua .ds-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-phu { font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); margin-top: var(--ds-phu-cach); }
.ds-cac-thanh { display: flex; flex-direction: column; justify-content: center; gap: var(--ds-cach); min-width: 0; }
.ds-cac-so { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.ds-ray { height: var(--ds-day); border-radius: 4px; background: var(--md-surface-variant); overflow: hidden; }
.ds-fill { height: 100%; border-radius: 4px; transition: width 400ms var(--cong); }
.ds-so { display: grid; grid-template-columns: 1fr var(--ds-cot-pt); column-gap: 3px;
  font-size: 12.5px; font-weight: 400; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.ds-so-tien { text-align: right; font-weight: 400; }
.ds-so-pt { text-align: right; font-weight: 400; opacity: .85; }

/* Co cau: bon hinh tron mot hang, chu giai DUOI hinh la MOT luoi [o][ten][tien][%]
   (li display:contents -> tien va % thang hang giua cac dong). */
.luoi-tron { display: grid; }
.o-tron { min-width: 0; }
.o-tron h3 { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--md-on-surface-variant); }
.o-tron .bd-co-cau { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-wrap: nowrap; }
.o-tron .bd-donut { width: min(100%, 236px); height: auto; flex: none; }
.o-tron .bd-chu-giai { width: 100%; flex: none; min-width: 0; font-size: 12px;
  display: grid; grid-template-columns: 11px 1fr auto 2.9rem; column-gap: 8px; row-gap: 6px;
  justify-content: stretch; align-items: center; }
.o-tron .bd-chu-giai li { display: contents; }
.o-tron .bd-chu-giai-o { grid-column: 1; margin: 0; }
.o-tron .bd-chu-giai-ten { grid-column: 2; display: block; min-width: 3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o-tron .bd-chu-giai-gt { grid-column: 3 / 5; display: contents; font-size: 11.5px; white-space: nowrap; }
.o-tron .bd-chu-giai-tien { grid-column: 3; text-align: right; font-variant-numeric: tabular-nums; }
.o-tron .bd-chu-giai-pt { grid-column: 4; text-align: right; font-variant-numeric: tabular-nums; opacity: .8; margin-left: -4px; }

/* Sidebar phang co muc con (theo file). Nut nhom trong nhu muc, co mui ten
   xoay khi mo; muc con thut vao, khong bieu tuong. */
/* 17/09: `font: inherit` tren <button> tung xoa font-weight 500 cua .nav-muc ->
   nhom (Meta, Google, Nhan su) nhat hon muc thuong. Khai lai dung bo chu. */
.nav-nhom-nut { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 500; font-size: 14px; line-height: 20px; color: var(--nav-chu); }
.nav-nhom-nut.co-con-dang-xem { color: var(--md-on-primary-container); font-weight: 600; }
.nav-mui-ten { margin-left: auto; width: 14px; height: 14px; display: inline-flex; opacity: .6;
  transition: transform 200ms var(--cong); }
.nav-mui-ten svg { width: 14px; height: 14px; }
.nav-nhom-nut[aria-expanded="true"] .nav-mui-ten { transform: rotate(90deg); }
.nav-ds-con { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px; }
.nav-muc.nav-con { padding-left: 43px; font-weight: 500; font-size: 13.5px; }
.nav-muc.nav-con.dang-xem::before { left: 28px; }

/* ══ 15/09 RESPONSIVE — mot cho duy nhat, viet SAU cung de thang moi quy tac tren ═══
   Bac: >=1100 (laptop 1280 tro len: sidebar co dinh, 5 o KPI, 4 hinh tron)
        900–1099 (iPad ngang: sidebar thu thanh nut ☰, 5 o KPI, 4 hinh tron)
        640–899  (iPad doc: 3 o KPI, 2 hinh tron, khoi nua -> ca hang)
        <640     (dien thoai: 2 o KPI, 1 hinh tron, bieu do cot xep doc) */

/* -- duoi 1100: sidebar off-canvas nhu mobile de tra lai be ngang cho noi dung.
   (1279 truoc day lam laptop 1280 mat sidebar: thanh cuon an 15px -> 1265.) -- */
@media (max-width: 1099px) {
  body { grid-template-columns: 1fr; }
  #sidebar {
    position: fixed; left: 0; top: 0; z-index: 20;
    width: var(--sidebar-rong);
    transform: translateX(-100%);
    transition: transform 200ms var(--cong);
  }
  body.sidebar-mo #sidebar { transform: none; }
  #nut-menu { display: block; }
  main { padding: 20px; }
}

/* -- KPI: 5 o khi con >= 900px be ngang, 3 o o iPad doc, 2 o o dien thoai -- */
@media (min-width: 900px)  { .hang-the-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .hang-the-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
                             .hang-the-kpi + .hang-the-kpi { margin-top: 12px; } }
@media (max-width: 639px)  { .hang-the-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
                             .hang-the-kpi .the { padding: 12px 12px; }
                             .hang-the-kpi .the-so { font-size: 17px; }
                             .the-truoc { display: block; margin-top: 2px; } }

/* -- Hai bieu do xu huong: canh nhau tu 900px, xep doc duoi do -- */
@media (max-width: 899px)  { #noi-dung > .khoi-nua { grid-column: 1 / -1; } }
@media (min-width: 900px) and (max-width: 1099px) { #noi-dung > .khoi-nua { grid-column: span 3; } }

/* -- Hinh tron: 4 / 2 / 1 -- */
@media (min-width: 900px)  { .luoi-tron { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px var(--tron-cach); } }
@media (max-width: 899px)  { .luoi-tron { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; } }
@media (max-width: 559px)  { .luoi-tron { grid-template-columns: 1fr; gap: 24px; }
                             .o-tron .bd-donut { width: min(100%, 200px); } }

/* -- Bieu do cot ngang: dien thoai xep doc (ten tren, thanh + so duoi) -- */
@media (max-width: 639px) {
  .ds-hang, .khoi-nua .ds-hang, #blk-topsp .ds-hang {
    grid-template-columns: 1fr var(--ds-cot-so, 9.6rem); grid-template-areas: "ten ten" "thanh so"; gap: 4px 8px;
  }
  .ds-ten { grid-area: ten; white-space: normal; }
  .ds-cac-thanh { grid-area: thanh; }
  .ds-cac-so { grid-area: so; }
  .ds-thanh { gap: 12px; }
  .ds-so { grid-template-columns: 1fr 2.6rem; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .ds-hang, .khoi-nua .ds-hang, #blk-topsp .ds-hang { grid-template-columns: minmax(120px, 30%) 1fr var(--ds-cot-so, 9.6rem); }
}

/* -- Thanh dieu khien & dau trang tren man hep -- */
@media (max-width: 639px) {
  .khoi-dieu-khien { position: static; }         /* khong dinh: chiem 1/4 man dien thoai */
  .trang-dau { align-items: flex-start; flex-direction: column; gap: 4px; }
  .trang-dau h1 { font-size: 20px; line-height: 26px; }
  .khoi { padding: 14px; }
  main { padding: 12px; }
  #noi-dung { gap: 14px; }
  .ngay-bang { max-width: calc(100vw - 24px); }
  .ngay-so-sanh .ngay-bang { left: 0; right: auto; }
}
/* iPad doc (640..899): van 5 o mot hang cho ba hang KPI deu nhau, chu nho hon. */
@media (min-width: 640px) and (max-width: 899px) {
  .hang-the-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hang-the-kpi .the { padding: 10px 10px; }
  .hang-the-kpi .the-so { font-size: 15.5px; }
  .hang-the-kpi .the-nhan { font-size: 11.5px; }
  .the-truoc { display: block; margin-top: 2px; }
}
/* 29/09: bo loc CHON NHIEU nganh hang. Nhin y het cai <select> cu cua
   trang San pham (cung `.khoi-bo-loc`), chi khac la mo ra co o tich.
   `.trang-phai .khoi-bo-loc-boc { position: static }` o tren CU THE HON
   (0,2,0 so voi 0,1,0) nen phai viet du hai bac, neu khong bang chon neo
   theo <body> va roi tit xuong cuoi trang. `display: inline-block` de ghi
   de `inline-flex`: <details> lam flex container thi phan noi dung thanh
   mot flex item nam canh <summary>. */
/* `top/right` cua quy tac `.khoi-bo-loc-boc` (dung cho che do absolute)
   van co hieu luc khi doi sang `relative` -- thanh do DOI, day nut xuong
   16px va sang trai 18px. Phai tra ve `auto`. */
.loc-nganh, .trang-phai .khoi-bo-loc-boc.loc-nganh {
  position: relative; top: auto; right: auto; display: block; }
.loc-nganh-nut { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 500;
  cursor: pointer; list-style: none; user-select: none; }
.loc-nganh-nut::-webkit-details-marker { display: none; }
/* Mui ten xo xuong ve bang CSS, giong mui ten san co cua <select>. */
.loc-nganh-nut::after { content: ''; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--cong); }
.loc-nganh[open] > .loc-nganh-nut::after { transform: translateY(1px) rotate(225deg); }
.loc-nganh[open] > .loc-nganh-nut { border-color: var(--md-primary); color: var(--md-primary); }
.loc-nganh-nut:hover { background: var(--md-surface-variant); }

.loc-nganh-bang { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 216px; max-height: 340px; overflow: auto; padding: 6px;
  display: flex; flex-direction: column; text-align: left;
  border: 1px solid var(--md-outline-variant); border-radius: var(--r-nut);
  background: var(--md-surface); box-shadow: var(--e3); }
.loc-nganh-muc { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-nut); font-size: 13px; cursor: pointer;
  white-space: nowrap; color: var(--md-on-surface); }
.loc-nganh-muc:hover { background: var(--md-surface-variant); }
.loc-nganh-tat-ca { font-weight: 600; margin-bottom: 4px; padding-bottom: 9px;
  border-bottom: 1px solid var(--md-outline-variant); border-radius: var(--r-nut) var(--r-nut) 0 0; }
.loc-nganh-o { width: 15px; height: 15px; margin: 0; accent-color: var(--md-primary);
  flex: none; cursor: pointer; }

/* Dau hieu "khoi nay dang bi bo loc cham vao". Chi hien khi co loc. */
.chip-loc { display: inline-block; margin-bottom: 10px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--md-surface-variant); color: var(--md-on-surface-variant); }

/* 05/10: dien thoai -- nut loc goc phai de len tieu de khoi ("Top 10 tai
   khoan quang..." bi cat). Ha xuong dong rieng duoi tieu de. Tru .loc-nganh:
   no phai giu `relative` de bang chon tha xuong neo dung cho. */
@media (max-width: 639px) { .khoi-bo-loc-boc:not(.loc-nganh) { position: static; margin: -4px 0 12px; } }

/* Pheu quang cao dang cot doc (15/09). */
.pheu-cot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; height: 232px; }
.pheu-cot-mot { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.pheu-so { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 6px; white-space: nowrap; }
.pheu-khung { flex: 1 1 auto; width: 100%; display: flex; align-items: flex-end; min-height: 0; }
.pheu-thanh { width: 100%; border-radius: 8px 8px 4px 4px; transition: height 400ms var(--cong); }
.pheu-ten { margin-top: 8px; font-size: 12.5px; font-weight: 500; text-align: center; white-space: nowrap; }
.pheu-phu { font-size: 11.5px; color: var(--md-on-surface-variant); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 639px) { .pheu-cot { gap: 8px; height: 200px; } .pheu-ten, .pheu-phu { white-space: normal; } }

/* Bieu tuong SVG nho (js/bieu-tuong.js): can giua dong chu ben canh. */
.bt { display: inline-block; vertical-align: -.15em; flex: none; }
.ngay-icon, .ngay-mui, .th-mui, .loc-tick, .o-trang-thai { display: inline-flex; align-items: center; }
.ngay-dh, .dialog-dong, .khoi-bo-loc-chieu, .ct-thang .nut-nho { display: inline-flex; align-items: center; justify-content: center; }
.chip-delta .bt { margin-right: 1px; }

/* Dien thoai (B10 15/09): thanh dieu khien tung cao 148px -- nut ngay va o so
   sanh moi thu mot dong, dong tom tat an (nut da ghi ky, title co ngay). */
@media (max-width: 639px) {
  .khoi-dieu-khien { gap: 8px; padding: 12px 14px; }
  .o-dieu-khien, .o-so-sanh { width: 100%; }
  .o-loc-trang { margin-left: 0; padding-left: 0; border-left: 0; }
  .o-loc-trang .loc-nganh, .o-loc-trang .loc-nganh-nut { width: 100%; justify-content: space-between; }
  .o-dieu-khien .ngay-goc, .o-dieu-khien .ngay-nut { width: 100%; }
  .o-dieu-khien .ngay-nut { justify-content: space-between; }
  .o-so-sanh select { flex: 1 1 auto; min-width: 0; }
  .o-so-sanh .ngay-so-sanh { width: 100%; }
  .o-so-sanh .ngay-so-sanh .ngay-nut { width: 100%; }
  .tom-tat { display: none; }
}

/* 15/09: cong dang nhap -- chua dang nhap thi sidebar thanh mot the giua man
   hinh (logo + form), menu va noi dung an. Moi API deu can dang nhap. */
body.chua-dang-nhap { grid-template-columns: 1fr; }
body.chua-dang-nhap main, body.chua-dang-nhap #nut-menu,
body.chua-dang-nhap #sidebar-nav, body.chua-dang-nhap #o-giao-dien { display: none; }
body.chua-dang-nhap #sidebar {
  position: static; transform: none; height: auto; align-self: start;   /* khong keo dai theo body */
  width: min(360px, calc(100vw - 32px));
  margin: 12vh auto 0; border: 1px solid var(--md-outline-variant); border-radius: var(--r-khoi);
  box-shadow: var(--e2); background: var(--md-surface);
}
body.chua-dang-nhap .sidebar-chan { border-top: 0; padding: 16px 20px 20px; }
body.chua-dang-nhap .form-dang-nhap input, body.chua-dang-nhap .form-dang-nhap button { padding: 10px 12px; font-size: 14px; }

/* Chan sidebar: [Dang nhap / Dang xuat ...] [nut tron doi giao dien], canh theo
   HANG CUOI cua khoi dang nhap (khi da dang nhap, khoi co them the tai khoan o tren). */
.sidebar-chan-hang { display: flex; align-items: flex-end; gap: 8px; }
#o-dang-nhap { flex: 1 1 auto; min-width: 0; }
#o-giao-dien { flex: none; }
.nut-giao-dien { width: 26px; height: 26px; margin-bottom: 4px; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: var(--md-on-surface);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nut-giao-dien svg { width: 16px; height: 16px; display: block; }
.nut-giao-dien:hover { background: var(--md-surface-variant); }
.nut-giao-dien:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* Trang chi tieu (15/09): tieu de + o can TRAI; so tien nam trong hop rong co dinh,
   can phai ben trong hop -> chu "d" cac dong thang hang ma o van bat dau tu mep trai. */
.ct-bang td.ct-thuc > .ct-hop, .ct-bang td.ct-du-bao > .ct-hop { display: inline-block; min-width: 13ch; text-align: right; }
.ct-bang td.r .o-chi-tieu { justify-content: flex-start; }
.ct-bang .o-chi-tieu.ct-tu { display: inline-block; min-width: 15ch; text-align: right; }
.ct-bang .o-don-vi { display: inline-block; min-width: 1.2em; }

/* 21/09: trang Cau truc QC -- vet tang + dong bam duoc */
.vet-tang { font-size: 13px; margin-bottom: 10px; color: var(--md-on-surface-variant); }
.vet-muc { background: none; border: 0; padding: 2px 4px; font-size: 13px; color: var(--md-primary); cursor: pointer; }
.vet-muc:disabled { color: var(--md-on-surface); font-weight: 600; cursor: default; }
.bang-cuon tr.bam-duoc { cursor: pointer; }
.bang-cuon tr.bam-duoc td:first-child { color: var(--md-primary); }
.anh-qc { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.lien-ket-qc a { margin-right: 8px; color: var(--md-primary); text-decoration: none; white-space: nowrap; }
.lien-ket-qc a:hover { text-decoration: underline; }
tr.da-sua td:first-child { box-shadow: inset 3px 0 var(--md-primary); }
/* 22/09: chip ten nhan su o Cai dat TK -- trung tinh, dau x nho */
.ns-chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px; border-radius:999px;
  font-size:13px; line-height:1; background:var(--md-surface-variant, #f1f5f9); color:var(--md-on-surface); }
.ns-chip-x { border:0; background:none; padding:0 4px; font-size:14px; line-height:1; color:var(--md-on-surface-variant); cursor:pointer; border-radius:50%; }
.ns-chip-x:hover { color:var(--md-giam, #d64545); background:color-mix(in srgb, var(--md-giam, #d64545) 12%, transparent); }
.ns-hang { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.ns-hang input[type=text] { height:32px; margin:0; }
.ns-hang .nut-nho { height:32px; margin:0; }

/* 22/09: trang Chi tieu -- moi nguoi mot dong, chi so thanh cot (mockup da duyet). */
.ct-cac-bang { display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.4rem; }
.ct-bang.ct-rong th { color:var(--md-on-surface); opacity:1; background:var(--md-surface-variant, #f1f5f9);
  border-bottom:2px solid var(--ct-vien); padding:.7rem .85rem; font-size:.74rem; }
.ct-bang.ct-rong th.r { text-align:right; }
.ct-bang.ct-rong th.ct-ten { width:200px; }
.ct-bang.ct-rong th.ct-cot-rong { width:32%; }
.ct-bang.ct-rong th.ct-hep, .ct-bang.ct-rong td.ct-hep { width:1%; white-space:nowrap; }
.ct-bang.ct-rong td { padding:.6rem .85rem; }
.ct-bang.ct-rong tr.ct-team .ct-chi-so { font-weight:600; }
.ct-cell { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.ct-d1 { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ct-d1 .ct-thuc { font-size:.9rem; }
.ct-muc { font-size:.78rem; opacity:.75; display:inline-flex; align-items:baseline; gap:4px; }
.ct-muc .o-chi-tieu { gap:.25rem; }
.ct-muc .o-chi-tieu input { font-size:.78rem; padding:1px 6px; border-radius:5px;
  background:var(--md-surface-variant, #f1f5f9); border:1px solid var(--ct-vien); }
.ct-muc .o-chi-tieu input:focus { background:var(--md-surface, #fff); }
.ct-muc .o-chi-tieu input::placeholder { color:var(--md-primary); opacity:.85; }
.ct-muc .o-chi-tieu[data-dinh-dang="phan_tram"] input { width:5ch; }
.ct-muc .o-chi-tieu[data-dinh-dang="so"] input { width:11ch; }
/* 06/10: dau ✓ / "…" sau khi luu KHONG chiem cho trong hang -- truoc no
   chen vao lam ca cot dich sang, va o trong cua no day ky hieu % lech khoi
   mep phai (chu R cua tieu de CIR khong thang voi %). */
.ct-muc .o-chi-tieu { position:relative; }
.ct-muc .o-trang-thai { position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:4px; min-width:0; white-space:nowrap; }
.ct-bang .ct-muc .o-don-vi { text-align:right; }
/* So don khong co don vi: o don vi rong van chiem ~1,2em + khoang cach, day
   o nhap lech khoi mep phai (tieu de "So don" khong thang voi o). */
.ct-bang .o-don-vi:empty { display:none; }
.ct-bar-boc { width:100%; }
.ct-rong .ct-bar { height:4px; border-radius:2px; margin-top:2px; }
.ct-rong .ct-fill { border-radius:2px; }
.ct-rong .ct-pace { top:-3px; width:1.5px; height:10px; opacity:.45; }
.ct-pt { font-size:.72rem; min-height:1em; }
.ct-pt.tot { color:var(--ct-tot); } .ct-pt.canh { color:var(--ct-canh); } .ct-pt.xau { color:var(--ct-xau); }
.ct-chip.trong { opacity:1; background:var(--md-surface-variant, #f1f5f9); color:var(--md-on-surface-variant); }
.nut-nho.dang { background:var(--md-primary); color:#fff; border-color:var(--md-primary); }

/* 23/09: trang Meta > Tin nhan */
.tn-loc { display:flex; align-items:center; gap:8px; font-size:.82rem; }
.tn-loc select { padding:4px 8px; font-size:.82rem; }
.tn-bien-the { margin-top:2px; font-size:12px; color:var(--md-on-surface-variant); }
.tn-them { padding:0; border:0; background:none; font:inherit; color:var(--md-primary); cursor:pointer; white-space:nowrap; }
.tn-them:hover { text-decoration:underline; }

/* ═══ 05/10 -- DIEN THOAI (<640px), theo mockup user da duyet ═══════════
   Thanh tren (#dau-dt) + thanh duoi (#nav-duoi) thay sidebar va nut ☰;
   thanh dieu khien thanh bang tu duoi len; 4 o chinh + danh sach chi so;
   bang rong thanh the; hinh tron thanh thanh 100%; so tien viet gon. Tren
   640px khong doi gi: cac phan tu moi bi an o day. */
#dau-dt, #nav-duoi, .so-gon, .bd-thanh-dt, .dt-xong, .dt-doi { display: none; }

@media (max-width: 639px) {
  /* -- khung -- */
  #nut-menu { display: none !important; }
  main { padding: 0 12px calc(92px + env(safe-area-inset-bottom)); }
  .trang-dau h1, .trang-mo-ta { display: none; }
  .trang-dau { margin: 0; }

  #dau-dt { display: block; position: sticky; top: 0; z-index: 25; margin: 0 -12px 12px;
    background: var(--md-background); border-bottom: 1px solid var(--md-outline-variant); }
  .dt-hang { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; }
  .dt-hang .sidebar-logo { width: 32px; height: 32px; border-radius: 9px; flex: none; }
  .dt-chu { min-width: 0; flex: 1; }
  .dt-nhom { font-size: 11.5px; line-height: 1.2; font-weight: 500; color: var(--md-on-surface-variant); }
  .dt-ten { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-nut { width: 40px; height: 40px; border-radius: 12px; flex: none; padding: 0;
    border: 1px solid var(--md-outline-variant); background: var(--md-surface); color: var(--md-on-surface);
    display: flex; align-items: center; justify-content: center; }
  .dt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 12px; scrollbar-width: none; }
  .dt-chip { flex: none; height: 36px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 13px;
    font-weight: 500; border: 1px solid var(--md-outline); background: var(--md-surface); color: var(--md-on-surface);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .dt-chip::after { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
  .dt-chip-chinh { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600;
    border-color: color-mix(in srgb, var(--md-primary) 35%, transparent); }
  .dt-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 10px; scrollbar-width: none;
    border-top: 1px solid var(--md-outline-variant); background: var(--md-surface); }
  .dt-tab { flex: none; padding: 12px 10px 10px; font-size: 13.5px; font-weight: 500; white-space: nowrap;
    color: var(--md-on-surface-variant); text-decoration: none; border-bottom: 2.5px solid transparent; }
  .dt-tab.dang { color: var(--md-primary); border-bottom-color: var(--md-primary); font-weight: 650; }

  #nav-duoi { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--md-surface); border-top: 1px solid var(--md-outline-variant);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .dt-muc { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px;
    padding-top: 4px; font-size: 11px; font-weight: 600; color: var(--md-on-surface-variant); text-decoration: none; }
  .dt-bt { width: 52px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
  .dt-muc.dang { color: var(--md-primary); }
  .dt-muc.dang .dt-bt { background: var(--md-primary-container); }

  /* Lop toi phu khi mo bang loc / sidebar; bam vao (router.js) la dong. */
  body.loc-mo::after, body.sidebar-mo::after { content: ''; position: fixed; inset: 0; z-index: 35;
    background: rgba(15, 23, 42, .45); }
  body.sidebar-mo #sidebar { z-index: 40; }
  body.loc-mo, body.sidebar-mo { overflow: hidden; }

  /* -- thanh dieu khien = bang tu duoi len -- */
  #thanh-dieu-khien { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 40; margin: 0;
    max-height: 88vh; overflow-y: auto; border-radius: 22px 22px 0 0; border: 0;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    transform: translateY(105%); transition: transform 220ms var(--cong); box-shadow: var(--e3); }
  body.loc-mo #thanh-dieu-khien { transform: none; }
  #thanh-dieu-khien .ngay-bang { position: static; margin-top: 8px; box-shadow: none; max-width: none; }
  #thanh-dieu-khien .ngay-nut, #thanh-dieu-khien select { min-height: 44px; }
  #thanh-dieu-khien .ngay-ky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    min-width: 0; padding: 10px; border-right: 0; border-bottom: 1px solid var(--md-outline-variant); }
  #thanh-dieu-khien .ngay-ky button { min-height: 42px; padding: 6px 4px; text-align: center; white-space: normal;
    border: 1px solid var(--md-outline-variant); border-radius: 10px; }
  /* Bo chon ngay trong bang: ky san (luoi) + hai o ngay GOC cua may thay lich
     tu ve + so sanh 2 nut + nut Ap dung to. Nut "Xong" cu khong can nua. */
  #thanh-dieu-khien .ngay-lich, #thanh-dieu-khien .ngay-dinh,
  #thanh-dieu-khien .ngay-chan > .nut-nho,
  #thanh-dieu-khien .ngay-ss-nut button[data-v="tu_chon"] { display: none; }
  #thanh-dieu-khien .ngay-phai { padding: 12px; }
  #thanh-dieu-khien .ngay-nhap-dt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ngay-nhap-dt label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--md-on-surface-variant); }
  .ngay-nhap-dt input { width: 100%; min-height: 44px; padding: 0 10px; font: inherit; font-size: 15px;
    border: 1px solid var(--md-outline); border-radius: 12px; background: var(--md-surface); color: var(--md-on-surface); }
  #thanh-dieu-khien .ngay-ss-nut { width: 100%; }
  #thanh-dieu-khien .ngay-ss-nut button { flex: 1; height: 36px; }
  #thanh-dieu-khien .ngay-chan .nut-chinh { flex: 1; min-height: 46px; font-size: 15px; border-radius: 12px; }

  /* -- so tien viet gon (khung.js ganSoGon) -- */
  .so-day { display: none; }
  .so-gon { display: inline; }
  .xu-huong-dau .so-day { display: inline; }
  .xu-huong-dau .so-gon { display: none; }

  /* -- o KPI: 4 o chinh 2x2, con lai la dong "ten | so | chip" -- */
  .khoi:has(> .hang-the-kpi), .khoi > div:has(> .hang-the-kpi) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .hang-the-kpi, .hang-the-kpi + .hang-the-kpi { display: contents; }
  .hang-the-kpi .the { order: 1; grid-column: 1 / -1; display: grid;
    grid-template-columns: minmax(0, 1fr) auto 70px; column-gap: 10px; align-items: center;
    min-height: 44px; padding: 9px 2px; background: none; border: 0; border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--md-outline-variant); }
  .hang-the-kpi .the:hover { background: none; box-shadow: none; }
  .hang-the-kpi .the .the-nhan { grid-column: 1; grid-row: 1; font-size: 13.5px; font-weight: 500;
    color: var(--md-on-surface); white-space: normal; }
  .hang-the-kpi .the .the-so { grid-column: 2; grid-row: 1; margin: 0; font-size: 14.5px; font-weight: 650;
    text-align: right; white-space: nowrap; }
  .hang-the-kpi .the .the-delta { grid-column: 3; grid-row: 1; margin: 0; justify-self: end; }
  .hang-the-kpi .the .the-truoc { display: none; }
  .hang-the-kpi .the .the-phu { grid-column: 1 / -1; font-size: 11.5px; margin-top: 1px; }

  .hang-the-kpi .the.the-chinh { order: 0; grid-column: auto; display: block; margin-bottom: 10px;
    padding: 12px 13px; background: var(--md-the-nen); border: 1px solid var(--md-outline-variant);
    border-radius: 14px; min-width: 0; }
  .hang-the-kpi .the.the-chinh .the-nhan { font-size: 12px; color: var(--md-on-surface-variant);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hang-the-kpi .the.the-chinh .the-so { font-size: 21px; font-weight: 700; text-align: left;
    margin-top: 3px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
  .hang-the-kpi .the.the-chinh .the-delta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
  .hang-the-kpi .the.the-chinh .the-truoc { display: block; font-size: 11.5px; }
  .hang-the-kpi .the.the-chinh .the-phu { font-size: 11.5px; margin-top: 4px; }
  /* O chinh DAU TIEN to mau thuong hieu -- mat biet nhin vao dau truoc. */
  .hang-the-kpi:first-child .the-chinh:not(.the-chinh ~ .the-chinh) {
    background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
  .hang-the-kpi:first-child .the-chinh:not(.the-chinh ~ .the-chinh) :is(.the-so, .the-hoi) { color: var(--md-on-primary); border-color: currentColor; }
  .hang-the-kpi:first-child .the-chinh:not(.the-chinh ~ .the-chinh) :is(.the-nhan, .the-truoc, .the-phu) {
    color: color-mix(in srgb, var(--md-on-primary) 82%, transparent); }
  .hang-the-kpi:first-child .the-chinh:not(.the-chinh ~ .the-chinh) .chip-delta {
    color: var(--md-on-primary); background: color-mix(in srgb, var(--md-on-primary) 16%, transparent); }

  /* -- bang rong thanh THE: ten ca hang, moi cot mot o nho (nhan = data-nhan) -- */
  .bang-cuon { overflow: visible; }
  .bang-cuon table, .bang-cuon thead, .bang-cuon tbody, .bang-cuon tr, .bang-cuon td { display: block; }
  .bang-cuon thead tr { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .bang-cuon th { position: static; flex: none; padding: 0; border: 0; background: none; }
  .bang-cuon th .th-hop { border: 1px solid var(--md-outline-variant); border-radius: 999px;
    padding: 1px 2px 1px 10px; background: var(--md-surface); }
  .bang-cuon tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
  .bang-cuon tbody tr:hover { background: none; }
  .bang-cuon tbody td { min-width: 0; padding: 6px 8px; border: 0; border-radius: 10px;
    background: var(--md-the-nen); text-align: left; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
  .bang-cuon tbody td::before { content: attr(data-nhan); display: block; font-size: 11px; font-weight: 500;
    color: var(--md-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bang-cuon tbody td:first-child { grid-column: 1 / -1; padding: 0 0 2px; background: none;
    font-size: 14px; font-weight: 650; }
  .bang-cuon tbody td:first-child::before, .bang-cuon td.bang-rong::before { display: none; }
  .bang-cuon td.bang-rong { grid-column: 1 / -1; }
  .bang-cuon tr.chua-phan-bo td { background: transparent; }

  /* Bang Chi tieu (nhieu tang, o nhap) giu cuon ngang, cot ten dinh trai.
     Tru o gop cot (dong nhom "Phong Marketing"): dinh no thi mat chu. */
  /* 06/10: bang Chi tieu thanh THE (mockup da duyet): dong nhom = dai tieu
     de, moi nguoi mot the -- ten + chip trang thai o dau, moi chi so mot
     dong "nhan | thuc te / o nhap", thanh tien do ngay duoi. */
  .ct-cuon { overflow: visible; border: 0; border-radius: 0; }
  .ct-cuon table, .ct-cuon tbody, .ct-cuon tr, .ct-cuon td { display: block; width: auto; min-width: 0; }
  .ct-cuon thead { display: none; }
  .ct-cuon tr.ct-nhom td { margin: 14px 0 6px; padding: 8px 12px; border-radius: 10px; }
  .ct-cuon tr.ct-nhom:first-child td { margin-top: 0; }
  .ct-cuon tr.ct-team, .ct-cuon tr.ct-nguoi { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--ct-vien); }
  .ct-cuon tr.ct-nguoi { padding-left: 12px; }
  .ct-cuon tr > td { padding: 0; border: 0; min-width: 0; }
  .ct-cuon tr.ct-nguoi td.ct-ten { padding-left: 0; }
  .ct-cuon tr > td:last-child { grid-row: 1; grid-column: 2; }
  /* `width: auto` phai viet o day: o CIR mang .ct-hep co `width: 1%` (0,3,1). */
  .ct-cuon tr > td:not(.ct-ten):not(:last-child) { grid-column: 1 / -1; display: block; width: auto;
    margin-top: 10px; white-space: normal; }
  .ct-cuon tr > td:not(.ct-ten):not(:last-child):empty { display: none; }
  .ct-cuon tr > td:not(.ct-ten):not(:last-child)::before { content: attr(data-nhan); display: block;
    font-size: 12px; color: var(--md-on-surface-variant); margin-bottom: 2px; }
  .ct-cuon .ct-cell { min-width: 0; }
  .ct-cuon .ct-d1 { flex-wrap: wrap; justify-content: flex-end; }
  /* Bang nhap (Cai dat TK) co dong lich su long ben trong: giu cuon ngang. */
  table.bang.bang-form { display: block; overflow-x: auto; }

  /* -- hinh tron -> thanh 100% (bieu-do.js tron) -- */
  .o-tron .bd-donut { display: none; }
  .bd-thanh-dt { display: flex; gap: 2px; width: 100%; height: 12px; border-radius: 6px; overflow: hidden;
    background: var(--md-surface-variant); }
  .bd-thanh-dt i { display: block; height: 100%; }
  .luoi-tron { gap: 18px; }
  .o-tron .bd-co-cau { align-items: stretch; gap: 8px; }

  /* -- 06/10: khoi gop thanh nut chuyen (router.js TAB_DT) -- */
  .dt-doi { display: flex; grid-column: 1 / -1; gap: 2px; padding: 3px; border-radius: 12px;
    background: var(--md-surface-variant); overflow-x: auto; scrollbar-width: none; }
  .dt-doi button { flex: 1 0 auto; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px;
    background: none; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--md-on-surface-variant); cursor: pointer; }
  .dt-doi button.dang { background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--e1); }
  #noi-dung > .khoi.an-dt { display: none; }

  /* -- 06/10: Cai dat TK QC thanh THE: dong tai khoan = the (ten + chip, nguoi
     + nut moc, o ghi chu); bang moc long ben trong = khoi o nhap xep doc. -- */
  #blk-settings table.bang-form, #blk-settings table.bang-form tbody,
  #blk-settings table.bang-form tr, #blk-settings table.bang-form td {
    display: block; width: auto; min-width: 0; overflow: visible; }
  #blk-settings table.bang-form thead { display: none; }
  #blk-settings table.bang-form td { padding: 0; border: 0; }
  #blk-settings tr:has(> td:nth-child(5)) { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
  #blk-settings tr:has(> td:nth-child(5)) > td:nth-child(1) { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
  #blk-settings tr:has(> td:nth-child(5)) > td:nth-child(5) { grid-column: 2; grid-row: 1; }
  #blk-settings tr:has(> td:nth-child(5)) > td:nth-child(2) { grid-column: 1; grid-row: 2;
    font-size: 13px; color: var(--md-on-surface-variant); }
  #blk-settings tr:has(> td:nth-child(5)) > td:nth-child(3) { grid-column: 2; grid-row: 2; }
  #blk-settings tr:has(> td:nth-child(5)) > td:nth-child(4) { grid-column: 1 / -1; }
  #blk-settings tr:has(> td:nth-child(5)) input { width: 100%; min-height: 40px; }
  #blk-settings tr:has(> td[colspan]) > td { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
    background: var(--md-the-nen); }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) { display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; padding: 8px 0;
    border-bottom: 1px dashed var(--md-outline-variant); }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td:nth-child(1) { grid-column: 1 / -1; }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td:nth-child(4) { grid-column: 1 / -1; justify-self: end; }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td:nth-child(2)::before { content: 'Từ ngày'; }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td:nth-child(3)::before { content: 'Đến ngày (trống = đang giữ)'; }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) > td::before {
    display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--md-on-surface-variant); white-space: nowrap; }
  #blk-settings tr:has(> td:nth-child(4)):not(:has(> td:nth-child(5))) :is(select, input) { width: 100%; min-height: 40px; }
  #blk-settings .ns-hang input[type=text] { flex: 1 1 160px; min-height: 40px; }
  #blk-settings .bang-chan .nut-nho { width: auto; }

  /* -- danh sach thanh co nut "xem tat ca": dien thoai chi hien 5 dong dau -- */
  .ds-thanh:has(+ .bang-chan) > .ds-hang:nth-child(n+6) { display: none; }
  .bang-chan .nut-nho { width: 100%; min-height: 44px; justify-content: center; }
}