/* =====================================================================
   isHUM website — style chung (nét đứt mảnh, cam Claude #D97757)
   ===================================================================== */
:root{
  --orange:#D97757; --orange-dk:#c15f3c; --orange-soft:#fff3ec;
  --ink:#3a4654; --muted:#8b97a4; --line:#c9d2dc; --bg:#f6f8fa; --card:#ffffff;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Segoe UI',Roboto,Arial,sans-serif; font-size:16px; line-height:1.6;
}
/* Nền chấm chấm ở 2 dải bên ngoài cột nội dung (đỡ trống trải) */
body::before, body::after{
  content:""; position:fixed; top:0; bottom:0; z-index:-1; pointer-events:none;
  width:calc((100vw - 1060px) / 2);
  background-image:radial-gradient(circle, #ccd6df 1.3px, transparent 1.3px);
  background-size:20px 20px; opacity:.6;
}
body::before{ left:0; } body::after{ right:0; }
@media (max-width:1160px){ body::before, body::after{ display:none; } }
a{ color:var(--orange-dk); text-decoration:none; }
a:hover{ text-decoration:underline; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 20px; }

/* ---- Header / Nav ---- */
.nav{ position:sticky; top:0; z-index:50; background:rgba(246,248,250,.92);
  backdrop-filter:blur(6px); border-bottom:1px dashed var(--line); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); }
.brand .dot{ width:26px; height:26px; border:1.6px dashed var(--orange); border-radius:7px;
  display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:15px; }
.brand small{ font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.5px; }
.menu{ display:flex; gap:8px; align-items:center; }
.menu a{ color:var(--ink); padding:8px 14px; border-radius:8px; font-weight:600; font-size:15px; }
.menu a:hover{ background:#fff; text-decoration:none; }
.menu a.active{ color:var(--orange-dk); border:1px dashed var(--orange); }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:9px;
  font-weight:700; font-size:15px; cursor:pointer; border:1.6px solid var(--orange);
  background:var(--orange); color:#fff; transition:.15s; }
.btn:hover{ filter:brightness(1.06); text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--orange-dk); border-style:dashed; }

/* ---- Hero ---- */
.hero{ padding:64px 0 28px; text-align:center; }
.hero .tag{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color:var(--orange-dk); border:1px dashed var(--orange); border-radius:20px; padding:5px 14px; margin-bottom:18px; text-transform:uppercase; }
.hero h1{ font-size:42px; line-height:1.15; margin:0 0 16px; color:#2c3744; }
.hero h1 .hl{ color:var(--orange); }
.hero p.lead{ font-size:18px; color:#5b6775; max-width:760px; margin:0 auto 26px; }
.hero .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Section ---- */
section{ padding:34px 0; }
.sec-head{ text-align:center; margin-bottom:26px; }
.sec-head h2{ font-size:28px; margin:0 0 8px; color:#2c3744; }
.sec-head h2 .pre{ color:var(--orange); }
.sec-head p{ color:var(--muted); margin:0; }

/* ---- Cards / grid ---- */
.card{ background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:22px; }
.grid{ display:grid; gap:18px; }
.grid.g3{ grid-template-columns:repeat(3,1fr); }
.grid.g4{ grid-template-columns:repeat(4,1fr); }
.feature h3{ display:flex; align-items:center; gap:9px; margin:0 0 8px; font-size:17px; color:#2c3744; }
.feature .ic{ width:34px; height:34px; flex:none; border:1.4px dashed var(--orange); border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:17px; }
.feature p{ margin:0; color:#5b6775; font-size:14.5px; }

/* ---- Pricing / service tiers ---- */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
/* 2 cột: cột 1 = Basic (cao) · cột 2 = Nesting trên + G-Code dưới */
.tiers2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.tcol{ display:flex; flex-direction:column; gap:18px; }
.tier{ background:var(--card); border:1px dashed var(--line); border-radius:14px; padding:24px; }
.tier.pop{ border:2px dashed var(--orange); box-shadow:0 8px 30px rgba(217,119,87,.10); }
.tier .badge{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.5px;
  color:var(--orange-dk); background:var(--orange-soft); border:1px dashed var(--orange); border-radius:20px; padding:3px 12px; margin-bottom:10px; }
.tier h3{ font-size:24px; margin:0 0 4px; color:#2c3744; }
.tier .sub{ color:var(--muted); font-size:13.5px; margin:0 0 16px; min-height:20px; }
.tier ul{ list-style:none; margin:0; padding:0; }
.tier li{ position:relative; padding:5px 0 5px 26px; font-size:14.5px; color:#46535f; border-bottom:1px dashed #eef1f5; }
.tier li:last-child{ border-bottom:none; }
.tier li::before{ content:"✓"; position:absolute; left:4px; top:5px; color:var(--orange); font-weight:800; }
.tier li.sub-item{ padding-left:38px; font-size:13.5px; color:#6b7886; }
.tier li.sub-item::before{ content:"+"; left:22px; color:#b9c2cc; }
.tier li.head{ font-weight:800; color:#2c3744; }
.tier li.head::before{ content:"★"; color:var(--orange); }

/* ---- News / guides ---- */
.post{ background:var(--card); border:1px dashed var(--line); border-radius:12px; padding:20px 22px; margin-bottom:16px; }
.post .meta{ font-size:12.5px; color:var(--muted); margin-bottom:6px; display:flex; gap:10px; align-items:center; }
.post .meta .cat{ color:var(--orange-dk); border:1px dashed var(--orange); border-radius:14px; padding:1px 10px; font-weight:700; }
.post h3{ margin:0 0 8px; font-size:20px; color:#2c3744; }
.post p{ margin:0 0 10px; color:#5b6775; font-size:15px; }
.post .more{ font-weight:700; }

/* ---- Footer ---- */
.foot{ border-top:1px dashed var(--line); margin-top:30px; padding:28px 0; color:var(--muted); font-size:14px; }
.foot .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot b{ color:var(--ink); }
.foot a{ color:var(--orange-dk); }

/* ---- Nút liên hệ nổi (cố định bên phải) ---- */
.floatbar{ position:fixed; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:200; }
.fab{ display:flex; align-items:center; gap:0; height:52px; width:52px; padding:0;
  border-radius:30px; color:#fff; font-weight:800; text-decoration:none; overflow:hidden;
  box-shadow:0 5px 16px rgba(0,0,0,.18); transition:width .25s ease, box-shadow .2s; white-space:nowrap; }
.fab:hover{ text-decoration:none; box-shadow:0 7px 20px rgba(0,0,0,.26); width:auto; padding-right:18px; }
.fab .ico{ width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center; font-size:21px; }
.fab .lbl{ font-size:14px; opacity:0; max-width:0; transition:opacity .2s, max-width .25s; }
.fab:hover .lbl{ opacity:1; max-width:200px; }
.fab.zalo{ background:#0068ff; } .fab.zalo .ico{ font-size:15px; font-weight:900; }
.fab.call{ background:var(--orange); animation:fab-pulse 2s infinite; }
@keyframes fab-pulse{ 0%{ box-shadow:0 5px 16px rgba(0,0,0,.18),0 0 0 0 rgba(217,119,87,.5);} 70%{ box-shadow:0 5px 16px rgba(0,0,0,.18),0 0 0 12px rgba(217,119,87,0);} 100%{ box-shadow:0 5px 16px rgba(0,0,0,.18),0 0 0 0 rgba(217,119,87,0);} }

/* ---- Responsive ---- */
@media (max-width:880px){
  .grid.g3,.grid.g4,.tiers{ grid-template-columns:1fr 1fr; }
  .tiers2{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
}
@media (max-width:620px){
  .grid.g3,.grid.g4,.tiers{ grid-template-columns:1fr; }
  .menu a{ padding:7px 9px; font-size:14px; }
  .brand small{ display:none; }
  .hero{ padding:40px 0 20px; }
  .floatbar{ right:12px; gap:10px; }
  .fab,.fab .ico{ width:48px; height:48px; }
}