/* RepytotoRP design system
   Hướng thiết kế: phiếu công việc trong xưởng (shop drawing / job sheet). Lưới isometric
   như hình chiếu CAD, panel số liệu có thanh tiêu đề đậm và vạch chia như thước, thẻ dịch
   vụ có sống bên trái kiểu bìa tài liệu. Lý do: điểm bán là báo giá minh bạch — giao diện
   phải trông như một phiếu spec kiểm được, không phải brochure.

   Palette: Graphite / Cool Paper / Federal Blue / Verified Green
   Vì sao blue: khảo sát Verasight 8/2025 (1.000 người Mỹ) cho 40% chọn blue là màu yêu
   thích, YouGov cho 34% — hơn xa red (17%) và green (15%). Cùng khảo sát YouGov, orange
   nằm trong nhóm BỊ GHÉT nhất, nên nó bị loại khỏi hệ màu này.

   Type: Sora (display) / Inter (body) / JetBrains Mono (số liệu)

   QUY TẮC: đây là file design system. Mọi bổ sung về sau viết vào extras.css,
   được nạp SAU file này. */

:root{
  --graphite:#101418; --ink:#1A1F26; --ink-soft:#586471;
  --paper:#F2F5F7; --panel:#FFFFFF; --panel-sunk:#E6EBEF;
  --rule:#D2DAE0; --mesh:#BFCCD6;
  --signal:#1157C7; --signal-deep:#0D47A3; --signal-wash:#E8F0FC;
  --verified:#0F7A45; --verified-wash:#E9F5EE;
  --maxw:1140px; --radius:3px;
  --tick:1px dashed rgba(26,31,38,.26);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Vạch xanh sát mép trên trang, như lề một bản vẽ đã đóng dấu. */
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.58;-webkit-font-smoothing:antialiased;border-top:3px solid var(--signal)}
h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif;line-height:1.14;letter-spacing:-.02em}
a{color:var(--signal)}
img{max-width:100%;display:block}
svg{display:block}

/* ---- typography helpers ---- */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--signal);font-weight:600;display:block}
.eyebrow.green{color:var(--verified)}
.eyebrow.blue{color:var(--ink-soft)}
.lede{font-size:18px;color:var(--ink-soft);max-width:36em;margin:16px 0 26px}
.center{text-align:center}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:10px 14px;z-index:200;border:1.5px solid var(--ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ---- layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:68px 0}
.alt{background:var(--panel-sunk)}
.sec-head{max-width:48em;margin-bottom:34px}
.sec-head h2{font-size:clamp(25px,3.1vw,34px);font-weight:700;margin-top:10px}
.sec-head p{color:var(--ink-soft);margin-top:12px;font-size:17px}
.prose{max-width:45em}
.prose p{margin-bottom:16px;font-size:16.5px}
.prose h2{font-size:26px;margin:36px 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:7px}

/* ---- nav ---- */
.nav{background:var(--graphite);position:sticky;top:0;z-index:50}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:66px;flex-wrap:wrap}
.logo{font-family:'Sora',sans-serif;font-weight:700;color:#fff;font-size:19.5px;letter-spacing:-.03em;text-decoration:none}
.logo span{color:#7FA9E8}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center;flex-wrap:wrap}
.nav-links a{color:#CBD4DC;text-decoration:none;font-size:14.5px;font-weight:500}
.nav-links a:hover,.nav-links a:focus,.nav-links a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.nav-cta{background:var(--signal)!important;color:#fff!important;padding:9px 17px;font-weight:600;border-radius:2px;text-decoration:none!important}
.nav-cta:hover{background:#1A68E0!important}

/* ---- hero: lưới isometric, như hình chiếu trục đo trong CAD ---- */
.hero{
  padding:74px 0 64px;
  background:
    linear-gradient(rgba(242,245,247,.88),rgba(242,245,247,.96)),
    repeating-linear-gradient(60deg,var(--mesh) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(-60deg,var(--mesh) 0 1px,transparent 1px 32px);
  border-bottom:1px solid var(--rule);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center}
.hero h1{font-size:clamp(33px,4.6vw,52px);font-weight:700;margin:12px 0}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero-note{margin-top:16px;font-size:13px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--signal);color:#fff;padding:14px 26px;font-weight:600;text-decoration:none;border-radius:2px;font-size:16px;border:1.5px solid var(--signal);cursor:pointer;font-family:inherit}
.btn:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-soft);margin-left:10px}
.btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.light{background:#fff;color:var(--signal-deep);border-color:#fff}
.btn.light:hover{background:var(--signal-wash);border-color:var(--signal-wash)}

/* ---- SIGNATURE: panel số liệu kiểu phiếu spec ----
   Thanh tiêu đề đậm ở trên, mỗi dòng có một vạch chia xanh bên trái như vạch thước. */
.spec{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.spec-title{
  background:var(--graphite);color:#fff;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  padding:12px 18px
}
.dim{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:10px;padding:14px 18px 14px 30px;border-bottom:var(--tick)
}
.dim::before{content:"";position:absolute;left:15px;top:21px;width:8px;height:1.5px;background:var(--signal)}
.dim:last-child{border-bottom:0}
.dim-label{font-size:14.5px;color:var(--ink)}
.dim-rule{border-bottom:1px dotted var(--rule);transform:translateY(-4px)}
.dim-value{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:19px;font-variant-numeric:tabular-nums;white-space:nowrap}
.dim-unit{font-family:'Inter',sans-serif;font-size:12px;font-weight:400;color:var(--ink-soft);margin-left:3px}
.spec-foot{padding:14px 18px 17px 30px;margin:0;font-size:12px;color:var(--ink-soft);line-height:1.5;background:var(--panel-sunk);border-top:1px solid var(--rule)}

/* ---- dải cam kết ---- */
.strip{background:var(--graphite);color:#fff;padding:18px 0}
.strip .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:center}
.strip-lead{font-family:'Sora',sans-serif;font-weight:600;font-size:15.5px}
.strip ul{display:flex;gap:26px;list-style:none;flex-wrap:wrap}
.strip li{font-size:14px;color:#AFBAC4}
.strip li b{color:#fff;font-weight:600}

/* ---- thẻ: sống bên trái, như bìa tập tài liệu ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--rule);border-radius:var(--radius);padding:23px 24px;display:flex;flex-direction:column;gap:11px}
.card:hover{border-left-color:var(--signal)}
.card h3{font-size:18.5px;font-weight:600}
.card p{font-size:14.5px;color:var(--ink-soft);flex:1}
.card ul{margin:2px 0 0 18px;font-size:14px;color:var(--ink-soft)}
.card li{margin-bottom:5px}
.card.panel{border-left-color:var(--signal)}
.card.filled{background:var(--graphite);border-color:var(--graphite);border-left-color:var(--signal);color:#DDE3E9}
.card.filled h3{color:#fff}
.card.filled p,.card.filled li{color:#AFBAC4}
.card.filled .eyebrow{color:#7FA9E8}

.price-from{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.lead-time{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);background:var(--panel-sunk);border-radius:2px;padding:4px 8px;display:inline-block;align-self:flex-start}
.card.filled .lead-time{background:rgba(255,255,255,.1);color:#CBD4DC}
.more{color:var(--signal);font-weight:600;font-size:14.5px;text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- quy trình: mốc hình thoi trên đường nét đứt ---- */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative;margin-top:8px}
.rail::before{content:"";position:absolute;left:0;right:0;top:12px;border-top:var(--tick)}
.stage{position:relative;padding-top:40px}
.stage::before{
  content:"";position:absolute;top:6px;left:0;width:12px;height:12px;
  background:var(--signal);transform:rotate(45deg)
}
.stage .n{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink-soft);font-size:11px;letter-spacing:.11em;display:block;margin-bottom:5px}
.stage h3{font-size:16px;margin-bottom:5px;font-weight:600}
.stage p{font-size:13.5px;color:var(--ink-soft)}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.split.wide{grid-template-columns:1.25fr .75fr}

/* ---- bảng ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:580px}
th{background:var(--graphite);color:#fff;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:13px 15px;text-align:left;font-weight:600}
td{padding:13px 15px;border-top:var(--tick);font-size:15px;vertical-align:top}
td.p{font-family:'JetBrains Mono',monospace;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Kẻ sọc để mắt bám theo dòng trên bảng dài. Đủ để thấy, không đủ để ồn. */
tbody tr:nth-child(even){background:#F7F9FB}
tbody tr:hover{background:var(--signal-wash)}
.foot-note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;max-width:52em}

/* ---- review ---- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--signal);border-radius:var(--radius);padding:22px;font-size:15px;display:flex;flex-direction:column;gap:12px}
.review-quote{margin:0;border:0;padding:0;color:var(--ink)}
.review-quote p{margin:0 0 8px}
.review-quote p:last-child{margin-bottom:0}
.review .who{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink)}
.review-role{color:var(--ink-soft)}

/* ---- faq ---- */
.faq{max-width:48em}
details{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 20px;margin-bottom:10px}
details[open]{border-color:var(--signal);background:var(--panel)}
summary{font-family:'Sora',sans-serif;font-weight:600;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--signal);font-size:20px;line-height:1;font-family:'JetBrains Mono',monospace}
details[open] summary::after{content:"\2212"}
details p{margin-top:11px;font-size:15px;color:var(--ink-soft)}

/* ---- callout ---- */
.callout{background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--signal);border-radius:var(--radius);padding:19px 23px;margin:24px 0}
.callout.blue{border-left-color:var(--ink-soft);background:var(--signal-wash)}
.callout.jade{border-left-color:var(--verified);background:var(--verified-wash)}
.callout p{font-size:15.5px}
.callout p+p{margin-top:9px}

/* cờ nhỏ, dùng cho "đã bao gồm", "chưa có dữ liệu" */
.flag{background:var(--signal-wash);border:1px dashed var(--signal);border-radius:2px;padding:3px 8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--signal-deep);display:inline-block}
.flag.jade{background:var(--verified-wash);border-color:var(--verified);color:var(--verified)}

/* ---- dải CTA ---- */
.cta-band{background:var(--signal);color:#fff;text-align:center;padding:58px 0}
.cta-band h2{font-size:clamp(25px,3.1vw,34px);font-weight:700}
.cta-band p{margin:11px 0 24px;color:#CFE0F8;font-size:17px}

/* ---- form ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px}
.form-grid .full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
input,select,textarea{width:100%;padding:11px 12px;border:1.5px solid var(--rule);border-radius:2px;font-family:inherit;font-size:15px;background:var(--panel);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
textarea{min-height:120px;resize:vertical}
.form-note{font-size:12.5px;color:var(--ink-soft);margin-top:8px}

/* ---- footer ---- */
footer{background:var(--graphite);color:#AFBAC4;padding:48px 0 28px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:30px}
footer h4{color:#fff;font-family:'Sora',sans-serif;font-size:14.5px;margin-bottom:11px;font-weight:600}
footer a{color:#AFBAC4;text-decoration:none;display:block;margin-bottom:6px}
footer a:hover{color:#fff}
.nap{line-height:1.85}
.nap a{display:inline}
.foot-legal{border-top:1px solid rgba(255,255,255,.13);margin-top:30px;padding-top:16px;font-size:12.5px;color:#7F8A95;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---- responsive ---- */
@media(max-width:980px){
  .rail{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .rail::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .hero-grid,.split,.split.wide{grid-template-columns:1fr}
  .cards,.cards.two,.rev-grid,.form-grid{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav-links{gap:16px;font-size:14px}
  .hero{padding:52px 0 46px}
  section{padding:52px 0}
  .btn.ghost{margin-left:0;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.nav,.cta-band,footer{display:none}}