/* ============================================================================
   design.css — GIAO DIỆN MỚI theo bản thiết kế anh Nam (claude.ai/design, 06/08/2026)
   Làm theo CACH-LAM-GIONG-100.md: KHÔNG tự chế class — mọi định nghĩa khung nằm
   NGUYÊN VĂN ở css/design-base.css (copy từ _ds/.../styles.css của design system).
   File này chỉ gồm 4 phần:
     (1) COPY NGUYÊN VĂN khối <style> trong <helmet> của "Phan mem OHGW Sizing.dc.html"
     (2) Tab điều hướng — giá trị NGUYÊN VĂN từ hàm tabStyle() của file thiết kế
         (chuyển thành class vì trạng thái active do switchTab() gắn bằng JS)
     (3) VÁ TƯƠNG THÍCH: css cũ (sheet.css/apple-style.css) đặt !important trên body,
         label, .tab-btn… — phải !important lại ĐÚNG GIÁ TRỊ thiết kế, không đổi trị
     (4) Phụ trợ app không thuộc thiết kế: ô thiếu dữ liệu (cam), chú thích nhãn,
         dải "kết quả lạc hậu" — các tính năng có sẵn của phần mềm
   Load CUỐI CÙNG, sau design-base.css.
   ============================================================================ */

/* ========== (1) NGUYÊN VĂN <style> trong <helmet> của file thiết kế ========== */
:root {
    --color-accent: #1f5d8c;
    --color-accent-100: #e2f0fb;
    --color-accent-200: #c7e2f6;
    --color-accent-300: #a3cbe8;
    --color-accent-400: #7aaed3;
    --color-accent-500: #4d8ab8;
    --color-accent-600: #1b527b;
    --color-accent-700: #164263;
    --color-accent-800: #12374f;
    --color-accent-900: #10334f;
    --color-accent-2: #1f5d8c;
    --color-accent-2-100: #e2f0fb;
    --color-accent-2-800: #12374f;
}
body { margin: 0; background: var(--color-bg); font-family: "Barlow", system-ui, sans-serif; color: #1d1f20; }
.input, .seg { border-color: color-mix(in srgb, #1d1f20 42%, transparent); }
.seg-opt + .seg-opt { border-left-color: color-mix(in srgb, #1d1f20 42%, transparent); }
.field > label { color: color-mix(in srgb, #1d1f20 82%, transparent); }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); text-decoration: underline; }
button { white-space: nowrap; }

/* ========== (2) TAB — giá trị NGUYÊN VĂN từ tabStyle() (dc.html dòng 1171) ========== */
body.v4 .nav4-tab {
    height: 34px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 14px !important;
    font-family: var(--font-heading) !important;
    font-weight: var(--font-heading-weight) !important;
    font-size: 15px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    border-radius: 0 !important;
    border: 1px solid var(--color-divider) !important;
    background: transparent !important;
    color: var(--color-text) !important;
    box-shadow: none !important;
}
body.v4 .nav4-tab.active {
    border: 1px solid var(--color-accent) !important;
    background: var(--color-accent) !important;
    color: var(--color-bg) !important;
}

/* ========== (3) VÁ TƯƠNG THÍCH — !important lại đúng giá trị thiết kế ========== */
/* sheet.css đặt body/html nền xám + font hệ bằng !important; apple-style đặt padding. */
html { background: var(--color-bg); }
body.v4 {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--color-bg) !important;
    font-family: "Barlow", system-ui, sans-serif !important;
    color: #1d1f20 !important;
    font-size: 15px;
}
body.v4 .container { max-width: none !important; margin: 0 !important; padding: 0 !important; background: var(--color-bg) !important; }
/* apple-style ép ".field label" uppercase 11px !important — trả về đúng DS + helmet:
   display block · 12px · margin-bottom 5px (ds-industry) · màu mix 82% (helmet) */
body.v4 .field > label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 5px !important;
    color: color-mix(in srgb, #1d1f20 82%, transparent) !important;
}
/* v3.43.1 — CSS CŨ CÒN GIỮ (components/base, phục vụ màn phụ) nạp SAU design-base nên
   ĐÈ các class trùng tên của design system: .btn bo 8px + gradient, .tag bo 12px viên
   thuốc, .field input bo 6px, details summary nền bo 6px… (anh Nam bắt: "làm gì có bo
   góc tròn trong giao diện mẫu"). Vá TOÀN CỤC trong body.v4: mọi class trùng tên phải
   theo ĐÚNG định nghĩa ds-industry (bản thiết kế là blueprint — KHÔNG bo góc). */
body.v4 .btn {
    border-radius: 0 !important;
    box-shadow: none !important;
    width: auto;
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 6px;
    text-transform: none;
    font-family: var(--font-heading) !important;
    font-weight: var(--font-heading-weight) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 6.8px 12.24px !important;
    background: transparent;
    color: var(--color-text) !important;
    border: 1px solid var(--color-divider) !important;
    transition: none !important;
}
body.v4 .btn:hover { transform: none !important; box-shadow: none !important; }
body.v4 .btn.btn-primary { background: var(--color-accent) !important; color: var(--color-bg) !important; border-color: var(--color-accent) !important; }
body.v4 .btn.btn-primary:hover { background: var(--color-accent-600) !important; }
body.v4 .btn.btn-secondary { background: transparent !important; }
body.v4 .btn.btn-secondary:hover { background: color-mix(in srgb, #1d1f20 7%, transparent) !important; }
body.v4 .btn.btn-ghost { border-color: transparent !important; color: var(--color-accent) !important; }
body.v4 .btn.btn-block { width: 100% !important; }
/* ô nhập/chọn: DS = vuông, viền divider, nền surface (inline style của markup đè nền khi cần) */
body.v4 .input,
body.v4 .field input, body.v4 .field select, body.v4 .field textarea {
    border-radius: 0 !important;
    border: 1px solid color-mix(in srgb, #1d1f20 42%, transparent) !important;
    box-shadow: none !important;
    padding: 6px 10px;
    font-size: 14px !important;
    background-color: var(--color-surface);
    transition: none !important;
}
body.v4 .field input:focus, body.v4 .field select:focus, body.v4 .input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
}
/* tag: DS 11px vuông — components biến thành viên thuốc 12px */
body.v4 .tag {
    border-radius: 0 !important;
    display: inline-flex; align-items: center;
    font-size: 11px !important; letter-spacing: 0.02em;
    padding: 3px 10px !important;
    font-weight: 400 !important;
    margin-left: 0;
    background: transparent;
}
body.v4 .tag.tag-accent { background: var(--color-accent-100) !important; color: var(--color-accent-800) !important; }
body.v4 .tag.tag-neutral { background: var(--color-neutral-100) !important; color: var(--color-neutral-800) !important; }
body.v4 .tag.tag-outline { border: 1px solid var(--color-accent) !important; color: var(--color-accent) !important; background: transparent !important; }
/* details: components đặt nền xanh nhạt + bo cho summary/thân — markup thiết kế tự style */
body.v4 details summary {
    background: transparent !important; border-radius: 0 !important;
    padding: 0 !important; color: inherit !important; font-weight: inherit !important;
}
body.v4 details > div {
    background: transparent !important; border: none !important;
    border-radius: 0 !important; padding: 0 !important; margin-top: 0 !important;
}
/* apple-style ".field label" (descendant) ép uppercase cả nhãn seg — trả về đúng ds-industry */
body.v4 .seg-opt {
    display: inline-flex !important;
    width: auto;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    color: var(--color-text) !important;
    padding: 7px 12px;
}
body.v4 .seg-opt:has(input:checked) { background: var(--color-accent) !important; color: var(--color-bg) !important; }
/* nút trong nav + cột phải: về đúng dáng ds-industry (css cũ ép block/bo góc) */
body.v4 .nav .btn, body.v4 #resultPanel .btn { display: inline-flex !important; width: auto !important; }
/* select trong .field: ds-industry .input dùng cho cả select */
body.v4 select.input { appearance: auto; height: 36px; }

/* ========== (4) PHỤ TRỢ APP (không thuộc thiết kế — tính năng có sẵn) ========== */
/* Ô còn thiếu dữ liệu — dashToOThieu() tô; tông cam của cảnh báo thiết kế */
body.v4 .field.thieu .input, body.v4 .field.thieu select,
body.v4 input.thieu, body.v4 select.thieu {
    border-color: #d68a2e !important;
    box-shadow: inset 0 0 0 1px #d68a2e !important;
    background: #fdf1e0 !important;
}
/* Chú thích trong nhãn (điểm 7 SUA-LECH): span riêng 12,5px mờ 62%, cách 6px;
   nhãn dài thì xuống dòng riêng */
body.v4 .field > label .lbl-note {
    font-size: 12.5px;
    color: color-mix(in srgb, #1d1f20 62%, transparent);
    margin-left: 6px;
    text-transform: none;
}
body.v4 .field > label .lbl-note.block { display: block; margin-left: 0; margin-top: 2px; }
/* Kết quả lạc hậu — dashStaleBanner() làm mờ vùng kết quả + chèn dải cảnh báo */
body.v4 #resultPanel.stale-body > *:not(.dz-stale) { opacity: 0.55; }
body.v4 #resultWide.stale-body > * { opacity: 0.55; }
body.v4 .dz-stale {
    border: 1px solid #d68a2e; background: #fdf1e0; color: #6b3a00;
    padding: 11px 13px; font-size: 14px; line-height: 1.5; margin-bottom: 4px;
}
/* Thanh trạng thái cũ + khối diễn giải cũ: giữ phần tử cho engine ghi, không hiển thị */
body.v4 #csStatus, body.v4 #dashExplain, body.v4 #preliminaryResult { display: none; }
/* Nền trắng cho đồng bộ khung mới. v3.44: cả 6 màn nay đều theo thiết kế/design-base. */
body.v4 #tab-line, body.v4 #tab-doc, body.v4 #tab-catalog, body.v4 #tab-guide, body.v4 #tab-projects { background: #fff; }
body.v4 #tab-line .step-cards-wrapper { padding: 20px 26px; }
body.v4 .dz-todo {
    margin: 40px auto; max-width: 560px; border: 1px dashed color-mix(in srgb, #1d1f20 45%, transparent);
    padding: 26px 30px; font-size: 14.5px; line-height: 1.6; color: #4c5257; background: #fff;
}

/* v3.43 — IN / XUẤT PDF từ tab Thuyết minh: chỉ in trang #dzDocPage */
@media print {
    body.v4 .nav, body.v4 .dz-no-print, body.v4 #tab-calc, body.v4 #tab-line,
    body.v4 #tab-catalog, body.v4 #tab-guide, body.v4 #tab-projects, body.v4 .footer { display: none !important; }
    body.v4 #tab-doc { display: block !important; }
    body.v4 #tab-doc > div { padding: 0 !important; background: #fff !important; }
    body.v4 #dzDocPage { border: none !important; padding: 0 !important; max-width: none !important; }
}

/* v3.43.1 — BÙ TỐI THIỂU cho phần app nằm ngoài bản thiết kế, sau khi GỠ HẲN
   base/components/responsive.css (chỉ đạo anh Nam 07/08: "bỏ hết ý tưởng giao diện cũ,
   nguồn chuẩn duy nhất là gói thiết kế mới"). Giá trị lấy theo token/khối .dialog của
   ds-industry — KHÔNG bo góc, không đổ bóng màu mè. */
body.v4 .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--color-accent-900); color: #f2f2f3;
    padding: 10px 18px; font-size: 14px; z-index: 1000; border-radius: 0;
}
body.v4 .project-modal { position: fixed; inset: 0; z-index: 900; }
body.v4 .project-modal-backdrop {
    position: absolute; inset: 0;
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
body.v4 .project-modal-content {
    position: relative; width: min(720px, calc(100% - 40px)); margin: 60px auto;
    max-height: calc(100vh - 120px); overflow-y: auto;
    background: #fff; border: 1px solid var(--color-text); padding: 20px 24px;
}
body.v4 .project-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
body.v4 .project-modal-header h2 { margin: 0; font-size: 22px; }
body.v4 .modal-close { border: 1px solid var(--color-divider); background: transparent; font-size: 18px; width: 32px; height: 32px; cursor: pointer; }
body.v4 .dropzone {
    border: 1px dashed color-mix(in srgb, #1d1f20 45%, transparent);
    padding: 22px; text-align: center; cursor: pointer; background: var(--color-neutral-100);
}
body.v4 .dropzone .dz-main { font-family: var(--font-heading); font-size: 16px; }
body.v4 .dropzone .dz-sub { font-size: 13px; color: color-mix(in srgb, #1d1f20 70%, transparent); }
body.v4 .toggle-section { display: none; }
body.v4 .toggle-section.active { display: block; }
/* ==========================================================================
   v3.44 — HAI MÀN CÒN LẠI DỰNG THEO design-base: Hướng dẫn · Dự án đã lưu

   Hai màn này KHÔNG có trong gói thiết kế nên không "bê nguyên" được; anh Nam chốt
   07/08/2026 là dựng theo đúng ngôn ngữ design system. Bố cục + màu nằm nội tuyến
   trong markup như bốn màn kia; khối dưới đây CHỈ lo phần văn bản dài của tab Hướng
   dẫn (dl/dt/dd, bảng tra, code) — thứ mà markup nội tuyến sẽ rất rườm nếu lặp lại
   trên từng thẻ.

   🔴 KHÔNG dùng lại class của tooltip.css cho hai màn này. File đó vẫn được nạp vì nó
   giữ .info-tip/.tip-popup VÀ cơ chế ẩn/hiện tab (.tab-panel/.tab-panel.active), nhưng
   nó cũng còn nguyên bộ giao diện cũ: .help-cards-wrapper nền gradient vàng + viền 2px
   #f59e0b + bo 10px + đổ bóng, .help-card bo 6px, .help-note bo 4px. Đợt quét "0 phần
   tử bo góc" của v3.43.1 không thấy vì chỉ quét 4 màn đã dựng.
   ========================================================================== */
body.v4 #tab-guide, body.v4 #tab-projects { padding: 0; }
body.v4 #tab-guide details[data-help-card] + details[data-help-card] { margin-top: 0; }
body.v4 #tab-guide details[data-help-card][open] > summary { margin-bottom: 4px; }

/* thân khối hướng dẫn — thay .help-card-body của tooltip.css */
body.v4 .dz-help-body { font-size: 14px; line-height: 1.6; padding-top: 4px; }
body.v4 .dz-help-body p { margin: 0 0 9px; max-width: 106ch; }
body.v4 .dz-help-body dl { margin: 0; }
body.v4 .dz-help-body dt {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 16px; margin: 14px 0 4px; letter-spacing: 0.01em;
}
body.v4 .dz-help-body dt:first-child { margin-top: 4px; }
body.v4 .dz-help-body dd { margin: 0 0 4px; max-width: 106ch; }
body.v4 .dz-help-body code {
    font-family: 'STIX Two Text', Georgia, serif; font-size: 15px;
    background: none; color: inherit;
}
/* bảng tra trong hướng dẫn — cùng kiểu bảng kẻ đen header accent của các màn thiết kế */
body.v4 .dz-help-body table {
    border-collapse: collapse; font-size: 13.5px; margin: 8px 0 4px;
    border: 1px solid var(--color-text);
}
body.v4 .dz-help-body th {
    text-align: left; padding: 7px 9px;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--color-accent); color: #f2f2f3;
    border: 1px solid var(--color-text);
}
body.v4 .dz-help-body td { padding: 7px 9px; border: 1px solid var(--color-divider); }

/* dấu chỉ dẫn (i) — tooltip.css để nền cam bo tròn + đổ bóng; trả về vuông theo token DS.
   .tip-popup cũng vuông hoá, bỏ bóng màu. */
body.v4 .info-tip {
    background: transparent !important; color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important; border-radius: 0 !important;
    box-shadow: none !important; transform: none !important;
    width: 17px !important; height: 17px !important; font-size: 11px !important;
    font-family: var(--font-heading) !important;
}
body.v4 .info-tip.active { background: var(--color-accent) !important; color: var(--color-bg) !important; }
body.v4 .tip-popup {
    border-radius: 0 !important; background: var(--color-accent-900) !important;
    box-shadow: none !important; border: 1px solid var(--color-text) !important;
}
body.v4 .tip-popup .tip-close { border-radius: 0 !important; }