/* Giao dien dung chung cho ban web va ban Windows. Nap tu ca hai host qua duong dan
   _content/BridgeComponentPositioning.SharedUI/app.css */

:root {
    --bg: #f4f6f8;
    --surface: #ffffff;
    --border: #d8dee6;
    --text: #1c2430;
    --muted: #64748b;
    --accent: #0f6fc5;
    --accent-soft: #e5f0fb;
    --deck: #b4c0cc;
    --deck-edge: #5d6b7a;
    --girder: #1668c2;
    --support: #d4620a;
    --bearing: #1f7a3d;
    --danger: #b91c1c;
    --road: #6f7d8a;
    --centre: #e53935;
    --girder-bad: #c62828;
    /* Truc tim dam: net dut do. Phai khop voi COLOR.trucDam trong view3d.js. */
    --girder-axis: #d32f2f;
    --grid: #bcc4cd;

    /* Khung nhin 3D. Bo mau nay phai khop voi COLOR trong view3d.js — o mau trong cay doi tuong
       va hinh ve phai cung mot mau; doi mot ben ma quen ben kia thi chu giai noi sai.

       Khung nhin la nen **sang**, theo cac phan mem xem mo hinh BIM. --viewer-bg la nen phia sau
       canvas (chi thay luc chua ve xong), --viewer-chrome la nen cua dai cong cu, --viewer-panel
       la nen cua bang doi tuong ben canh. */
    --viewer-bg: #eef1f4;
    --viewer-chrome: #f4f6f8;
    --viewer-panel: #ffffff;
    --viewer-line: #dde2e8;
    --viewer-text: #1c2430;
    --viewer-muted: #64748b;
    /* Nen cua dai header. Toi hon --text de dai header la mot mat phang rieng, khong phai
       chu dam tren nen trang. */
    --ink: #101d2c;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: "Segoe UI", Roboto, system-ui, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
}

code {
    font-family: Consolas, "Cascadia Mono", monospace;
    background: var(--accent-soft);
    padding: 1px 4px;
    border-radius: 3px;
}

.muted {
    color: var(--muted);
}

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ============================================================
   Header: mot dai toi lam moc cho ca man hinh.

   Ba cot noi dung deu la the trang tren nen xam — khong co mot dai toi o tren thi ca man hinh
   noi lenh benh, mat khong biet bat dau doc tu dau. Toi cung la mau chrome cua AutoCAD va
   Civil 3D, dung cai cua so nguoi dung mo canh phan mem nay ca ngay.
   ============================================================ */

.app > header {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--ink);
    color: #e8eef6;
}

.thuong-hieu {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* Logo tren dai header toi, dat tren mot o trang bo tron.

   File .png hien tai co kenh alpha nen tha thang len nen toi cung khong vo, nhung o trang van
   dang gia: bo mau TEDI ve de dat tren nen trang — dat len nen xanh than thi xanh chim han vao
   nen con do thi choi len, hai mau khong con can nhau nhu ban goc. O trang cung dung chung ngon
   ngu voi tab loai cau dang chon, va giu cho ban logo nao khong trong suot cung dung. */
.logo {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #fff;
    border-radius: 8px;
}

.logo-anh {
    display: block;
    /* Ban ngang (mark trai, chu TEDI phai), ti le 1680x900. Cao 40px thi rong 75px —
       vua voi mot dai header cao 68px. File da co san le trang quanh hinh nen o trang
       ben ngoai khong can dem them nhieu. */
    height: 40px;
    width: auto;
}

/* Mat file anh thi bo o trang di va ve chu — chu trang tren nen toi doc duoc ngay. */
.logo .logo-chu {
    display: none;
}

.logo.thieu-anh {
    padding: 0;
    background: none;
}

.logo.thieu-anh .logo-anh {
    display: none;
}

.logo.thieu-anh .logo-chu {
    display: inline;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #fff;
}

/* Vach ngan dat o ten ung dung chu khong o logo: the nao thi no cung dung mot cho, du dang hien
   logo hay dang lui ve chu. */
.ten-ung-dung {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid rgba(232, 238, 246, 0.28);
}

.app > header h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #fff;
}

.app > header p {
    margin: 2px 0 0;
    font-size: 12px;
    color: rgba(232, 238, 246, 0.62);
}

.header-phai {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Tab loai cau: chim tren nen toi, sang len khi dang chon. */
.tabs.loai-cau button.tab {
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(232, 238, 246, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 238, 246, 0.18);
}

.tabs.loai-cau button.tab:hover {
    color: #fff;
    border-color: rgba(232, 238, 246, 0.45);
}

.tabs.loai-cau button.tab.active {
    color: var(--ink);
    background: #fff;
    border-color: #fff;
}


nav {
    display: flex;
    gap: 4px;
}

button {
    font: inherit;
    cursor: pointer;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 7px 14px;
}

button:hover {
    border-color: var(--accent);
}

button.tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

button.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    width: 100%;
    margin-top: 8px;
}

main {
    display: flex;
    flex: 1;
    gap: 16px;
    padding: 16px 24px;
    align-items: flex-start;
}

.panel {
    flex: 0 0 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.panel h2 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
}

.panel label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted);
}

.panel input {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
}

.panel input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

.errors {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--danger);
    font-size: 12px;
}

.errors ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.content {
    flex: 1;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.content h3 {
    margin: 20px 0 8px;
    font-size: 14px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}

.cell-label {
    font-size: 12px;
    color: var(--muted);
}

.table-wrap {
    overflow-x: auto;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

thead th {
    position: sticky;
    top: 0;
    background: var(--bg);
    text-align: left;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

tbody tr:hover td {
    background: var(--accent-soft);
}

th.num, td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- O mau dung trong cay doi tuong cua khung 3D --- */

.swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    border-radius: 2px;
}

.swatch.girder { background: var(--girder); }
.swatch.support { background: var(--support); }
.swatch.bearing { background: var(--bearing); border-radius: 50%; }

footer {
    padding: 12px 24px 20px;
    font-size: 12px;
}

@media (max-width: 900px) {
    main {
        flex-direction: column;
    }

    .panel {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ---- Man hinh chay thu file LandXML ---- */

main.full > .content {
    flex: 1 1 100%;
}

.workbench {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.file-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.file-bar .file-name {
    font-size: 13px;
    color: var(--muted);
}

.two-col {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.two-col > .panel {
    flex: 1 1 320px;
}

.two-col > .panel select,
.two-col > .panel input {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
}

table.grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

table.grid th,
table.grid td {
    padding: 5px 8px;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.grid th:first-child,
table.grid td:first-child {
    text-align: left;
}

table.grid thead th {
    position: sticky;
    top: 0;
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

table.grid tbody tr.bad {
    background: #fef2f2;
    color: var(--danger);
}

table.grid input {
    width: 100%;
    padding: 3px 6px;
    font: inherit;
    text-align: right;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Bo hai mui tang / giam cua o nhap so — o trong bang nhin ra la o chu thuan, giong DataGrid.
   Van giu kieu `number` de ban phim so va phep kiem so cua trinh duyet con nguyen; chi bo cai
   ve ra. Hai mui do trong bang thi vua chiem cho vua khong ai bam, ma bam vao lai lo doi so. */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
}

/* Bang trong khung cuon xep kieu **DataGrid**: bang phu kin be rong khung, cac cot chia nhau cho
   theo noi dung va tu co gian khi khung rong hep di. Con thieu cho thi khung tu cuon ngang.

   Truoc day bang lay `width: max-content` va tung o nhap tu gian vua chu (`field-sizing`). Nhu vay
   moi o mot be rong khac nhau, nhin ra la mot dam o roi chu khong phai mot bang. Con so dai da
   duoc lam tron ba chu so khi hien nen khong con can cho o nhap phinh ra vua 14 ky tu.

   Chi ap trong `.table-wrap`: bang o cho khac (khung xem, bang cloud) van an theo be rong san co. */
.table-wrap table.grid {
    width: 100%;
    table-layout: auto;
}

/* O nhap phu kin o cua no, dung nhu mot o DataGrid. `min-width: 0` de cot con hep lai duoc khi
   khung bi keo hep; `border-box` de vien va le nam trong be rong do chu khong lam tran ra. */
.table-wrap table.grid input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* O nhap chu (ma tru, kich thuoc be) can trai cho de doc; con so thi can phai theo luat chung. */
.table-wrap table.grid input.ma {
    text-align: left;
}

button.link {
    padding: 2px 6px;
    font-size: 12px;
    color: var(--danger);
    background: none;
    border: none;
    cursor: pointer;
}

button.link:disabled {
    color: var(--muted);
    cursor: default;
}

/* Dai QA nam tren nen toi cua header. Chi chu "QA: ..." an mau trang thai; may con so sai so
   giu mau sang mo — chung la so de doi chieu, khong phai canh bao. */
.qa-bar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: rgba(232, 238, 246, 0.72);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(232, 238, 246, 0.16);
}

.qa-bar strong {
    font-weight: 600;
}

.qa-bar.qa-pass strong { color: #6ee7a8; }
.qa-bar.qa-blocked strong { color: #fcd34d; }
.qa-bar.qa-fail strong { color: #fca5a5; }

/* Trang thai xau thi vien an theo, de nhin thay ngay ca khi khong doc chu. */
.qa-bar.qa-blocked {
    border-color: rgba(252, 211, 77, 0.45);
}

.qa-bar.qa-fail {
    border-color: rgba(252, 165, 165, 0.5);
    background: rgba(185, 28, 28, 0.22);
}


.tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.three-col {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.three-col > .panel {
    flex: 1 1 280px;
}

.three-col > .panel select,
.three-col > .panel input {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.three-col > .panel table.grid input {
    margin-top: 0;
    padding: 3px 6px;
    text-align: right;
}

.swatch.deck-edge {
    background: none;
    border-top: 2px solid var(--deck-edge);
    height: 0;
    align-self: center;
}

/* ---- Phoi canh 3D ---- */

/* Khung ve chiem het cho con lai; canvas do three.js tu tao ben trong. */
.view3d {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Vien va bo goc gio nam o `.view3d-main` boc ca dai cong cu lan khung ve, nen o day khong dong
   vien nua — dong hai lan la thanh hai net ke sat nhau. */
.view3d-canvas {
    /* Moc cho nhan chu cua phep bat diem: nhan la the con cua o nay va dat theo toa do tuyet doi,
       khong co moc thi no chay ve goc trang. */
    position: relative;
    flex: 1;
    min-height: 420px;
    background: var(--viewer-bg);
    overflow: hidden;
    /* Chuot phai de doi cho, khong phai de mo menu cua trinh duyet. */
    touch-action: none;
}

/* Nhan chu di theo diem bat duoc: ten kieu bat, va khoang cach khi dang do do.

   Ve bang the HTML chu khong ve vao canh 3D: chu trong canh phai lam thanh anh dan, moi lan doi
   so la lam lai anh — trong khi cai nhan nay doi theo tung nhip chuot chay. Chan chuot han
   (`pointer-events: none`) vi no nam ngay canh con tro: an chuot vao no thi khung ve mat chuot
   ngay giua luc dang do. */
.view3d-bam-nhan {
    position: absolute;
    z-index: 3;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #00897b;
    border-radius: 3px;
    color: #00695c;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
}

/* Ky hieu truy bat: hinh vuong la dinh, tam giac la trung diem, dong ho cat la diem tren canh,
   vong tron la diem tu do tren mat — dung quy uoc cua AutoCAD.

   `margin` keo the lui nua be ngang de tam hinh trung dung diem: nho vay chi phai dat `left` va
   `top` bang toa do that cua diem, khong phai tru di o moi cho goi den.

   Co co dinh 18 px, khong to theo do phong: ky hieu truy bat la mot dau chi cho, phong to lam no
   che mat chinh cai cho no dang chi. */
.view3d-bam-dau {
    position: absolute;
    z-index: 3;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    color: #00897b;
    pointer-events: none;
}

.view3d-bam-dau svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ky hieu cua diem da chot: cung bo hinh, doi mau sang mau duong do. */
.view3d-bam-dau.da-do {
    color: #c2185b;
}

/* Diem da ra sau may anh: phep chieu lat nguoc nen ky hieu se chi vao mot cho khong co gi. */
.view3d-bam-dau.sau-lung {
    display: none;
}

/* Nhan cua phep do da chot: to theo mau cua duong do (hong) chu khong theo mau bat diem (luc lam).
   Do xong roi re chuot tim diem sau thi ca hai nhan cung hien mot luc — cung mau thi khong doc ra
   dau la con so vua do duoc, dau la cai dang nham toi. */
.view3d-bam-nhan.da-do {
    border-color: #c2185b;
    color: #ad1457;
    font-weight: 600;
}

/* Ten mo tru, ghim ngoai dau vach tim tru.

   Khong co khung vien va khong co nen nhu hai nhan kia: hinh ve co hang chuc vach tim tru, moi
   vach mot the co vien la ca dai duong toan hop chu. Chi to mau tim tru va vien chu bang bong
   trang, du de doc khi chu nam de len mat ban hay len luoi nen.

   `translate(-50%, -50%)` de tam the trung dung cho da tinh, nen phia JS chi phai dat `left` va
   `top` bang toa do do duoc. */
.view3d-ten-tru {
    position: absolute;
    z-index: 3;
    color: var(--support);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    transform: translate(-50%, -50%);
    text-shadow:
        0 0 3px #fff, 0 0 3px #fff, 1px 1px 0 #fff, -1px -1px 0 #fff,
        1px -1px 0 #fff, -1px 1px 0 #fff;
}

/* Vach da ra sau may anh: phep chieu lat nguoc nen ten se nhay sang phia doi dien man hinh. */
.view3d-ten-tru.sau-lung {
    display: none;
}

.view3d-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Bang mau cua chu giai khung 3D. Mau ve that do three.js to trong `view3d.js`; hai cho phai
   doi cung nhau moi lan doi mau. */
.swatch.deck3d {
    background: var(--deck);
    border: 1px solid var(--deck-edge);
}

.swatch.girder-bad { background: var(--girder-bad); }

/* Truc tim dam: net **dut** do, dung nhu trong khung ve. O mau phai dut theo vi day la dau hieu
   duy nhat phan biet no voi tim tuyen — hai duong cung mau do, chi khac lien va dut. */
.swatch.girder-axis {
    background: none;
    border-top: 2px dashed var(--girder-axis);
    height: 0;
    align-self: center;
}

/* Duong ke chi mep duong doc tu file, ve thanh net chu khong phai o vuong: no la mot duong
   trong hinh, khong phai mot mang mau. */
.swatch.road {
    background: none;
    border-top: 2px solid var(--road);
    height: 0;
    align-self: center;
}

/* Tim tuyen: net lien nhu mep duong, nhung to mau do de ba duong doc tu file khong lan nhau — do
   la tim, xam xanh la hai mep. Do nay sang hon do cua dam sai chieu dai (--girder-bad), va hai thu
   khong the nham: mot cai la duong keo dai hang km, cai kia la mot khoi hop trong long cau. */
.swatch.centre {
    background: none;
    border-top: 2px solid var(--centre);
    height: 0;
    align-self: center;
}

/* Tim tru: vach ngang ngan, dung mot vach dung de goi dung hinh cua no trong khung ve. */
.swatch.pier {
    background: none;
    border-left: 2px solid var(--support);
    width: 0;
    height: 12px;
    margin-left: 5px;
    margin-right: 10px;
    align-self: center;
}

/* ---- Bo cuc khung nhin 3D ---- */

/* Khung ve va cay doi tuong nam canh nhau; man hinh hep thi cay tut xuong duoi khung ve. */
/* `gap` 6 px de khoang ho quanh dai keo cay giong het khoang ho quanh dai keo cot nhap: 6 px ve
   phia khung ve, 0 px ve phia bang cay — tuc dai luon dan sat cai bang no dang keo. */
.view3d-body {
    display: flex;
    flex: 1;
    gap: 6px;
    min-height: 0;
}

/* Cot ben trai: dai cong cu xep tren, khung ve chiem het phan con lai.
   Vien va bo goc dat o day chu khong o tung phan ben trong, de dai cong cu va khung ve nam trong
   cung mot khoi lien — trong cac phan mem xem mo hinh chung la mot cua so, khong phai hai manh
   roi. `overflow: hidden` de goc canvas bi bo theo bo goc cua khoi. */
.view3d-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--viewer-panel);
    border: 1px solid var(--viewer-line);
    border-radius: 6px;
}

/* San ve: khung ve cong ban dieu huong noi ben tren. Ban dieu huong la em ruot cua the chua
   canvas chu khong phai con — xem chu thich trong PositioningView3d.razor. */
.view3d-stage {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.view3d-stage > .view3d-canvas {
    flex: 1;
    min-width: 0;
}

/* ---- Ban dieu huong o goc tren ben phai khung ve ---- */

.view3d-nav {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    /* Mo bot cho khoi che hinh, ro han len khi ro chuot vao. */
    opacity: 0.72;
    transition: opacity 120ms;
}

.view3d-nav:hover {
    opacity: 1;
}

/* Khoi ViewCube: vong bon huong o giua, nut nha keo ra goc tren trai, hai mui quay ra goc tren
   phai, mui mo danh sach ra goc duoi phai — dung bo tri cua ban dieu huong Autodesk. Bon goc dat
   bang toa do tuyet doi trong khoi nay chu khong xep hang: xep hang thi vong bi day lech tam. */
.nav-cube {
    position: relative;
    width: 108px;
    /* Cao hon be rong: hang nut tren (nha, vua khit, hai mui quay) chiem 22 px rieng, vanh tron
       nam duoi hang do chu khong duoc chen len — chen len la chu N bi nut che mat. */
    height: 122px;
}

.nav-nha {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.nav-nha .icon {
    width: 14px;
    height: 14px;
}

.nav-quay {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 2px;
}

/* Mui mo danh sach huong nhin, nam goc duoi phai vong — chinh la cai mui nho trong ban Autodesk. */
.nav-them {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 10px;
}

.nav-them.on {
    color: var(--accent);
    border-color: var(--accent);
}

/* Danh sach huong nhin, buong xuong duoi mui. */
.nav-menu {
    position: absolute;
    top: 124px;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    min-width: 76px;
    padding: 3px;
    gap: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--viewer-line);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.nav-menu button {
    justify-content: flex-start;
    padding: 4px 6px;
    background: none;
    border: 0;
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* Vong tron nen, chia 3x3 de bon huong tu vao dung cho ma khong phai tinh toa do tay. Vong nam
   giua khoi, chua het chieu ngang de con cho cho bon nut goc. */
.nav-vong {
    position: absolute;
    /* 22 px cua hang nut tren cong 4 px cach ra: chu N o dinh vanh moi khong bi che. */
    top: 26px;
    left: 14px;
    display: grid;
    grid-template-columns: 22px 36px 22px;
    grid-template-rows: 22px 36px 22px;
    place-items: center;
    border-radius: 50%;
}

/* Vanh tron: mot vien day 11 px ve bang the gia, khong phai mot dia dac. Bon chu nam dung tren
   vanh do — o luoi hai ben rong 22 px nen tam moi chu cach me 11 px, tuc giua vanh. */
.nav-vong::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 11px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.5);
}

.nav-huong.bac { grid-area: 1 / 2; }
.nav-huong.tay { grid-area: 2 / 1; }
.nav-tren { grid-area: 2 / 2; }
.nav-huong.dong { grid-area: 2 / 3; }
.nav-huong.nam { grid-area: 3 / 2; }



/* Thanh zoom nam ngang: hai nut o hai dau, ray va tay nam o giua — xem chu thich trong razor ve
   chuyen vi sao tay nam la can lay chu khong phai thanh truot that. */
.nav-zoom {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 3px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--viewer-line);
}

/* Ray: mot net ngang mo, ke giua chieu cao de tay nam nhin nhu dat tren ray. */
.nav-zoom-ray {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 18px;
    cursor: ew-resize;
    touch-action: none;
}

.nav-zoom-ray::before {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    height: 1px;
    background: var(--viewer-line);
}

.nav-zoom-nam {
    position: relative;
    width: 11px;
    height: 13px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid var(--viewer-line);
}

.nav-zoom-ray:hover .nav-zoom-nam,
.nav-zoom-ray.dang-keo .nav-zoom-nam {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Ngam vua khit: nam ngay canh nut nha o hang tren, cung co cung kieu voi no. */
.nav-vuakhit {
    position: absolute;
    top: 0;
    left: 26px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
}

.nav-vuakhit .icon {
    width: 14px;
    height: 14px;
}

.view3d-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    color: var(--viewer-muted);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--viewer-line);
    border-radius: 4px;
    cursor: pointer;
}

.view3d-nav button:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: #fff;
}

.nav-quay button {
    width: 22px;
    height: 22px;
    font-size: 13px;
}

/* Hai nut zoom nam trong khoi da co nen va vien roi, nen tu chung khong dong vien nua. */
.nav-zoom button {
    width: 20px;
    height: 20px;
    font-size: 14px;
    background: none;
    border: 0;
}

/* Bon chu nam trong vanh: chi la chu, khong nen khong vien — dung nhu ban ViewCube. */
.nav-huong {
    position: relative;
    width: 22px;
    height: 22px;
    background: none;
    border: 0;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

.nav-huong:hover {
    color: var(--accent);
    background: none;
    border: 0;
}

/* O giua vanh: mat "TOP" cua ViewCube — hinh vuong to hon, co mot vien trong long de nhin ra la
   mot mat khoi chu khong phai mot cai nut phang. */
.nav-tren {
    position: relative;
    width: 34px;
    height: 34px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #64748b;
    background: rgba(148, 163, 184, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 2px;
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55);
}

.nav-tren:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Chu cho trinh doc man hinh, khong hien ra. */
.chu-an {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.layer-tree {
    flex: 0 0 var(--cay-rong, 220px);
    overflow-y: auto;
    padding: 10px 12px;
    color: var(--viewer-text);
    background: var(--viewer-panel);
    border: 1px solid var(--viewer-line);
    border-radius: 6px;
    font-size: 12px;
}

.layer-tree h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
}




.layer-group {
    margin-bottom: 10px;
}

/* Ten nhom trong cay la nut gap. Gap khac an: gap chi don bang cho gon mat, con con mat ben canh
   moi that su tat lop khoi hinh ve. */
.ten-nhom {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.ten-nhom:hover {
    color: var(--accent);
}

/* Mui ten co be ngang co dinh: doi giua ▾ va ▸ ma de no tu co thi ca hang nhich mot chut. */
.ten-nhom .mui {
    width: 9px;
    font-size: 9px;
    color: var(--viewer-muted);
}

.layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 0;
    color: var(--viewer-muted);
}

/* Nut con mat. Vuong, khong nen, khong vien: trong mot cot doc gom muoi may hang thi muoi may
   cai khung nut la muoi may vach ke, doc rat roi — chi de rieng hinh con mat. */
.layer-row .mat {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.layer-row .mat:hover:not(:disabled) {
    color: var(--accent);
    background: var(--accent-soft);
}

.layer-row .mat:disabled {
    cursor: default;
}

/* Lop dang an: con mat mo di, de doc mot luot la thay ngay nhung hang nao dang tat. */
.layer-row .mat.an {
    opacity: 0.4;
}

.layer-row .icon {
    width: 14px;
    height: 14px;
}

.layer-row.head {
    color: var(--text);
    font-weight: 600;
}

/* Dong con thut vao cho thay no thuoc ve nhom ben tren. */
.layer-group > .layer-row:not(.head) {
    padding-left: 18px;
}

.layer-row .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* So phan tu: de nhat va don ve ben phai, doc luot ten lop khong bi vuong mat. */
.layer-row .dem {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.layer-row .mot-phan {
    flex: 0 0 auto;
    font-weight: 400;
    font-size: 11px;
    opacity: 0.75;
}

/* Lop khong co gi de ve: van hien de tra loi cau "sao khong thay?", nhung khong bam duoc. */
.layer-row.trong {
    opacity: 0.5;
    cursor: default;
}

.layer-tree .note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
}

/* Cua so hep thi cay xep xuong duoi khung ve. Nguong de thap: cay da keo hep lai duoc va an di
   duoc, nen giu no ben phai co loi hon la day xuong duoi som. Xep doc roi thi then keo khong
   con nghia gi — no doi be rong, ma luc nay cay chiem het be rong. */
@media (max-width: 900px) {
    .view3d-body {
        flex-direction: column;
    }

    .layer-tree {
        flex: 0 0 auto;
        max-height: 200px;
    }

    .ranh-cay {
        display: none;
    }
}

/* Kho du an tren Supabase */
.panel.cloud {
    flex: 1 1 100%;
    width: 100%;
}

.cloud-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.cloud-head h2 {
    margin: 0;
}

.cloud h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
}

.cloud-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cloud-grid > label {
    flex: 1 1 200px;
    margin-bottom: 6px;
}

.cloud label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 10px;
}

.cloud select,
.cloud input[type="text"],
.cloud input[type="email"],
.cloud input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
}

.cloud-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 4px 0 12px;
}

.cloud-message {
    margin: 10px 0 0;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.cloud .three-col > section {
    flex: 1 1 280px;
    min-width: 0;
}

.cloud table.grid tbody tr.picked {
    background: var(--accent-soft);
}

.cloud table.grid tbody tr.qa-pass td:first-child {
    color: #15803d;
}

.cloud table.grid tbody tr.qa-blocked td:first-child {
    color: #b45309;
}

.cloud table.grid tbody tr.qa-fail td:first-child {
    color: var(--danger);
}

/* --- Cua dang nhap (LoginGate) --- */

.gate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.gate-card {
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 24px;
}

.gate-card h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.gate-card p {
    margin: 6px 0 18px;
    font-size: 13px;
}

.gate-card label {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--muted);
}

.gate-card input {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 7px 9px;
    font: inherit;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
}

.gate-card input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

/* Goc duoi ben phai: cho biet dang la ai, kem nut thoat. Mo bot cho khoi che giao dien, ro han
   len khi ro chuot vao — nhung o muc mo nhat email van phai doc duoc, vi do moi la ly do co
   cai thanh nay. */
.gate-account {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    opacity: 0.75;
}

.gate-account:hover {
    opacity: 1;
}

/* Email dai thi cat bot chu khong day nut thoat ra khoi man hinh. */
.gate-email {
    color: var(--muted);
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gate-signout {
    padding: 3px 10px;
    font-size: 12px;
    color: var(--muted);
}

/* ============================================================
   Bo cuc ba cot: nhap - phoi canh - toa do.

   Ba viec nay phai nhin duoc cung luc. Truoc day toa do nam chung mot dai tab voi phoi canh,
   nen doi mot tham so xong muon xem so thi phai roi mat hinh ve, ma dung cai can la thay ca hai
   doi cung nhau.

   Man hinh cao dung bang mot man hinh that, roi cho tung cot tu cuon lay — de ca trang cuon thi
   keo bang so ben phai la hang tham so ben trai troi mat.
   ============================================================ */

.app {
    height: 100vh;
}

main.split {
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}


/* --- cot nhap --- */

.inputs {
    flex: 0 0 var(--cot-rong, 440px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.inputs.an {
    display: none;
}

/* Ranh keo: mot dai doc **trong suot** rong 8 px nam giua hai vung, khong ve net gi nen nhin ra
   chi la khoang trong san co. Chi khi tro chuot den moi hien mot vach mo — du de biet cho nay
   nam duoc, ma khong bay ra them mot cot thu ba tren man hinh.

   Rong 8 px va nam ngoai thanh cuon cua cot: de chong len thanh cuon thi cuon khong duoc nua. */
.ranh-keo {
    position: relative;
    flex: 0 0 8px;
    align-self: stretch;
    cursor: col-resize;
    touch-action: none;

    /* Dan sat ngay canh cot no dieu khien, khong de ho mot khoang trong nao: le am tru dung bang
       `gap` cua khung chinh. Khong chong len chinh thanh cuon — chong vao thi cot khong cuon
       duoc nua — nhung dung ngay sat ben ngoai no. */
    margin-left: -6px;
}

/* Vach mo hien khi tro chuot den: dat sat me trai cua dai, tuc ngay canh thanh cuon, chu khong
   nam giua dai — giua dai thi nhin ra nhu mot duong ke rieng dung lo lung trong khoang trong. */
.ranh-keo::before {
    content: "";
    position: absolute;
    inset: 0 6px 0 0;
    border-radius: 2px;
    background: transparent;
}

.ranh-keo:hover::before,
.ranh-keo.dang-keo::before {
    background: var(--accent);
}

/* Dai keo cay lat nguoc lai: no nam ben trai cai no keo, nen phai dan sat me **trai** cua bang
   cay va vach mo hien o me phai cua dai.

   Phai ghi bang hai lop (`.ranh-keo.ranh-cay`) chu khong mot lop: khoi `.ranh-keo` o tren dung
   sau khoi cua cay trong file nay, mot lop thi no ghi de mat va dai lai dan sang phia khung ve —
   dung cai loi "de nham ben" da thay. */
.ranh-keo.ranh-cay {
    margin-left: 0;
    margin-right: -6px;
}

.ranh-keo.ranh-cay::before {
    inset: 0 0 0 6px;
}

/* Ranh ngoai: dai hep sat me man hinh, chi de chua nut thu / mo. Rong dung bang nut nen nhin ra
   khong co gi ngoai cai nut do. */
.ranh-ngoai {
    position: relative;
    flex: 0 0 16px;
    align-self: stretch;
}

/* Nut thu / mo: mot o vuong nho o dinh ranh ngoai, kieu nut gap bang cua cac phan mem xem mo
   hinh — khong phai mot vien tron noi len giua man hinh.

   Dat o ranh ngoai chu khong dat trong cot: nam trong cot thi thu cot lai la nut mat theo, khong
   con cho nao bam de mo ra. Va khong dat tren dai keo: o do no troi theo be rong cot. */
.nut-ranh {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 22px;
    padding: 0;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.nut-ranh:hover {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* Lop phu ca man hinh trong luc re then keo. Trong suot nhung nam tren tat ca, nen su kien chuot
   khong roi vao khung ve va con tro giu nguyen hinh mui keo ngang. */
.keo-lop {
    position: fixed;
    inset: 0;
    z-index: 90;
    cursor: col-resize;
    user-select: none;
}

/* Ba cot cua man hinh chinh de sat nhau hon mac dinh: giua cot nhap va khung ve da co ranh keo
   8 px, cong hai khoang 16 px nua thi ho ra ca mot dai trong nhin nhu cot thu ba.

   Le trai / phai thu tu 24 px con 8 px vi da them ranh ngoai 16 px moi ben: tong khoang tu me
   cua so vao den noi dung giu nguyen nhu truoc. */
main.split {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

.inputs .group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

/* Phan dang thu gon: chi con dong tieu de.

   An theo "moi thu tru h2" chu khong boc ruot vao mot the rieng: boc lai la sua ca nam phan
   trong cot nhap, ma cai duy nhat can biet o day la "phan nay dang dong". */
.inputs .group.thu {
    padding-bottom: 10px;
}

.inputs .group.thu > *:not(h2) {
    display: none;
}

.inputs .group.thu h2 {
    margin-bottom: 0;
}

/* Ca dong tieu de la nut thu gon: mot mui ten 8 px la dich qua nho de nham bang chuot. */
.thu-nhom {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.thu-nhom:hover {
    color: var(--accent);
}

/* Mui ten co be ngang co dinh: doi giua ▾ va ▸ ma de no tu co thi ca dong chu nhich mot chut,
   nhin ra la hang tieu de rung moi lan bam. */
.thu-nhom .mui {
    width: 10px;
    font-size: 10px;
    color: var(--muted);
}

.inputs .group h2 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}

.inputs .group > p.muted {
    margin: 0 0 10px;
    font-size: 12px;
}

.inputs label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--muted);
}

/* Chi cac o dung rieng moi keo het chieu ngang. O trong bang mo tru nam trong <td>
   chu khong nam trong <label>, nen giu nguyen kieu cua table.grid. */
.inputs label input,
.inputs label select {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding: 5px 7px;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 5px;
}

.inputs label input:focus,
.inputs label select:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

/* O chon file that bi an di; ca cai nhan nay dong vai tro cai nut. */
.file-button {
    display: block;
    width: 100%;
    padding: 7px 14px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    cursor: pointer;
}

.file-button:hover {
    filter: brightness(1.08);
}

.file-button input[type="file"] {
    display: none;
}

.source-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
}

.source-line .file-name {
    word-break: break-all;
}

.source-line button.link {
    color: var(--accent);
}

/* Bang hai cot nhan - gia tri cho phan tuyen doc tu file. */
.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    margin: 0;
    font-size: 12px;
}

.facts dt {
    color: var(--muted);
}

.facts dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.grid.compact th,
table.grid.compact td {
    padding: 3px 4px;
}

table.grid.compact input {
    padding: 2px 4px;
}

/* --- khung xem --- */

.preview {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.preview-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Trong khung xem thi bang tu cao het cho con lai, khong can gioi han 60vh nua. */
.preview-body .table-wrap {
    max-height: none;
}

/* --- cot toa do ra --- */

.output {
    flex: 0 0 420px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.output-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Bang trong cot nay tu cao het cho con lai, khong can gioi han 60vh nua. */
.output-body .table-wrap {
    max-height: none;
    border: 0;
    border-radius: 0;
}

/* So dong dinh kem ten tab. Chu so nho, don sang phai, khong tranh cho voi ten bang. */
/* Cot toa do hep hon khung xem nhieu, nen tab o day thu lai cho bon bang lot mot hang. */
.output .tabs button.tab {
    padding: 6px 10px;
    font-size: 12px;
}

.tabs button.tab .dem {
    margin-left: 6px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
}

/* Kho tren cloud khong phai toa do ra. Day sang phai va tach bang mot khoang de doc ra la
   no thuoc nhom khac, du van dung chung dai tab. */
.tabs button.tab.kho {
    margin-left: auto;
}

/* Toa do doc bang mat, doi chieu theo cot. Chu deu net cho lech mot chu so la thay ngay —
   font-variant-numeric mot minh khong lam duoc, vi dau phay va dau tru van hep hon chu so. */
.output-body table.grid tbody td {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-size: 12px;
}

/* Cot dau la ma diem, khong phai so — de nguyen chu thuong cho de doc va ghim lai khi cuon
   ngang, vi bang toa do rong hon cot nay nhieu. */
.output-body table.grid tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    font-family: inherit;
    background: var(--surface);
}

.output-body table.grid tbody tr:hover td:first-child {
    background: var(--accent-soft);
}

.output-body table.grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
}

/* Chua du rong cho ba cot: cot toa do xuong duoi, hai cot tren giu nguyen canh nhau. Tu day tra
   viec cuon lai cho ca trang, vi khong con nhet du ba cot vao mot man hinh nua. */
@media (max-width: 1280px) {
    .app {
        height: auto;
        min-height: 100vh;
    }

    main.split {
        flex-wrap: wrap;
        overflow: visible;
    }

    .inputs {
        flex: 0 0 var(--cot-rong, 300px);
        overflow: visible;
    }

    .preview {
        flex: 1 1 420px;
        min-height: 560px;
        overflow: visible;
    }

    .output {
        flex: 1 1 100%;
        max-height: 60vh;
    }
}

/* Man hinh hep thi xep chong ca ba cot. */
@media (max-width: 900px) {
    main.split {
        flex-direction: column;
    }

    .inputs {
        flex: none;
    }

    .preview {
        min-height: 480px;
    }

    .output {
        max-height: none;
        overflow: visible;
    }
}

/* ============================================================
   Nguoi dung tat hieu ung chuyen dong thi tat theo. Cho nay chi co mot hieu ung mo dan cua ban
   dieu huong, nhung de san khoi nay thi lan sau them hieu ung khong phai nho di tim.
   ============================================================ */

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

/* ============================================================
   Bang bo tri dam trong cot nhap, va trang thai chua co tuyen.
   ============================================================ */

/* Chin cot trong mot cot nhap 360px thi khong the vua — cho no cuon ngang, va ghim cot STT lai
   de cuon di van biet dang o dong nao. */
.girder-rows {
    overflow-x: auto;
    max-height: none;
    margin-bottom: 8px;
}

.girder-rows table.grid th,
.girder-rows table.grid td {
    white-space: nowrap;
}

.girder-rows table.grid th:first-child,
.girder-rows table.grid td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
}

.girder-rows table.grid thead th:first-child {
    z-index: 2;
    background: var(--bg);
}

.girder-rows table.grid tbody tr:hover td:first-child {
    background: var(--accent-soft);
}

/* Danh sach khoang cach uu tien: cac o so xep tran ra nhieu hang, moi o kem mot dau xoa. Xep tran
   chu khong xep mot cot doc: muoi may con so ma moi con mot hang thi day het ca cot nhap. */
.uu-tien {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.o-uu-tien {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 2px 2px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.o-uu-tien input[type="number"] {
    width: 56px;
    padding: 2px 4px;
    text-align: right;
    font: inherit;
    color: var(--text);
    background: none;
    border: 0;
}

.o-uu-tien button.link {
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
}

/* Hai nut duoi bang bo tri dam: tinh lai va tu dong toan bo. */
.hang-nut {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Co thong so vua doi ma chua tinh lai: nut tinh sang len de mat tim thay ngay. */
.can-tinh {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.can-tinh-nhac {
    color: var(--danger);
}

/* Con so duoc suy ra chu khong nhap duoc — ben hep cua nhip mo rong. */
.girder-rows .suyra {
    color: var(--muted);
}

/* O nhap trong bang bo tri dam cung phu kin o, kieu DataGrid. Bang nay 13 cot nen co the rong hon
   khung: luc do `.girder-rows` tu cuon ngang, con tung o van vua dung cot cua no. */
.girder-rows table.grid input {
    box-sizing: border-box;
    width: 100%;
    min-width: 4rem;
    text-align: right;
}

/* O "K/c bo tri": con so trong o la ket qua tinh ra, go vao la ghim. Ghim roi thi vien va chu
   doi mau nhan de doc mot luot ca bang la biet nhip nao dang bi ap dat, nhip nao tu do. */
.girder-rows input.ghim {
    color: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

/* Ben hep cua nhip mo rong: chu nho nam canh o nhap, khong phai mot o rieng. */
.girder-rows .ghim-o .phu {
    margin-left: 6px;
    color: var(--muted);
    font-size: 11px;
}

/* Nhip khong bo tri duoc dam: to do ca dong chu khong chi o so luong, vi so luong da la dau gach. */
.girder-rows tbody tr.bad td {
    color: var(--danger);
}

/* Cot trang thai cua bang bo tri dam: chu chay het do rong con lai chu khong bi cat, vi cau bao
   loi noi ro phai sua gi — cat mat nua cau la con so nguoi dung khong doan ra. */
.girder-rows .trang-thai {
    min-width: 260px;
    white-space: normal;
    line-height: 1.35;
}

.girder-rows .trang-thai .loi {
    color: var(--danger);
}

.girder-rows .trang-thai .dat {
    color: var(--bearing);
}

/* Phan thua moi dau dam: mot con so thong tin, khong phai loi — to nhat hon chu "Dat" de mat doc
   thu tu dung. */
.girder-rows .trang-thai .thua {
    color: var(--muted);
}

/* Nhip mo rong: o khoang cach mang hai con so va mot mui ten, danh dau bang mau nhan de quet mat
   qua ca bang la thay ngay nhip nao xoe. Khong to ca dong nhu dong loi: nhip xoe la mot ket qua
   dung, chi la mot ket qua khac kieu. */
.girder-rows tbody td.xoe {
    color: var(--accent);
    font-weight: 600;
}

.inputs .group p.hint {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
}

/* Chua mo file: khung ve trong, nen noi ro viec can lam thay vi de mot o xam. */
.trong-canh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 320px;
    padding: 24px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #fbfcfd;
}

.trong-canh h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.trong-canh p {
    margin: 0;
    max-width: 42ch;
    font-size: 13px;
    color: var(--muted);
}

/* ============================================================
   Khung nhin 3D theo kieu phan mem xem mo hinh BIM.

   Nen **sang**: khung ve la mot dai chuyen mau gan trang, chrome quanh no la xam rat nhat, vien
   la net mong mot diem anh. Truoc day cho nay to nen toi; doi lai vi mo hinh cau nhin tu xa phan
   lon la mat ban mau xam, dat tren nen toi thi ca hinh thanh mot khoi xam trong mot khoi xam,
   va vi ban ve, anh chup dua vao ho so deu la nen sang.

   Bo mau o :root da doi theo, va view3d.js dung dung bo do — doi mot ben ma quen ben kia thi
   o mau trong cay doi tuong noi mot mau con hinh ve mot mau khac.
   ============================================================ */

.layer-tree .note,
.layer-tree .note.muted {
    color: var(--viewer-muted);
}

/* O mau hinh vuong tren nen trang can mot vien mo, khong co thi o mau nhat lan vao nen. */
.layer-tree .swatch {
    box-shadow: 0 0 0 1px rgba(28, 36, 48, 0.16);
}

/* Rieng may o mau ve thanh net thi khong dong vien, vien se bao quanh ca o rong. */
.layer-tree .swatch.deck-edge,
.layer-tree .swatch.road,
.layer-tree .swatch.centre,
.layer-tree .swatch.pier {
    box-shadow: none;
}

/* Luoi nen: o mau ke hai net cho goi dung hinh mot manh luoi. */
.swatch.grid {
    background:
        linear-gradient(var(--grid), var(--grid)) 0 50% / 100% 1px no-repeat,
        linear-gradient(var(--grid), var(--grid)) 50% 0 / 1px 100% no-repeat;
    border: 1px solid var(--grid);
}

/* Chua mo file: khung moi mo file cung nam trong vung khung nhin. */
.preview .trong-canh {
    background: var(--viewer-panel);
    border-color: var(--viewer-line);
}

.preview .trong-canh h3 {
    color: var(--viewer-text);
}

.preview .trong-canh p {
    color: var(--viewer-muted);
}

/* ---- Dai cong cu tren khung ve ---- */

/* Mot dai rieng chay ngang, khong noi chong len hinh: nut noi tren hinh luon che mat mot goc
   mo hinh. Nen xam rat nhat de dai nay lui ve sau, khung ve moi la thu mat nhin vao. */
.view3d-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding: 4px 6px;
    background: var(--viewer-chrome);
    border-bottom: 1px solid var(--viewer-line);
}

/* Dai thu hai (cac nut cua mat cat) lui thanh nen trang de doc ra la dai phu chu khong phai mot
   dai cong cu thu hai ngang hang voi dai tren. */
.view3d-bar.phu {
    background: var(--viewer-panel);
    font-size: 11px;
    color: var(--viewer-muted);
}

/* Vach chia nhom, kieu thanh cong cu cua cac phan mem CAD: mot net doc thay cho mot khoang trong
   to, de mat gom cac nut thanh nhom ma khong ton chieu ngang. */
.tool-vach {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--viewer-line);
}

.tool-nhan {
    padding-left: 2px;
    color: var(--viewer-muted);
    white-space: nowrap;
}

/* Cac nut cung mot viec dinh lien nhau thanh mot khoi, de mat doc ra la mot nhom chon mot. */
.tool-group {
    display: inline-flex;
    border-radius: 4px;
    overflow: hidden;
}

/* Nhom co danh sach buong xuong phai mo `overflow` ra, khong thi danh sach bi chinh khoi nhom
   cat mat — va phai `relative` de danh sach neo vao nhom chu khong vao ca dai cong cu. */
.tool-group.co-menu {
    position: relative;
    overflow: visible;
}

/* Mui mo danh sach cong cu do: hep hon nut thuong vi no khong chua bieu tuong nao. */
.view3d-bar button.tool-mui {
    width: 14px;
    font-size: 9px;
}

/* Danh sach cong cu do, xep doc duoi dai cong cu — kieu ban do cua Autodesk. */
.tool-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    min-width: 208px;
    margin-top: 3px;
    padding: 4px;
    gap: 2px;
    border-radius: 6px;
    background: var(--viewer-panel);
    border: 1px solid var(--viewer-line);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

.view3d-bar .tool-menu button {
    width: 100%;
    height: 26px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

.view3d-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    padding: 0;
    color: var(--viewer-muted);
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

/* Nut chay chu (cac truc cua mat cat, "Doi ben") rong theo chu chu khong vuong 28 px. */
.view3d-bar button.chu {
    width: auto;
    height: 22px;
    gap: 5px;
    padding: 0 8px;
    font-size: 11px;
}

/* Ky hieu truy bat dung trong nut: nho hon hinh tren khung ve, vua bang chieu cao chu. */
.view3d-bar .hinh-bam {
    width: 13px;
    height: 13px;
}

.view3d-bar .icon {
    width: 16px;
    height: 16px;
}

.tool-group button + button {
    border-left: 1px solid var(--viewer-line);
}

.view3d-bar button:hover {
    color: var(--accent);
    background: var(--accent-soft);
}

/* Nut dang bat: to nen dam de doc ra ngay dang o che do nao. */
.view3d-bar button.on {
    color: #fff;
    background: var(--accent);
}

.view3d-bar button.on:hover {
    background: #0c5aa3;
}

.tool-slider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--viewer-muted);
    white-space: nowrap;
}

.tool-slider input[type="range"] {
    width: 110px;
}

/* Mot truc cua hop cat: ten truc, hai thanh truot (mat dau va mat cuoi) va doan dang giu.

   Hai thanh truot de sat nhau va ngan hon thanh truot cua mat phang: ba truc xep chung mot dai
   nen moi truc chi con mot phan ba chieu ngang. */
.tool-hop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    color: var(--viewer-muted);
    white-space: nowrap;
}

.tool-hop .ten {
    min-width: 44px;
}

.tool-hop input[type="range"] {
    width: 62px;
}

/* Doan dang giu: chu so co be ngang co dinh de con so doi ma dai khong nhay. */
.tool-hop .so {
    min-width: 58px;
    text-align: right;
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---- Bang thuoc tinh trong cay doi tuong ---- */

.thuoc-tinh {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--viewer-line);
}

.thuoc-tinh h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--viewer-text);
}

/* Nhan ben trai, gia tri ben phai va can phai: doc doc mot cot so thi lech mot chu so la thay. */
.thuoc-tinh dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 8px;
    margin: 0;
    font-size: 11px;
}

.thuoc-tinh dt {
    color: var(--viewer-muted);
}

.thuoc-tinh dd {
    margin: 0;
    text-align: right;
    color: var(--viewer-text);
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.thuoc-tinh button.link {
    margin-top: 6px;
    padding: 0;
    color: var(--accent);
    background: none;
    border: 0;
    font-size: 11px;
}