/* ============================================================
   29 POS — hệ thiết kế dùng chung
   Thang đo chặt theo _CONG-CU-AI/... luat-thiet-ke.md:
   1 phông · 6 cỡ chữ · 3 độ đậm · 4 bo góc · 2 kiểu bóng · khoảng cách bội 4
   ============================================================ */

:root{
  /* khoảng cách — chỉ bội của 4 */
  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:24px; --k6:32px; --k7:48px; --k8:64px; --k9:96px;

  /* cỡ chữ — 6 bậc, không số lẻ */
  --chu-nho:14px; --chu-thuong:17px; --chu-vua:19px; --chu-to:24px; --chu-tieu-de:36px; --chu-hero:52px;

  /* độ đậm — 3 mức */
  --dam-thuong:400; --dam-vua:600; --dam-manh:800;

  /* bo góc — 4 mức */
  --bo-nho:8px; --bo-vua:14px; --bo-to:24px; --bo-tron:999px;

  /* đổ bóng — 2 kiểu */
  --bong-nhe:0 1px 2px rgba(22,33,31,.06), 0 2px 8px rgba(22,33,31,.05);
  --bong-noi:0 12px 32px rgba(22,33,31,.10);

  /* màu — nền ngà, thẻ trắng, MỘT màu nhấn để "gọi" */
  --nen:#FBFAF8;
  --the:#FFFFFF;
  --chu:#16211F;
  /* đậm vừa đủ để đạt chuẩn đọc được trên CẢ 4 nền nó hay nằm lên:
     nền trang #FBFAF8 · thẻ trắng · thanh màn hình #F4F2EE · nền xanh nhạt #E7F1EF.
     Màu cũ #6B7572 trượt trên nền xanh nhạt (4.13) — đo thật 16/08/2026. */
  --chu-phu:#656F6C;
  --vien:#E6E3DD;
  --chinh:#0E5C55;        /* teal đậm — tin cậy */
  --chinh-nhat:#E7F1EF;
  /* 🔴 Màu nút: anh Sơn chốt 16/08/2026 sau khi đo 14 web đầu ngành.
     Cam nhạt cũ #D97B3F chỉ đạt tương phản 3.1 — TRƯỢT chuẩn đọc được 4.5.
     Cam đậm này đạt 5.55. Đổi màu nút thì PHẢI đo lại tương phản. */
  --nhan:#B4441C;         /* cam đậm — nút hành động */
  --nhan-dam:#963715;     /* lúc rê chuột */
  --toi:#0B1F1D;          /* nền khối tối */
  --toi-chu:#E8EFEC;

  /* nhịp chuyển động — một nhịp cho cả trang */
  --nhip:280ms; --cong:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nen); color:var(--chu);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:var(--chu-thuong); font-weight:var(--dam-thuong); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--chinh); text-decoration:none}
a:hover{text-decoration:underline}
/* trình duyệt mặc định cho strong/b/th là 700 — kéo về đúng 3 mức của thang đo */
strong,b,th{font-weight:var(--dam-vua)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--chu-nho)}

/* ---------- khung ---------- */
.khung{width:100%; max-width:1180px; margin:0 auto; padding:0 var(--k5)}
.khung-hep{width:100%; max-width:760px; margin:0 auto; padding:0 var(--k5)}
section{padding:var(--k9) 0}
@media(max-width:900px){ section{padding:var(--k8) 0} }

/* ---------- chữ ---------- */
h1,h2,h3{margin:0 0 var(--k4); line-height:1.15; font-weight:var(--dam-vua); letter-spacing:-.025em}
h1{font-weight:700; letter-spacing:-.035em; line-height:1.08}
h2{font-weight:700}
h1{letter-spacing:-.035em}  /* Inter ở cỡ lớn phải siết mạnh hơn, không thì chữ rời rạc */
h1{font-size:var(--chu-hero)}
h2{font-size:var(--chu-tieu-de)}
h3{font-size:var(--chu-to)}
p{margin:0 0 var(--k4)}
.phu{color:var(--chu-phu)}
.nhan-muc{
  display:inline-block; font-size:var(--chu-nho); font-weight:var(--dam-vua);
  text-transform:uppercase; letter-spacing:.12em; color:var(--chinh);
  background:var(--chinh-nhat); padding:var(--k1) var(--k3);
  border-radius:var(--bo-tron); margin-bottom:var(--k4);
}
.to-hon{font-size:var(--chu-vua)}
@media(max-width:900px){
  :root{--chu-hero:36px; --chu-tieu-de:28px; --chu-to:21px; --chu-vua:18px}
}
@media(max-width:600px){
  :root{--chu-hero:31px; --chu-tieu-de:25px; --chu-to:20px}
}

/* ---------- nút ---------- */
.nut{
  display:inline-flex; align-items:center; gap:var(--k2);
  padding:var(--k3) var(--k5); border-radius:var(--bo-tron);
  font-size:var(--chu-thuong); font-weight:var(--dam-vua); border:1px solid transparent;
  cursor:pointer; transition:transform var(--nhip) var(--cong), opacity var(--nhip) var(--cong);
  text-decoration:none;
}
.nut:hover{text-decoration:none; opacity:.92}
.nut-chinh:hover{background:var(--nhan-dam); opacity:1}
.nut:active{transform:scale(.97)}
.nut-chinh{background:var(--nhan); color:#fff}
.nut-vien{background:transparent; color:var(--chu); border-color:var(--vien)}
.nut-sang{background:#fff; color:var(--toi)}
.hang-nut{display:flex; gap:var(--k3); flex-wrap:wrap; align-items:center}

/* ---------- thanh trên ---------- */
.thanh-tren{
  position:sticky; top:0; z-index:50; background:rgba(251,250,248,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--vien);
}
.thanh-trong{display:flex; align-items:center; justify-content:space-between; height:68px}
.hieu{display:flex; align-items:center; gap:var(--k2); font-weight:var(--dam-manh); font-size:var(--chu-vua); color:var(--chu)}
.hieu:hover{text-decoration:none}
.hieu-o{
  width:32px; height:32px; border-radius:var(--bo-nho); background:var(--chinh);
  color:#fff; display:grid; place-items:center; font-size:var(--chu-nho); font-weight:var(--dam-manh);
}
.menu{display:flex; gap:var(--k5); align-items:center}
.menu a{color:var(--chu-phu); font-size:var(--chu-thuong)}
/* 🔴 BẮT BUỘC: `.menu a` (1 class + 1 thẻ) ĐÈ LÊN `.nut-chinh` (1 class) nên chữ nút
   bị kéo về màu xám của menu — chữ xám trên nền cam, khách không đọc nổi.
   Anh Sơn bắt được 16/08/2026: "ko đọc nổi chữ… lỗi nghiêm trọng".
   Mọi nút nằm trong menu phải khai lại màu chữ, độ ưu tiên phải cao hơn `.menu a`. */
.menu a.nut-chinh,.menu a.nut-chinh:hover{color:#fff}
.menu a.nut-sang,.menu a.nut-sang:hover{color:var(--toi)}
.menu a.nut-vien,.menu a.nut-vien:hover{color:var(--chu)}
.menu a:hover{color:var(--chu); text-decoration:none}
.menu a.dang-o{color:var(--chu); font-weight:var(--dam-vua)}
/* 🔴 Nút ở menu mà TRÙNG trang đang mở thì dính cả `.dang-o` — luật này khai sau nên
   đè mất màu trắng, thành chữ ĐEN trên nền cam (đo được 2.98, không đọc nổi).
   Anh Sơn bắt được 16/08/2026. Ba dòng dưới phải nằm CUỐI CÙNG trong khối menu. */
.menu a.nut-chinh,.menu a.nut-chinh:hover,.menu a.nut-chinh.dang-o{color:#fff}
.menu a.nut-sang,.menu a.nut-sang.dang-o{color:var(--toi)}
.menu a.nut-vien,.menu a.nut-vien.dang-o{color:var(--chu)}
.nut-menu{display:none; background:none; border:0; font-size:var(--chu-to); cursor:pointer; color:var(--chu)}
@media(max-width:900px){
  .menu{
    display:none; position:absolute; top:68px; left:0; right:0; background:var(--the);
    flex-direction:column; align-items:stretch; gap:0; padding:var(--k2) var(--k5) var(--k5);
    border-bottom:1px solid var(--vien); box-shadow:var(--bong-noi);
  }
  .menu.mo{display:flex}
  .menu a{padding:var(--k3) 0; border-bottom:1px solid var(--vien)}
  .menu .nut{margin-top:var(--k3); justify-content:center}
  .nut-menu{display:block}
}

/* ---------- hero ---------- */
.hero{background:var(--toi); color:var(--toi-chu); padding:var(--k9) 0 var(--k8)}
.hero h1{color:#fff; max-width:19ch}
.hero p{color:#B9C7C3; font-size:var(--chu-to); max-width:52ch; line-height:1.5}
.hero .nhan-muc{background:rgba(255,255,255,.08); color:#9FD6CD}

/* ---------- thẻ ---------- */
.luoi{display:grid; gap:var(--k4)}
.luoi-2{grid-template-columns:repeat(2,1fr)}
.luoi-3{grid-template-columns:repeat(3,1fr)}
.luoi-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){ .luoi-3,.luoi-4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .luoi-2,.luoi-3,.luoi-4{grid-template-columns:1fr} }

.the{
  background:var(--the); border:1px solid var(--vien); border-radius:var(--bo-vua);
  padding:var(--k5); box-shadow:var(--bong-nhe);
  transition:transform var(--nhip) var(--cong), box-shadow var(--nhip) var(--cong);
}
.the-noi:hover{transform:translateY(-3px); box-shadow:var(--bong-noi)}
.the h3{margin-bottom:var(--k2)}
.the p:last-child{margin-bottom:0}
.the-icon{
  width:44px; height:44px; border-radius:var(--bo-nho); background:var(--chinh-nhat);
  display:grid; place-items:center; font-size:var(--chu-to); margin-bottom:var(--k4);
}

/* ---------- số liệu ---------- */
.so-lieu{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--k4)}
@media(max-width:600px){ .so-lieu{grid-template-columns:repeat(2,1fr)} }
.so-o{text-align:center; padding:var(--k5) var(--k3)}
.so-to{font-size:var(--chu-tieu-de); font-weight:var(--dam-manh); color:var(--chinh); display:block; line-height:1.2}
.so-nhan{font-size:var(--chu-nho); color:var(--chu-phu); margin-top:var(--k1)}

/* ---------- khối tối ---------- */
.khoi-toi{background:var(--toi); color:var(--toi-chu)}
.khoi-toi h2{color:#fff}
.khoi-toi p{color:#B9C7C3}
.khoi-toi .the{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); box-shadow:none}
.khoi-toi .the h3{color:#fff}
.khoi-toi .the p{color:#B9C7C3}

/* ---------- bảng giá ---------- */
.goi{
  background:var(--the); border:1px solid var(--vien); border-radius:var(--bo-to);
  padding:var(--k6) var(--k5); display:flex; flex-direction:column; box-shadow:var(--bong-nhe);
}
.goi-noi{border-color:var(--chinh); box-shadow:var(--bong-noi); position:relative}
.goi-co{
  position:absolute; top:calc(var(--k4) * -1); left:50%; transform:translateX(-50%);
  background:var(--chinh); color:#fff; font-size:var(--chu-nho); font-weight:var(--dam-vua);
  padding:var(--k1) var(--k4); border-radius:var(--bo-tron); white-space:nowrap;
}
.goi-gia{font-size:var(--chu-tieu-de); font-weight:var(--dam-manh); color:var(--chu); margin:var(--k3) 0 var(--k1)}
.goi-gia small{font-size:var(--chu-thuong); font-weight:var(--dam-thuong); color:var(--chu-phu)}
.goi ul{list-style:none; padding:0; margin:var(--k5) 0; flex:1}
.goi li{padding:var(--k2) 0 var(--k2) var(--k6); position:relative; font-size:var(--chu-thuong); color:var(--chu-phu)}
.goi li::before{content:"✓"; position:absolute; left:0; color:var(--chinh); font-weight:var(--dam-manh)}
.goi li.khong{color:#6D7875}   /* cũ #AAB2B0 chỉ đạt 2.16, mờ tịt */
.goi li.khong::before{content:"—"; color:#CBD2D0}

/* ---------- câu hỏi ---------- */
.hoi{border-bottom:1px solid var(--vien)}
.hoi summary{
  cursor:pointer; padding:var(--k5) var(--k6) var(--k5) 0; font-weight:var(--dam-vua);
  font-size:var(--chu-vua); list-style:none; position:relative;
}
.hoi summary::-webkit-details-marker{display:none}
.hoi summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:var(--chu-to); color:var(--chinh); font-weight:var(--dam-thuong);
}
.hoi[open] summary::after{content:"–"}
.hoi-noi{padding-bottom:var(--k5); color:var(--chu-phu)}
.hoi-noi p:last-child{margin-bottom:0}

/* ---------- bài viết ---------- */
.bai-the{
  background:var(--the); border:1px solid var(--vien); border-radius:var(--bo-vua);
  padding:var(--k5); display:flex; flex-direction:column; height:100%;
  transition:transform var(--nhip) var(--cong), box-shadow var(--nhip) var(--cong);
}
.bai-the:hover{transform:translateY(-3px); box-shadow:var(--bong-noi); text-decoration:none}
.bai-nhan{font-size:var(--chu-nho); color:var(--chinh); font-weight:var(--dam-vua); margin-bottom:var(--k2)}
.bai-the h3{font-size:var(--chu-vua); color:var(--chu); margin-bottom:var(--k2)}
.bai-the p{color:var(--chu-phu); font-size:var(--chu-thuong); flex:1}
.bai-ngay{font-size:var(--chu-nho); color:var(--chu-phu); margin-top:var(--k4)}

.noi-dung{max-width:720px; margin:0 auto}
.noi-dung h2{margin-top:var(--k8); font-size:var(--chu-to)}
.noi-dung h3{margin-top:var(--k6); font-size:var(--chu-vua)}
.noi-dung ul,.noi-dung ol{padding-left:var(--k5); margin:0 0 var(--k4)}
.noi-dung li{margin-bottom:var(--k2)}
.noi-dung blockquote{
  margin:var(--k5) 0; padding:var(--k4) var(--k5); border-left:3px solid var(--chinh);
  background:var(--chinh-nhat); border-radius:0 var(--bo-nho) var(--bo-nho) 0; color:var(--chu);
}
.noi-dung blockquote p:last-child{margin-bottom:0}
.noi-dung table{width:100%; border-collapse:collapse; margin:var(--k5) 0; font-size:var(--chu-thuong)}
.noi-dung th,.noi-dung td{padding:var(--k3); border:1px solid var(--vien); text-align:left}
.noi-dung th{background:var(--chinh-nhat); font-weight:var(--dam-vua)}
.bang-cuon{overflow-x:auto}

/* ---------- chân trang ---------- */
.chan{background:var(--toi); color:#8FA09C; padding:var(--k8) 0 var(--k6); font-size:var(--chu-thuong)}
.chan a{color:#B9C7C3}
.chan h4{color:#fff; font-size:var(--chu-thuong); font-weight:var(--dam-vua); margin:0 0 var(--k3)}
.chan-luoi{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--k6)}
@media(max-width:600px){ .chan-luoi{grid-template-columns:1fr; gap:var(--k5)} }
.chan ul{list-style:none; padding:0; margin:0}
.chan li{margin-bottom:var(--k2)}
.chan-duoi{
  border-top:1px solid rgba(255,255,255,.10); margin-top:var(--k6); padding-top:var(--k5);
  font-size:var(--chu-nho); display:flex; justify-content:space-between; gap:var(--k4); flex-wrap:wrap;
}

/* ---------- ô để lại số ---------- */
.form-o{display:flex; gap:var(--k3); flex-wrap:wrap}
.form-o input,.form-o textarea,.form-o select{
  flex:1; min-width:200px; padding:var(--k3) var(--k4); border:1px solid var(--vien);
  border-radius:var(--bo-nho); font-size:var(--chu-thuong); font-family:inherit; background:#fff; color:var(--chu);
}
.form-o input:focus,.form-o textarea:focus{outline:2px solid var(--chinh); outline-offset:1px}
.form-doc{flex-direction:column}
.form-doc input,.form-doc textarea{width:100%}
.form-nhac{font-size:var(--chu-nho); color:var(--chu-phu); margin-top:var(--k3)}
/* số điện thoại luôn trái-sang-phải kể cả khi trang đổi sang RTL */
input[type="tel"],.so-dt{direction:ltr; text-align:left}

/* ---------- chuyển động ---------- */
.hien{opacity:0; transform:translateY(14px)}
.hien.vao{opacity:1; transform:none; transition:opacity var(--nhip) var(--cong), transform var(--nhip) var(--cong)}
.hien.vao:nth-child(2){transition-delay:60ms}
.hien.vao:nth-child(3){transition-delay:120ms}
.hien.vao:nth-child(4){transition-delay:180ms}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .hien{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   ẢNH GIAO DIỆN PHẦN MỀM — dựng bằng HTML, không phải ảnh chụp
   Thêm 16/08/2026 sau khi anh Sơn chê "web như trẻ con":
   web bán phần mềm mà khách không thấy phần mềm thì lấy gì tin.
   Số liệu trong đây là SỐ GIẢ của tiệm mẫu, không phải dữ liệu thật.
   ============================================================ */

.man-hinh{
  background:#fff; border:1px solid var(--vien); border-radius:var(--bo-vua);
  box-shadow:var(--bong-noi); overflow:hidden; font-size:var(--chu-nho);
  /* 🔴 BẮT BUỘC khai màu chữ: màn hình này hay nằm trong khối tối (.hero, .khoi-toi),
     không khai thì chữ kế thừa màu sáng #E8EFEC → chữ trắng trên nền trắng, mất hút.
     Đã dính thật 16/08/2026, anh Sơn nhìn ảnh mới phát hiện. */
  color:var(--chu);
}
.man-hinh *{color:inherit}
.man-hinh .man-dong span:first-child,
.man-hinh .man-ten,
.man-hinh .man-tho-ten small,
.man-hinh .man-chu-thich{color:var(--chu-phu)}
.man-hinh .man-ket-do b{color:#B4472C}
.man-hinh .man-ket-xanh b{color:var(--chinh)}
.man-hinh .man-anh{color:var(--chinh)}
/* chú thích dưới màn hình thì nằm NGOÀI .man-hinh nên phải khai riêng theo nền */
.hero .man-chu-thich,.khoi-toi .man-chu-thich{color:#8FA09C}
.dien-thoai{color:var(--chu)}
.dien-thoai *{color:inherit}
.dien-thoai .dt-ngay,.dien-thoai .man-dong span:first-child{color:var(--chu-phu)}
.dien-thoai .dt-so-sanh{color:var(--chinh)}
.man-thanh{
  display:flex; align-items:center; gap:var(--k2);
  padding:var(--k3) var(--k4); background:#F4F2EE; border-bottom:1px solid var(--vien);
}
.man-cham{width:10px; height:10px; border-radius:var(--bo-tron); background:#D9D5CD}
.man-ten{margin-left:var(--k2); color:var(--chu-phu); font-weight:var(--dam-vua)}
.man-than{padding:var(--k5)}
.man-than h4{
  margin:0 0 var(--k4); font-size:var(--chu-thuong); font-weight:var(--dam-vua); color:var(--chu);
}

/* hàng số liệu trong màn hình */
.man-dong{
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--k3) 0; border-bottom:1px solid var(--vien);
}
.man-dong:last-child{border-bottom:0}
.man-dong span:first-child{color:var(--chu-phu)}
.man-dong span:last-child{font-weight:var(--dam-vua); font-variant-numeric:tabular-nums}

/* dòng kết quả nổi bật */
.man-ket{
  margin-top:var(--k4); padding:var(--k4); border-radius:var(--bo-nho);
  display:flex; justify-content:space-between; align-items:center;
}
.man-ket-do{background:#FBEAE5; border:1px solid #E8B4A5}
.man-ket-xanh{background:var(--chinh-nhat); border:1px solid var(--chinh)}
.man-ket b{font-size:var(--chu-to); font-variant-numeric:tabular-nums}
.man-ket-do b{color:#B4472C}
.man-ket-xanh b{color:var(--chinh)}

/* bảng thợ */
.man-tho{display:flex; align-items:center; gap:var(--k3); padding:var(--k3) 0; border-bottom:1px solid var(--vien)}
.man-tho:last-child{border-bottom:0}
.man-anh{
  width:32px; height:32px; border-radius:var(--bo-tron); background:var(--chinh-nhat);
  color:var(--chinh); display:grid; place-items:center; font-weight:var(--dam-vua); flex:0 0 auto;
}
.man-tho-ten{flex:1; min-width:0}
.man-tho-ten b{display:block; font-weight:var(--dam-vua); color:var(--chu)}
.man-tho-ten small{color:var(--chu-phu)}
.man-tho-tien{text-align:right; font-weight:var(--dam-vua); font-variant-numeric:tabular-nums; white-space:nowrap}

/* thanh tỉ lệ trong màn hình */
.man-thanh-do{height:6px; background:#EFECE6; border-radius:var(--bo-tron); overflow:hidden; margin-top:var(--k1)}
.man-thanh-do i{display:block; height:100%; background:var(--chinh); border-radius:var(--bo-tron)}

/* khung điện thoại */
.dien-thoai{
  max-width:264px; margin:0 auto; background:#fff; border:8px solid #1A2422;
  border-radius:28px; overflow:hidden; box-shadow:var(--bong-noi);
}
.dt-than{padding:var(--k4)}
.dt-ngay{color:var(--chu-phu); font-size:var(--chu-nho)}
.dt-to{font-size:var(--chu-tieu-de); font-weight:var(--dam-manh); color:var(--chu); line-height:1.15; font-variant-numeric:tabular-nums}
.dt-so-sanh{color:var(--chinh); font-weight:var(--dam-vua); font-size:var(--chu-nho)}

/* nhãn nhỏ dưới ảnh giao diện */
.man-chu-thich{
  margin-top:var(--k3); font-size:var(--chu-nho); color:var(--chu-phu); text-align:center;
}

/* biểu tượng vẽ nét thay cho emoji */
.icon{
  width:40px; height:40px; border-radius:var(--bo-nho); background:var(--chinh-nhat);
  display:grid; place-items:center; margin-bottom:var(--k4); flex:0 0 auto;
}
.icon svg{width:22px; height:22px; stroke:var(--chinh); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.khoi-toi .icon{background:rgba(255,255,255,.08)}
.khoi-toi .icon svg{stroke:#9FD6CD}

/* giá gạch ngang */
.gia-cu{text-decoration:line-through; color:var(--chu-phu); font-weight:var(--dam-thuong);
  font-size:var(--chu-thuong); margin-right:var(--k2)}

/* hai cột: chữ bên trái, màn hình bên phải */
.doi-cot{display:grid; grid-template-columns:1fr 1fr; gap:var(--k7); align-items:center}
@media(max-width:900px){ .doi-cot{grid-template-columns:1fr; gap:var(--k5)} }