/* ============================================================
   Thiết kế theo yêu cầu — quy trình sản xuất & bảng size
   ============================================================ */

/* ---- Hero ---- */
.cd-hero { position:relative; overflow:hidden; background:var(--bg); padding:36px 0 56px; border-bottom:1px solid var(--line); }
.cd-hero .deco { position:absolute; border-radius:50%; z-index:1; background:var(--sky); }
.cd-hero .deco.d1 { width:420px; height:420px; right:-160px; top:-220px; }
.cd-hero .deco.d2 { width:260px; height:260px; left:-120px; bottom:-160px; background:var(--bg-2); }
.cd-hero .wrap { position:relative; z-index:2; }
.cd-crumb { font-size:13px; color:var(--muted); font-weight:600; margin-bottom:18px; }
.cd-crumb span { margin:0 4px; }
.cd-hero h1 { font-size:clamp(28px,3.6vw,42px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); max-width:820px; margin-bottom:16px; }
.cd-hero p { font-size:clamp(15px,1.2vw,17px); color:var(--ink-2); max-width:680px; line-height:1.65; margin-bottom:34px; }
.cd-stats { display:flex; gap:44px; flex-wrap:wrap; }
.cd-stats div { display:flex; flex-direction:column; gap:4px; }
.cd-stats b { font-size:30px; font-weight:900; letter-spacing:-.02em; color:var(--blue-700); line-height:1; }
.cd-stats span { font-size:13px; color:var(--muted); font-weight:600; }

/* ---- Timeline ---- */
.cd-timeline-sec { padding-bottom:0; }
.cd-timeline { display:flex; flex-direction:column; margin-bottom:40px; }
.cd-step { display:grid; grid-template-columns:64px 1fr; column-gap:26px; }
.cd-rail { position:relative; }
.cd-step-ico { position:relative; width:64px; height:64px; border-radius:var(--r-lg); background:var(--blue); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-blue); }
.cd-step-ico svg { width:28px; height:28px; }
.cd-num { position:absolute; top:45px; left:45px; width:27px; height:27px; border-radius:50%; background:var(--accent); color:#fff; border:2.5px solid #fff; font-size:12px; font-weight:900; display:grid; place-items:center; }
.cd-line { position:absolute; top:64px; left:32px; bottom:-34px; width:2px; background:var(--line-2); }
.cd-step-card { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:22px 26px; margin-bottom:34px; }
.cd-step-card h4 { font-size:18px; font-weight:800; color:var(--blue-700); margin-bottom:6px; }
.cd-step-card p { font-size:14.5px; color:var(--ink-2); line-height:1.6; }

.cd-quote { display:flex; align-items:center; gap:16px; background:linear-gradient(120deg,#0B1B2B 0%,#123859 60%,#1E5C8A 130%); color:#fff; border-radius:var(--r-lg); padding:26px 32px; }
.cd-quote svg { flex:none; width:26px; height:26px; color:var(--accent); }
.cd-quote p { font-size:15.5px; font-weight:700; }

/* ---- Mid CTA ---- */
.cd-cta { padding:44px 0; }
.cd-cta-box { display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; background:var(--sky); border-radius:var(--r-lg); padding:40px 44px; }
.cd-cta-box h3 { font-size:20px; font-weight:800; color:var(--ink); margin-bottom:6px; }
.cd-cta-box p { font-size:14px; color:var(--ink-2); max-width:480px; }

/* ---- Size chart tabs ---- */
.cd-tabs { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.cd-tab { padding:10px 20px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink-2); font-weight:700; font-size:14px; cursor:pointer; transition:.15s; }
.cd-tab:hover { border-color:var(--blue); color:var(--blue-700); }
.cd-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }

.cd-panel { display:none; }
.cd-panel.active { display:block; }

.cd-empty { border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-2); padding:44px 20px; text-align:center; color:var(--muted); }
.cd-empty svg { width:34px; height:34px; margin-bottom:12px; opacity:.6; }
.cd-empty p { font-size:14px; }

.cd-size-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.cd-size-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.cd-size-table th, .cd-size-table td { padding:12px 16px; text-align:center; white-space:nowrap; transition:background-color .12s; }
.cd-size-table thead th { background:var(--ink); color:#fff; font-weight:700; font-size:13px; border-bottom:1px solid var(--line); }
.cd-size-table tbody tr:not(:last-child) td { border-bottom:1px solid var(--line-2); }
.cd-size-table tbody tr:nth-child(even) td { background:var(--bg-2); }
.cd-size-table tbody tr td.lbl { background:var(--sky); color:var(--blue-700); font-weight:800; }
.cd-size-table tbody tr.grp td { border-top:2.5px solid var(--ink); }
.cd-size-table tbody tr:hover td { background:rgba(0,145,230,.14); }
.cd-size-table tbody tr:hover td.lbl { background:rgba(0,145,230,.22); }

.cd-note { font-size:13px; color:var(--muted); margin-top:16px; }

.cd-general { margin-top:28px; border-top:1px solid var(--line); padding-top:20px; }
.cd-general summary { cursor:pointer; font-weight:700; color:var(--blue-700); font-size:14.5px; margin-bottom:16px; }
.cd-general[open] summary { margin-bottom:16px; }