/* ===== Giao diện tối (tự sinh + viết tay) ===== */
html.dk{--mut:rgba(255,255,255,0.76);--mut2:rgba(255,255,255,0.52);--ln:rgba(255,255,255,0.084)}
html.dk #app .grain{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.05),transparent 40%),radial-gradient(circle at 80% 70%,rgba(66,202,215,.12),transparent 45%)}
html.dk #app .bat{border:1.5px solid rgba(255,255,255,0.92)}
html.dk #app .grab{background:rgba(255,255,255,0.46)}
html.dk #app .chk{border:1.5px solid rgba(255,255,255,0.57)}
html.dk #app.D .dnav .grp{color:rgba(255,255,255,0.57)}
html.dk #app .tbl th{color:rgba(255,255,255,0.69);border-bottom:1px solid rgba(255,255,255,0.108)}
html.dk #app .tbl td{border-bottom:1px solid rgba(255,255,255,0.05)}
html.dk #app .tbl tr.sel td{background:rgba(255,255,255,0.072)}
html.dk #app .tbl tr.tot td{border-top:1px solid rgba(255,255,255,0.18)}
html.dk #app .tbl tr[data-go]:hover td{background:rgba(255,255,255,0.05)}
html.dk #app .bar{background:rgba(255,255,255,0.072)}
html.dk #app .lr{border-top:1px solid rgba(255,255,255,0.06)}
html.dk #app .ico{background:rgba(255,255,255,0.084)}
html.dk #app .cnt span{background:rgba(255,255,255,0.084)}
html.dk #app .calg .c{border:1px solid rgba(255,255,255,0.084)}
html.dk #app .calg .h{color:rgba(255,255,255,0.69)}
html.dk #app .swt{background:rgba(255,255,255,0.12)}
html.dk #app [style*="background:rgba(30,42,48,0.06)"]{background:rgba(255,255,255,0.06)!important}
html.dk #app [style*="background:rgba(30,42,48,0.46)"]{background:rgba(255,255,255,0.46)!important}
html.dk #app [style*="background:rgba(30,42,48,0.21)"]{background:rgba(255,255,255,0.21)!important}
html.dk #app [style*="color:#1E2A30"]{color:#EEF3F5!important}
html.dk #app [style*="color:rgba(30,42,48,0.8)"]{color:rgba(255,255,255,0.8)!important}
html.dk #app [style*="background:rgba(30,42,48,0.096)"]{background:rgba(255,255,255,0.096)!important}
html.dk #app [style*="background:rgba(30,42,48,0.084)"]{background:rgba(255,255,255,0.084)!important}
html.dk #app [style*="background:#1E2A30"]{background:#EEF3F5!important}
html.dk #app [stroke="rgba(30,42,48,0.63)"]{stroke:rgba(255,255,255,0.63)}
html.dk #app [fill="rgba(30,42,48,0.8)"]{fill:rgba(255,255,255,0.8)}
html.dk #app [stroke="rgba(30,42,48,0.06)"]{stroke:rgba(255,255,255,0.06)}
html.dk #app [fill="rgba(30,42,48,0.86)"]{fill:rgba(255,255,255,0.86)}
html.dk #app [stroke="rgba(30,42,48,0.05)"]{stroke:rgba(255,255,255,0.05)}
html.dk #app [fill="rgba(30,42,48,0.92)"]{fill:rgba(255,255,255,0.92)}
html.dk #app [stroke="rgba(30,42,48,0.18)"]{stroke:rgba(255,255,255,0.18)}
html.dk #app [fill="#1E2A30"]{fill:#EEF3F5}
html.dk #app [fill="rgba(30,42,48,0.05)"]{fill:rgba(255,255,255,0.05)}
html.dk #app [fill="rgba(30,42,48,0.06)"]{fill:rgba(255,255,255,0.06)}
html.dk #app [stroke="rgba(30,42,48,0.15)"]{stroke:rgba(255,255,255,0.15)}
html.dk #app [stroke="rgba(30,42,48,0.69)"]{stroke:rgba(255,255,255,0.69)}
html.dk #app [stroke="#1E2A30"]{stroke:#EEF3F5}
html.dk #app [stroke="rgba(30,42,48,0.084)"]{stroke:rgba(255,255,255,0.084)}
html.dk #app [stroke="rgba(30,42,48,0.86)"]{stroke:rgba(255,255,255,0.86)}
html.dk #app [fill="rgba(30,42,48,0.78)"]{fill:rgba(255,255,255,0.78)}
html.dk #app [stroke="rgba(30,42,48,0.46)"]{stroke:rgba(255,255,255,0.46)}
html.dk #app [stroke="rgba(30,42,48,0.072)"]{stroke:rgba(255,255,255,0.072)}
html.dk #app [fill="rgba(30,42,48,0.83)"]{fill:rgba(255,255,255,0.83)}
/* --- viết tay: kính nước 3D tối --- */
html.dk{color-scheme:dark}
html.dk,html.dk body{background:#080B0D;color:#EEF3F5}
html.dk #app{background:linear-gradient(165deg,#0E1316 0%,#0A0D10 55%,#07090B 100%) #080B0D;color:#EEF3F5;--ink:#EEF3F5;--mut:#A9B6BC;--mut2:#94A2A9;--ln:rgba(255,255,255,.09)}
html.dk #app::before{background:
  radial-gradient(460px 380px at 6% 120px,rgba(66,202,215,.16),transparent 70%),
  radial-gradient(420px 360px at 96% 260px,rgba(185,167,255,.11),transparent 70%),
  radial-gradient(480px 400px at 82% 1000px,rgba(94,242,181,.09),transparent 70%),
  radial-gradient(420px 360px at 12% 1340px,rgba(255,210,122,.07),transparent 70%),
  radial-gradient(640px 520px at 50% 640px,rgba(255,255,255,.035),transparent 75%);
 background-size:100% 1600px;background-repeat:repeat-y}
html.dk #app .gl{color:#EEF3F5;
 background:linear-gradient(165deg,rgba(44,52,58,.96) 0%,rgba(26,31,35,.95) 50%,rgba(30,36,41,.96) 100%);
 border-color:rgba(255,255,255,.08);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 -14px 28px -18px rgba(66,202,215,.14),0 1px 1px rgba(0,0,0,.4),0 8px 18px -8px rgba(0,0,0,.55),0 28px 50px -20px rgba(0,0,0,.75)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
 html.dk #app .gl{background:linear-gradient(165deg,rgba(46,54,60,.66) 0%,rgba(24,29,33,.56) 50%,rgba(30,36,41,.62) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
 html.dk #app .tb.gl{background:linear-gradient(180deg,rgba(40,47,53,.86),rgba(20,24,28,.80))}
 html.dk #app .dnav.gl{background:linear-gradient(170deg,rgba(40,47,53,.74),rgba(18,22,26,.64) 60%,rgba(28,34,38,.70))}
}
html.dk #app .gl::before{background:
  linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.06) 10px,rgba(255,255,255,0) 44px),
  linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.045) 40%,rgba(255,255,255,0) 52%),
  radial-gradient(120% 70% at 100% 100%,rgba(66,202,215,.06),transparent 60%)}
html.dk #app .gl::after{background:linear-gradient(150deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.07) 32%,rgba(66,202,215,.22) 64%,rgba(255,255,255,.16) 100%)}
html.dk #app .tb.gl{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.8)}
html.dk #app .sheet.gl,html.dk #app .modal.gl,html.dk #app .modal,html.dk #app .sheet{background:rgba(22,27,31,.97)!important}
html.dk #app .dim{background:rgba(0,0,0,.6)}
html.dk #app .gl2{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}
html.dk #app .gl .gl2{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border-color:rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
html.dk #app .cs,html.dk #app .mut{color:#A9B6BC}
html.dk #app .tb div,html.dk #app .dnav .it{color:#B4C0C6}
html.dk #app .tb div:not(.on) svg *,html.dk #app .dnav .it:not(.on) svg *{stroke:#B4C0C6}
html.dk #app.D .dnav .grp{color:#8F9DA4}
html.dk #app .seg div{color:#C3CED3}
html.dk #app .chipbar a,html.dk #app .chipbar div:not(.on){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#DCE5E8}
html.dk #app .tag{background:rgba(255,210,122,.12);color:#FFD27A;border-color:rgba(255,210,122,.4)}
html.dk #app .tag.est{background:rgba(94,242,181,.12);color:#7FF5C4;border-color:rgba(94,242,181,.35)}
html.dk #app .pill.nt{background:rgba(255,255,255,.12);color:#EEF3F5}
html.dk #app .bd.ok{background:rgba(94,242,181,.13);color:#7FF5C4;border-color:rgba(94,242,181,.32)}
html.dk #app .bd.wn{background:rgba(255,210,122,.13);color:#FFD27A;border-color:rgba(255,210,122,.34)}
html.dk #app .bd.dn{background:rgba(255,122,107,.14);color:#FF9C90;border-color:rgba(255,122,107,.36)}
html.dk #app .bd.tq{background:rgba(66,202,215,.14);color:#7FE7F0;border-color:rgba(66,202,215,.36)}
html.dk #app .bd.mt{background:rgba(255,255,255,.07);color:#D3DCE0;border-color:rgba(255,255,255,.14)}
html.dk #app .bd.vi{background:rgba(185,167,255,.14);color:#CFC3FF;border-color:rgba(185,167,255,.36)}
html.dk #app .up:not(.pill){color:#5EF2B5}html.dk #app .dn:not(.pill){color:#FF9C90}
html.dk #app .swt{background:rgba(255,255,255,.16)}html.dk #app .swt.on{background:#0C7A87}
html.dk #app .btn.gl2,html.dk #app .btn:not(.pri):not(.gl){color:#EEF3F5;
 background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 4px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.4),0 8px 18px -8px rgba(0,0,0,.6)}
html.dk #app .ib.gl,html.dk #app .ibs.gl{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.35),0 10px 20px -8px rgba(0,0,0,.6)}
html.dk #app .gl .tbl th{border-bottom-color:rgba(255,255,255,.10);color:#A9B6BC}
html.dk #app .gl .tbl td{border-bottom-color:rgba(255,255,255,.06)}
html.dk #app .gl .tbl tr[data-go]:hover td,html.dk #app .tbl tr.sel td{background:rgba(255,255,255,.05)}
html.dk #app .dnav img[src*="logo-white"]{filter:none;opacity:1}
html.dk #app input,html.dk #app select,html.dk #app textarea{background:rgba(255,255,255,.06);color:#EEF3F5;border-color:rgba(255,255,255,.14)}
html.dk #app input::placeholder,html.dk #app textarea::placeholder{color:#8F9DA4}
/* nút đổi giao diện */
#app .thm{display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
#app .thm svg{display:block}
html:not(.dk) #app .thm .mo{display:none}html.dk #app .thm .su{display:none}
html.dk #app [fill="rgba(255,255,255,.96)"]{fill:rgba(28,34,39,.97);stroke:rgba(255,255,255,.14)}

/* nhãn trục SVG dùng màu mực động (template) */
html.dk #app svg text[fill^="rgba(30,42,48"]{fill:rgba(238,243,245,.8)}
html.dk #app svg text[fill="rgba(30,42,48,1)"]{fill:#EEF3F5}
/* tab/chip đang chọn: chữ trắng trên nền ngọc */
html.dk #app .on{color:#fff!important}
/* ô lịch nhiệt Đặt phòng sắp tới */
html.dk #app .c[style*="background:rgba("] .mut{color:rgba(240,248,245,.88)!important}
html.dk #app .c[style*="background:rgba("] [style*="#FFD27A"]{color:#FFE7B3!important}
/* nhãn XLSX & số đỏ trong bảng phòng */
html.dk #app [style*="#2FBF71,#1B8B4F"]{color:#06281A}
html.dk #app [style*="color:#C8412F"]{color:#FF8E7E!important}
html.dk #app [style*="color:rgba(30,42,48,0.52)"]{color:rgba(238,243,245,.6)!important}
html.dk #app .chk.on{color:#06333B!important}
html.dk #app .tag.est{color:#B6FFE0}