/* =====================================================================
   common.css — dùng chung cho trang chủ + 2 viewer
   (1) nút Trang chủ / Sáng-Tối / Phím   (2) chế độ trình chiếu   (3) màn hình đen/trắng, bảng phím
   (4) CHẾ ĐỘ SÁNG: ghi đè biến màu và các màu cố định trong nong.css / coc.css
   ===================================================================== */
.btn.tb{white-space:nowrap;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:5px;font-size:12.5px}
.btn.tb span{font-weight:600}
a.btn:hover{text-decoration:none}
.btn.tb.ico span{display:none}
.btn.tb.ico{font-size:15px;padding:5px 10px}
.brand a.brandlink{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #ff9800;outline-offset:2px}
button:focus-visible,a:focus-visible{outline-offset:1px}

#blankScreen{position:fixed;inset:0;z-index:9999;display:none;cursor:none}
#keyHelp{position:fixed;inset:0;z-index:9000;background:rgba(3,7,20,.6);display:none;place-items:center;backdrop-filter:blur(3px)}
#keyHelp.show{display:grid}
#keyHelp .kh{background:var(--panel);color:var(--tx);border:2px solid var(--gold);border-radius:14px;padding:18px 22px;max-width:min(640px,92vw);box-shadow:0 20px 60px rgba(0,0,0,.45)}
#keyHelp b{display:block;color:var(--gold);font-size:16px;margin-bottom:10px}
#keyHelp table{width:100%;border-collapse:collapse;font-size:14px}
#keyHelp th{width:42%;text-align:left;color:var(--gold);white-space:nowrap;padding:5px 12px 5px 0;border-bottom:1px solid var(--line)}
#keyHelp td{text-align:left;padding:5px 0;border-bottom:1px solid var(--line)}
#keyHelp tbody tr{opacity:1;transform:none}
#keyHelp small{display:block;margin-top:10px;color:var(--mut)}

header.top{flex-wrap:wrap;row-gap:6px}
.brand{flex:0 0 auto}
.tools{flex:1 1 auto}
.brand b{white-space:normal}

/* ---------- chế độ trình chiếu (toàn màn hình / máy chiếu): chữ & nút lớn hơn ---------- */
body.present #panel{zoom:1.14}
body.present .lbl{font-size:13.5px}
body.present .btn.round{width:50px;height:50px}
body.present .btn.round.big{width:60px;height:60px;font-size:20px}
body.present .dot{width:30px;height:30px;font-size:13px}
body.present .hint{display:none}
body.present #slider{height:10px}
@media (pointer:coarse){.btn.round{width:46px;height:46px}}

/* ======================= CHẾ ĐỘ SÁNG ======================= */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eef1f7; --bg2:#e3e8f2; --panel:#ffffff; --panel2:#f1f4fa; --line:rgba(20,35,80,.16);
  --tx:#14213d; --mut:#47557d; --gold:#9a5600; --red:#c81e33; --blue:#0a6fa3; --orange:#c76400;
  --teal:#0b7f74; --green:#17803a; --purple:#5b3fc4;
}
:root[data-theme="dark"]{color-scheme:dark}
[data-theme=light] body{background:var(--bg)}
[data-theme=light] .top{background:linear-gradient(180deg,#ffffff,#eef2fa);border-bottom-color:#e0a100}
[data-theme=light] .brand b{color:#8a4b00}
[data-theme=light] .logo{color:#8a4b00}
[data-theme=light] .btn{background:rgba(20,35,80,.05)}
[data-theme=light] .btn:hover,[data-theme=light] .seg button:hover{background:rgba(20,35,80,.12)}
[data-theme=light] .btn.gold,[data-theme=light] .slidebadge,[data-theme=light] .btn.round.big,[data-theme=light] .dot.on{background:#ffc928;color:#1a1a1a;border-color:#d9a400}
[data-theme=light] .btn.gold:hover{filter:brightness(.96)}
[data-theme=light] #stage{background:radial-gradient(1200px 700px at 35% 30%,#ffffff 0%,#e6ecf8 55%,#cfd8ec 100%)}
[data-theme=light] #summary{background:rgba(255,255,255,.88);box-shadow:0 2px 10px rgba(20,35,80,.12)}
[data-theme=light] .phead{background:linear-gradient(180deg,#fff 80%,rgba(255,255,255,0))}
[data-theme=light] #stepTitle{color:#8a4b00}
[data-theme=light] #stepIntro,[data-theme=light] .ln.show .nm,[data-theme=light] .ckt{color:var(--tx)}
[data-theme=light] .ln{background:rgba(20,35,80,.03)}
[data-theme=light] .ln.show .rs{background:rgba(255,190,40,.18);color:#7a4300}
[data-theme=light] td{border-bottom-color:rgba(20,35,80,.1)}
[data-theme=light] table.stl th,[data-theme=light] table.stl td{border-color:rgba(20,35,80,.22)}
[data-theme=light] table.stl td.lay,[data-theme=light] table.stl td.sum,[data-theme=light] table.stl tfoot td{color:#8a4b00}
[data-theme=light] .ck.ok{background:rgba(23,128,58,.08)} [data-theme=light] .ck.bad{background:rgba(200,30,51,.08)}
[data-theme=light] .chip.ok{color:var(--green);background:rgba(23,128,58,.1);border-color:rgba(23,128,58,.4)}
[data-theme=light] .chip.bad{color:var(--red);background:rgba(200,30,51,.1);border-color:rgba(200,30,51,.4)}
[data-theme=light] .timeline{background:linear-gradient(0deg,#eef2fa,#ffffff);border-top-color:var(--line)}
[data-theme=light] #slider{background:linear-gradient(90deg,#e0a100 var(--pct,0%),rgba(20,35,80,.16) var(--pct,0%))}
[data-theme=light] #slider::-webkit-slider-thumb{border-color:#e0a100;box-shadow:0 0 0 6px rgba(224,161,0,.2)}
[data-theme=light] .dot{background:rgba(20,35,80,.05)}
[data-theme=light] .dot:hover{color:#000}
[data-theme=light] .dot.done{background:rgba(224,161,0,.2);color:#7a4300;border-color:rgba(224,161,0,.55)}
[data-theme=light] #drawer{background:#fff;box-shadow:-10px 0 30px rgba(20,35,80,.2)}
[data-theme=light] .fld input,[data-theme=light] .fld select,[data-theme=light] .cutbox select,[data-theme=light] .lyr input,[data-theme=light] .lyr select,[data-theme=light] .lt input{background:#fff;color:var(--tx)}
[data-theme=light] .cutbox{background:rgba(20,35,80,.04)}
[data-theme=light] .lyr{background:rgba(20,35,80,.03)}
[data-theme=light] .epc .bg{fill:rgba(20,35,80,.04)} [data-theme=light] .epc .gx{stroke:rgba(20,35,80,.12)}
[data-theme=light] .epc .tk{fill:#47557d} [data-theme=light] .epc .ax,[data-theme=light] .epc .lg,[data-theme=light] .epc .sn{fill:#14213d}
/* nhãn 3D: giữ nền tối đặc để chữ màu luôn rõ trên nền sáng */
[data-theme=light] .lbl{background:rgba(10,20,52,.92);box-shadow:0 2px 8px rgba(20,35,80,.3)}
[data-theme=light] .lbl.soft,[data-theme=light] .lbl.node{background:rgba(10,20,52,.82)}
[data-theme=light] .lbl.sec{background:rgba(10,20,52,.92)}
[data-theme=light] .lbl.layer{background:rgba(70,46,16,.92)}
[data-theme=light] .lbl.water{background:rgba(14,66,140,.92)}
/* bản vẽ chi tiết cọc */
[data-theme=light] .pdov{background:rgba(20,35,80,.5)}
[data-theme=light] .pdbox{background:#fff}
[data-theme=light] .pdh{background:#f1f4fa}
[data-theme=light] .pdh b{color:#8a4b00}
[data-theme=light] .pdfig{background:#cfd5df}
[data-theme=light] .pdbtn{background:rgba(20,35,80,.05)}
[data-theme=light] .pdbtn:hover{background:rgba(20,35,80,.12)}
[data-theme=light] .pdbtn.on{background:rgba(255,190,40,.2);border-color:#c88a00}
[data-theme=light] .pdbtn i,[data-theme=light] .pdcard h3 i{background:#fff}
[data-theme=light] #keyHelp{background:rgba(20,35,80,.4)}

/* nhãn 3D luôn nền tối → giữ màu chữ sáng của chế độ tối */
[data-theme=light] .lbl{--gold:#ffd23f;--green:#7bd88f;--red:#ff5d6c;--blue:#4cc9f0;--orange:#ff9f1c;--tx:#e8eeff;--mut:#9fb0d8;color:#eaf1ff}

/* ---------- cỡ chữ & thanh chia ---------- */
#panel{zoom:calc(var(--fs,1) * var(--fsx,1))}
body.present #panel{zoom:calc(var(--fs,1) * 1.14)}
#summary{zoom:var(--lfs,1)}
.lbl{font-size:calc(12px * var(--lfs,1))}
.lbl.layer{font-size:calc(11.5px * var(--lfs,1))}
.lbl.node{font-size:calc(10.5px * var(--lfs,1))}
.lbl.sec{font-size:calc(13px * var(--lfs,1))}
.lbl.tag{font-size:calc(12px * var(--lfs,1))}
body.present .lbl{font-size:calc(13.5px * var(--lfs,1))}
main{grid-template-columns:minmax(0,1fr) 10px var(--pw,minmax(380px,34vw))!important}
#splitter{cursor:col-resize;background:var(--line);position:relative;z-index:6;touch-action:none;display:grid;place-items:center;transition:background .15s}
#splitter i{display:block;width:4px;height:46px;border-radius:3px;background:var(--mut);opacity:.7}
#splitter:hover,body.dragging #splitter{background:rgba(255,201,40,.45)}
body.dragging{user-select:none;cursor:col-resize}
body.dragging #stage canvas,body.dragging #stage .css2d{pointer-events:none}
#fontBar{position:fixed;top:64px;right:12px;z-index:30;width:min(430px,94vw);background:var(--panel);color:var(--tx);border:2px solid var(--gold);border-radius:12px;padding:10px 14px;box-shadow:0 14px 40px rgba(0,0,0,.45);display:none}
#fontBar.open{display:block}
#fontBar .fb-h{display:flex;justify-content:space-between;align-items:center;color:var(--gold);margin-bottom:6px}
#fontBar .fb-r{display:grid;grid-template-columns:1fr auto 120px auto 46px;gap:6px;align-items:center;margin:7px 0;font-size:12.5px}
#fontBar .fb-r:last-of-type{grid-template-columns:1fr auto auto auto}
#fontBar .fb-r span{color:var(--mut)}
#fontBar .btn{padding:3px 9px;font-size:12.5px}
#fontBar em{font-style:normal;font-weight:700;text-align:right;color:var(--gold)}
#fontBar small{color:var(--mut);display:block;margin-top:6px;line-height:1.5}
@media (max-width:980px){#splitter{display:none}main{grid-template-columns:1fr!important}}
#fontBar kbd{display:inline-block;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;font:600 11px/1.5 monospace}

/* nút ẩn/hiện bảng thông tin trên 3D */
.hud{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sumToggle{pointer-events:auto;cursor:pointer;font:600 calc(12px*var(--lfs,1)) inherit;font-family:inherit;color:var(--text,#dbe6ff);background:rgba(7,14,36,.72);border:1px solid var(--line,rgba(255,255,255,.25));border-radius:999px;padding:3px 11px;backdrop-filter:blur(6px)}
.sumToggle:hover{border-color:var(--gold,#ffc928)}
.hud.sum-hidden #summary{display:none}
[data-theme=light] .sumToggle{background:rgba(255,255,255,.9);color:#1c2a55}

/* ---- Menu "Nhãn ▾": ẩn/hiện từng nhóm nhãn 3D (js/common/labels.js) ---- */
.top{position:relative;z-index:15}            /* menu thả xuống của thanh công cụ nằm trên nhãn 3D */
#stage{z-index:0}                             /* gom z-index của nhãn CSS2D vào trong khung 3D */
.lblmenu{position:relative;display:flex;align-items:center;gap:4px}
.lblmenu>.chk{gap:0}
.lblmenu .lmbtn{background:none;border:0;border-bottom:1px dashed transparent;color:var(--mut);font:inherit;font-size:12.5px;line-height:1.2;padding:1px 0;cursor:pointer;white-space:nowrap}
.lblmenu .lmbtn:hover,.lblmenu.open .lmbtn{color:var(--gold);border-bottom-color:var(--gold)}
.lblmenu .lmpop{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:250px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--gold);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.4);flex-direction:column;gap:7px}
.lblmenu.open .lmpop{display:flex}
.lblmenu .lmpop .chk{color:var(--tx);white-space:nowrap}
.lblmenu .lmh{font-weight:700;font-size:12.5px;color:var(--gold);padding-bottom:5px;border-bottom:1px solid var(--line)}
.lblmenu .lmb{display:flex;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.lblmenu .lmb button{flex:1;background:rgba(255,255,255,.06);color:var(--tx);border:1px solid var(--line);border-radius:6px;padding:4px 6px;font:inherit;font-size:12px;cursor:pointer}
.lblmenu .lmb button:hover{border-color:var(--gold)}
.lblmenu .lmk{font-size:11.5px;color:var(--mut)}
[data-theme=light] .lblmenu .lmpop{border-color:#e0a100;box-shadow:0 14px 40px rgba(20,35,80,.18)}
[data-theme=light] .lblmenu .lmh{color:#8a4b00}
[data-theme=light] .lblmenu .lmb button{background:rgba(20,35,80,.04)}
body.hide-dim .lbl[data-cat=dim],body.hide-note .lbl[data-cat=note],body.hide-layer .lbl[data-cat=layer],
body.hide-water .lbl[data-cat=water],body.hide-load .lbl[data-cat=load],body.hide-calc .lbl[data-cat=calc],
body.hide-rebar .lbl[data-cat=rebar]{display:none!important}