/* ===== Bản thử: nền xám trắng + khối kính trắng ===== */
:root{--ink:#1E2A30;--ink2:#5E6B73}
html,body{background:#F3F5F7;color:#1E2A30}
#app{background:#F3F5F7;color:#1E2A30;--mut:#5E6B73;--mut2:#5E6B73;--ln:rgba(30,42,48,.1)}
#app .blob,#app .grain{display:none}
/* Kính trắng (nền trắng đặc làm dự phòng khi không có backdrop-filter) */
#app .gl{background:#fff;border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(16,40,50,.04),0 8px 24px rgba(16,40,50,.07);color:#1E2A30}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 #app .gl{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
}
#app .gl2{background:rgba(30,42,48,.035);border-color:rgba(30,42,48,.08)}
#app .modal{background:#fff!important}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){#app .modal{background:rgba(255,255,255,.9)!important}}
#app .dim{background:rgba(20,35,42,.35)}
#app .cs,#app .mut{color:#56636A}
/* Thanh điều hướng & menu: chữ tối, mục đang chọn xanh ngọc */
#app .tb div,#app .dnav .it{color:#5E6B73}
#app .tb .on,#app .dnav .it.on{background:#0C7A87;color:#fff;box-shadow:0 4px 12px rgba(12,122,135,.25)}
#app .tb .on svg *,#app .dnav .it.on svg *{stroke:#fff}
#app.D .dnav .grp{color:#5E6B73}
#app .seg div{color:#3C4A52}#app .seg div.on{background:#0C7A87;color:#fff}
#app .chipbar a,#app .chipbar div{background:#fff;border-color:rgba(30,42,48,.12);color:#3C4A52}
#app .chipbar .on{background:#0C7A87;color:#fff;border-color:#0C7A87}
#app .tag{background:#FFF4DC;color:#8A5A00;border-color:#F0C56A}
#app .tag.est{background:#E3F7EE;color:#0E7A52;border-color:#9FDFC2}
#app .pill.nt{background:rgba(30,42,48,.08);color:#1E2A30}
/* Nhãn trạng thái: giữ tông màu, chữ đậm để đọc được trên nền trắng */
#app .bd.ok{background:#E3F7EE;color:#0E7A52;border-color:#9FDFC2}
#app .bd.wn{background:#FFF4DC;color:#8A5A00;border-color:#F0C56A}
#app .bd.dn{background:#FFE9E6;color:#B83A2A;border-color:#F5B3A9}
#app .bd.tq{background:#E0F5F7;color:#0B6F7A;border-color:#97D9E0}
#app .bd.mt{background:#F0F2F4;color:#3C4A52;border-color:#D9DEE2}
#app .bd.vi{background:#EEEAFF;color:#5B46B8;border-color:#C9BEF5}
#app .swt.on{background:#0C7A87}#app .swt::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
#app .btn.pri{background:linear-gradient(180deg,#0E8796,#0A6873);color:#fff;box-shadow:0 8px 20px rgba(12,122,135,.28)}
/* Chữ dùng màu nhấn (inline): đậm hơn để đạt độ tương phản, giữ cùng sắc */
html:not(.dk) #app [style*="color:#5EF2B5"],html:not(.dk) #app [style*="color:var(--up)"]{color:#0A6643!important}
html:not(.dk) #app [style*="color:#FFD27A"],html:not(.dk) #app [style*="color:var(--gold)"]{color:#5E3D00!important}
html:not(.dk) #app [style*="color:#7FE7F0"],html:not(.dk) #app [style*="color:#42CAD7"]{color:#0B6F7A!important}
html:not(.dk) #app [style*="color:#FF7A6B"],html:not(.dk) #app [style*="color:#FF9C90"],html:not(.dk) #app [style*="color:var(--dn)"]{color:#B83A2A!important}
html:not(.dk) #app [style*="color:#B9A7FF"],html:not(.dk) #app [style*="color:#CFC3FF"]{color:#5B46B8!important}
html:not(.dk) #app text[fill="#5EF2B5"]{fill:#0E7A52}html:not(.dk) #app text[fill="#FFD27A"]{fill:#8A5A00}html:not(.dk) #app text[fill="#7FE7F0"],html:not(.dk) #app text[fill="#42CAD7"]{fill:#0B6F7A}html:not(.dk) #app text[fill="#FF7A6B"]{fill:#B83A2A}html:not(.dk) #app text[fill="#B9A7FF"]{fill:#5B46B8}
html:not(.dk) #app .up:not(.pill){color:#0E7A52}html:not(.dk) #app .dn:not(.pill){color:#B83A2A}
#app .pill.dn,#app.D .dnav .it .n{background:#CC4433;color:#fff}
html:not(.dk) #app [style*="color:#7FF0DA"]{color:#0B6F7A!important}
html:not(.dk) #app [style*="color:#FF9F8F"],html:not(.dk) #app [style*="color:#ff9c90"]{color:#B83A2A!important}
#app .sheet.gl{background:#fff!important}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){#app .sheet.gl{background:rgba(255,255,255,.94)!important}}
#app .dim{background:rgba(20,35,42,.28)}
#app .c[style*="background"] [style*="opacity"]{opacity:1!important}
#app .dnav img[src*="logo-white"]{filter:brightness(0) saturate(100%);opacity:.82}

/* ===== Kính nước 3D (liquid glass) ===== */
html,body,#app{background:#EEF2F5}
/* Một lớp nền duy nhất: vài đốm sáng rất nhẹ để kính có cái khúc xạ */
/* (lớp nền cuộn cùng trang, không dùng position:fixed: đỡ phải vẽ lại kính khi cuộn trên iPhone) */
#app::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(460px 380px at 6% 120px,rgba(66,202,215,.40),transparent 70%),
  radial-gradient(420px 360px at 96% 260px,rgba(185,167,255,.28),transparent 70%),
  radial-gradient(480px 400px at 82% 1000px,rgba(94,242,181,.28),transparent 70%),
  radial-gradient(420px 360px at 12% 1340px,rgba(255,210,122,.26),transparent 70%),
  radial-gradient(640px 520px at 50% 640px,rgba(255,255,255,.75),transparent 75%);
 background-size:100% 1600px;background-repeat:repeat-y}
#app{background:linear-gradient(165deg,#F6F8FA 0%,#ECF1F4 55%,#E7EDF1 100%) #EEF2F5}
:where(#app .gl){position:relative}
#app .gl{isolation:isolate;
 background:linear-gradient(165deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.80) 45%,rgba(255,255,255,.86) 100%);
 border:1px solid rgba(255,255,255,.55);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,1),
  inset 0 -1px 0 rgba(255,255,255,.6),
  inset 0 0 0 1px rgba(255,255,255,.35),
  inset 0 0 14px rgba(255,255,255,.55),
  inset 0 -12px 26px -16px rgba(12,122,135,.16),
  0 1px 1px rgba(16,40,50,.06),
  0 8px 16px -8px rgba(16,40,50,.14),
  0 28px 50px -20px rgba(16,40,50,.28)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 #app .gl{background:linear-gradient(165deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.56) 45%,rgba(255,255,255,.66) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(185%);backdrop-filter:blur(18px) saturate(185%)}
}
/* Dải sáng bóng ở mép trên + vệt khúc xạ chéo (dưới chữ) */
#app .gl::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:
  linear-gradient(180deg,rgba(255,255,255,1) 0,rgba(255,255,255,.55) 10px,rgba(255,255,255,.12) 30px,rgba(255,255,255,0) 54px),
  linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.38) 40%,rgba(255,255,255,0) 52%),
  radial-gradient(120% 70% at 100% 100%,rgba(66,202,215,.07),transparent 60%)}
/* Viền phản quang dạng gradient */
#app .gl::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
 background:linear-gradient(150deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.35) 30%,rgba(12,122,135,.16) 62%,rgba(255,255,255,.9) 100%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Lớp phủ (modal, sheet) đặc hơn để dễ đọc */
#app .sheet.gl,#app .modal.gl{background:rgba(255,255,255,.95)!important}
/* Thanh tab (mobile) & menu (desktop): kính dày hơn */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 #app .tb.gl{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.74));-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%)}
 #app .dnav.gl{background:linear-gradient(170deg,rgba(255,255,255,.78),rgba(255,255,255,.58) 60%,rgba(255,255,255,.70))}
}
#app .tb.gl{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6),0 2px 4px rgba(16,40,50,.06),0 18px 40px -12px rgba(16,40,50,.30)}
/* Mục đang chọn / nút chính: kính xanh ngọc 3D */
#app .tb .on,#app .dnav .it.on,#app .seg div.on,#app .chipbar .on,#app .btn.pri{position:relative;color:#fff;
 background:
  linear-gradient(180deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 46%),
  linear-gradient(180deg,#108A97 0%,#0B727D 50%,#075862 100%);
 border-color:rgba(255,255,255,.35);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 4px rgba(0,40,48,.25),inset 0 0 0 1px rgba(255,255,255,.14),0 2px 4px rgba(12,122,135,.20),0 10px 22px -6px rgba(12,122,135,.45);
 text-shadow:0 1px 1px rgba(0,50,58,.35)}
/* Nút phụ: kính trắng 3D (không blur, nhẹ máy) */
#app .btn.gl2,#app .btn:not(.pri):not(.gl){color:#1E2A30;
 background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.62));
 border:1px solid rgba(255,255,255,.8);
 box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(16,40,50,.06),0 1px 2px rgba(16,40,50,.08),0 8px 18px -8px rgba(16,40,50,.22)}
#app .btn{transition:transform .12s ease}
#app .btn:active{transform:translateY(1px) scale(.985)}
/* Ô con bên trong thẻ: kính mỏng, không blur */
#app .gl .gl2{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,40,50,.05)}
/* Nút tròn (chuông...) */
#app .ib.gl,#app .ibs.gl{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.6),0 2px 4px rgba(16,40,50,.06),0 10px 20px -8px rgba(16,40,50,.25)}
/* Bảng: dòng phân cách mảnh, không blur từng dòng */
#app .gl .tbl th{border-bottom-color:rgba(30,42,48,.10)}
#app .gl .tbl td{border-bottom-color:rgba(30,42,48,.06)}
#app .gl .tbl tr[data-go]:hover td{background:rgba(255,255,255,.55)}

/* ==== text-fit fixes (audit 31/10) ==== */
#app.D .dmain div[style*="flex:1"]{min-width:0}
#app.D .tbl td,#app.D .tbl th{padding-left:8px;padding-right:8px}
#app .nw{white-space:nowrap}
#app.D .tbl.fit{font-size:12.5px}#app.D .tbl.fit td,#app.D .tbl.fit th{padding-left:6px;padding-right:6px}
#app.D .tbl.fit2 th{font-size:10.5px;letter-spacing:0}
#app.M .g2fit svg{max-width:100%;height:auto}
#app.M .hd{gap:8px}#app.M .hd>div:first-child{min-width:0}
#app.M .hd h1{font-size:clamp(23px,7.3vw,28px)}#app.M .hd .sub{font-size:clamp(13px,3.9vw,15px)}
@media (max-width:380px){#app.M .hd .thm{width:36px!important;height:36px!important;border-radius:12px!important}#app.M .hd>div:last-child{gap:6px!important}}

@media (max-width:400px){#app.M .row{gap:8px}#app.M .row .nm+div svg{width:62px}#app.M .row .vl{width:90px}}
/* menu trái PC: mỗi mục một dòng */
#app .dnav .it{gap:10px;padding-left:10px;padding-right:10px;white-space:nowrap}
#app .dnav .it .nwr,#app .dnav .it>span{white-space:nowrap}
#app .dnav .it>svg{flex:none}
#app .dnav .it>span{min-width:0;letter-spacing:-.15px}
#app .dnav .it{font-size:13px;gap:9px;padding-left:10px;padding-right:9px}
#app.D .dnav{padding-left:10px;padding-right:10px}
#app.D .dnav .it .n{padding:1px 6px;margin-left:auto}
#app.D .dnav .it{gap:8px;padding-right:7px}
#app.D .dnav .it .n{font-size:10px;padding:1px 5px;flex:none}
#app.D .dnav .it{letter-spacing:-.2px}