/* ============================================================
   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(11,31,58,.06), 0 2px 8px rgba(11,31,58,.05);
  --bong-noi:0 16px 40px rgba(11,31,58,.12);

  /* xanh + trắng — bộ áo mới 01/09/2026 */
  --nen:#F6F9FD;
  --the:#FFFFFF;
  --chu:#0B1F3A;
  --chu-phu:#5C6C80;
  --vien:#DCE6F2;
  --chinh:#1268E8;
  --chinh-nhat:#EAF3FF;
  --nhan:#1268E8;
  --nhan-dam:#0B54C4;
  --toi:#071B33;
  --toi-chu:#EAF3FF;

  /* 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:var(--dam-manh); letter-spacing:-.035em; line-height:1.08}
h2{font-weight:var(--dam-manh)}
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(255,255,255,.94);
  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); letter-spacing:-.02em; color:var(--chu)}
.hieu:hover{text-decoration:none}
.hieu-o{
  width:40px; height:40px; border-radius:var(--bo-nho);
  background:transparent url('/assets/brand-mark-v1.png') center/contain no-repeat;
  color:transparent; overflow:hidden; display:grid; place-items:center; font-size:0;
}
.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-o option{font-size:var(--chu-thuong)}
.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 ---------- */
/* Nội dung luôn hiện. Bản cũ ẩn sẵn rồi chờ máy cuộn tới mới mở, khách kéo nhanh có thể
   bỏ sót cả một đoạn thành khoảng trắng. Chuyển động nay đặt ở hero, không giữ nội dung làm con tin. */
.hien,.hien.vao{opacity:1; transform:none}

@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)} }

/* ============================================================
   TRANG CHỦ 29SON — xanh trắng, dựng lại 01/09/2026
   ============================================================ */
.can-giua{text-align:center; max-width:820px; margin:0 auto}
.hero-moi{position:relative; overflow:hidden; padding:80px 0 72px; background:linear-gradient(135deg,#F7FAFF 0%,#FFFFFF 56%,#EEF5FF 100%); border-bottom:1px solid var(--vien)}
.hero-moi::before{content:""; position:absolute; width:520px; height:520px; right:-240px; top:-260px; border:1px solid #CFE1FB; border-radius:50%}
.hero-moi::after{content:""; position:absolute; width:360px; height:360px; left:-260px; bottom:-280px; background:#EAF3FF; border-radius:50%}
.hero-luoi{display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--k6); align-items:center; position:relative; z-index:1}
.hero-noi-dung{padding:var(--k4) 0}
.hero-badge{display:inline-flex; align-items:center; gap:var(--k2); color:var(--chinh); background:#fff; border:1px solid #CFE1FB; border-radius:var(--bo-tron); padding:var(--k2) var(--k4); font-size:var(--chu-nho); font-weight:var(--dam-vua); box-shadow:var(--bong-nhe); margin-bottom:var(--k5)}
.hero-badge span{width:8px; height:8px; background:var(--chinh); border-radius:50%}
.hero-moi h1{font-size:var(--chu-hero); max-width:12ch; color:var(--chu); margin-bottom:var(--k5)}
.hero-moi h1 em{font-style:normal; color:var(--chinh)}
.hero-mo-ta{font-size:var(--chu-to); line-height:1.5; color:var(--chu-phu); max-width:54ch}
.hero-nut{margin-top:var(--k6)}
.hero-nut .nut{min-height:52px}
.hero-cam-ket{display:flex; flex-wrap:wrap; gap:var(--k2) var(--k4); margin-top:var(--k5); color:var(--chu-phu); font-size:var(--chu-nho)}
.hero-cam-ket i{font-style:normal; color:var(--chinh); font-weight:var(--dam-manh)}
.hero-san-pham{position:relative; min-height:500px; display:grid; place-items:center}
.hero-san-pham img{position:relative; z-index:2; width:112%; max-width:none; margin-right:-10%; filter:drop-shadow(0 24px 32px rgba(11,31,58,.16))}
.hero-vong{position:absolute; border-radius:50%; z-index:1}
.hero-vong-1{width:430px; height:430px; background:#DCEBFF; right:4%; top:5%}
.hero-vong-2{width:310px; height:310px; border:1px solid #B9D4FA; right:20%; top:17%}
.hero-noi{position:absolute; z-index:3; background:#fff; border:1px solid var(--vien); border-radius:var(--bo-vua); box-shadow:var(--bong-noi); padding:var(--k3) var(--k4); max-width:210px}
.hero-noi b,.hero-noi span{display:block}.hero-noi b{color:var(--chinh); font-size:var(--chu-nho)}.hero-noi span{font-size:var(--chu-nho); color:var(--chu-phu)}
.hero-noi-trai{left:0; bottom:12%}.hero-noi-phai{right:-1%; top:15%}

.dai-bang-chung{padding:0; background:#fff; border-bottom:1px solid var(--vien)}
.dai-bang-chung-luoi{display:grid; grid-template-columns:repeat(4,1fr)}
.dai-bang-chung-luoi>div{display:flex; gap:var(--k3); align-items:center; padding:var(--k5) var(--k4); border-right:1px solid var(--vien)}
.dai-bang-chung-luoi>div:last-child{border-right:0}.dai-bang-chung p{margin:0}.dai-bang-chung b,.dai-bang-chung small{display:block}.dai-bang-chung b{font-size:var(--chu-nho)}.dai-bang-chung small{font-size:var(--chu-nho); color:var(--chu-phu); line-height:1.4; margin-top:2px}
.dai-icon{width:38px; height:38px; border-radius:var(--bo-nho); background:var(--chinh-nhat); color:var(--chinh); display:grid; place-items:center; flex:0 0 auto; font-weight:var(--dam-manh)}

.nganh-section{background:#fff; padding:88px 0 72px}.nganh-section h2{max-width:18ch; margin:0 auto var(--k4)}.nganh-section p{max-width:68ch; margin:0 auto}
.nganh-list{display:flex; justify-content:center; flex-wrap:wrap; gap:var(--k3); margin-top:var(--k6)}
.nganh-list span{padding:var(--k3) var(--k5); background:#F6F9FD; border:1px solid var(--vien); border-radius:var(--bo-tron); color:var(--chu); font-weight:var(--dam-vua)}

.giai-phap-section{background:#F6F9FD}.tieu-de-khoi{display:grid; grid-template-columns:1fr 1fr; gap:var(--k7); align-items:end; margin-bottom:var(--k8)}
.tieu-de-khoi h2{max-width:17ch}.tieu-de-khoi>p{max-width:48ch; justify-self:end}
.giai-phap{display:grid; grid-template-columns:.82fr 1.18fr; gap:var(--k8); align-items:center; padding:var(--k8) 0; border-top:1px solid var(--vien)}
.giai-phap.dao .giai-phap-chu{order:2}.giai-phap.dao>.ui-khung,.giai-phap.dao>.man-hinh{order:1}
.giai-phap-chu h3{font-size:var(--chu-tieu-de); max-width:18ch}.buoc-so{display:inline-grid; place-items:center; width:42px; height:42px; background:var(--chinh); color:#fff; border-radius:var(--bo-vua); font-weight:var(--dam-manh); margin-bottom:var(--k5)}
.tick-list{list-style:none; padding:0; margin:var(--k5) 0 0}.tick-list li{position:relative; padding:var(--k2) 0 var(--k2) var(--k6); color:var(--chu)}.tick-list li::before{content:"✓"; position:absolute; left:0; top:8px; width:20px; height:20px; border-radius:50%; background:var(--chinh-nhat); color:var(--chinh); display:grid; place-items:center; font-size:12px; font-weight:var(--dam-manh)}
.ui-khung,.ui-man-hinh{border:1px solid #C9DBF2; border-radius:var(--bo-to); box-shadow:var(--bong-noi); overflow:hidden; background:#fff}
.ui-dau{height:52px; display:flex; align-items:center; gap:var(--k2); padding:0 var(--k4); background:#F9FBFE; border-bottom:1px solid var(--vien)}
.ui-dau>span{width:10px; height:10px; border-radius:50%; background:#D6E2F0}.ui-dau b{margin-left:var(--k2); font-size:var(--chu-nho)}.ui-dau i{margin-left:auto; font-style:normal; background:var(--chinh); color:#fff; border-radius:var(--bo-nho); padding:var(--k2) var(--k3); font-size:var(--chu-nho); font-weight:var(--dam-vua)}
.ui-than{display:grid; grid-template-columns:56px repeat(3,1fr); min-height:360px; padding:var(--k4); gap:var(--k2); background-image:linear-gradient(#EEF3F8 1px,transparent 1px); background-size:100% 72px}
.ui-lich-cot{display:flex; flex-direction:column; gap:var(--k3)}.ui-lich-cot strong{height:36px; font-size:var(--chu-nho); text-align:center}.ui-gio{color:var(--chu-phu); font-size:var(--chu-nho); padding-top:44px}.ui-gio b{height:60px; font-weight:var(--dam-thuong)}
.lich-the{padding:var(--k3); min-height:52px; border-radius:var(--bo-nho); font-size:var(--chu-nho); font-weight:var(--dam-vua); border-left:3px solid}.lich-the.xanh{background:#EAF3FF; border-color:#1268E8; color:#0B54C4}.lich-the.tim{background:#F1EEFF; border-color:#7158D9; color:#5039B7}.lich-the.cam{background:#FFF2E8; border-color:#E17A2D; color:#A94E10}.lich-the.nhat{background:#F4F7FA; border-color:#B9C8D8; color:#607286}.lich-the.dai{min-height:116px}
.ui-man-hinh{font-size:var(--chu-nho)}.ui-man-hinh .man-thanh{background:#F9FBFE}.ui-man-hinh .man-than{padding:var(--k6)}
.khach-dau{display:flex; gap:var(--k3); align-items:center; margin-bottom:var(--k5)}.khach-dau>div:nth-child(2){flex:1}.khach-dau b,.khach-dau small{display:block}.khach-dau small{color:var(--chu-phu)}.khach-dau button{border:0; border-radius:var(--bo-nho); background:var(--chinh); color:#fff; padding:var(--k2) var(--k3); font:inherit; font-weight:var(--dam-vua)}
.man-thanh-do i{background:var(--chinh)}

.he-sinh-thai{background:#fff}.tieu-de-he{max-width:720px; margin-bottom:var(--k7)}.tinh-nang-luoi{gap:var(--k5)}
.tinh-nang-the{padding:var(--k6); box-shadow:none; border-color:#D8E5F4}.tinh-nang-the:hover{border-color:#A9CAF5; box-shadow:var(--bong-noi)}.tinh-nang-the h3{font-size:var(--chu-vua)}
.tinh-nang-icon{display:grid; place-items:center; width:46px; height:46px; border-radius:var(--bo-vua); background:var(--chinh-nhat); color:var(--chinh); font-size:var(--chu-to); font-weight:var(--dam-manh); margin-bottom:var(--k5)}
.xem-them{text-align:center; margin-top:var(--k6)}.xem-them a{font-weight:var(--dam-vua)}

.khac-biet-section{background:linear-gradient(145deg,#EFF6FF,#F8FBFF); border-top:1px solid var(--vien); border-bottom:1px solid var(--vien)}
.khac-biet-luoi{display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--k8); align-items:center}.khac-biet-luoi>div:first-child>p{max-width:42ch}.khac-biet-luoi .nut{margin-top:var(--k4); background:#fff}
.khac-biet-danh-sach{display:flex; flex-direction:column; gap:var(--k4)}.khac-biet-danh-sach article{display:flex; gap:var(--k5); padding:var(--k5); background:#fff; border:1px solid var(--vien); border-radius:var(--bo-vua); box-shadow:var(--bong-nhe)}.khac-biet-danh-sach article>span{font-size:var(--chu-vua); font-weight:var(--dam-manh); color:var(--chinh)}.khac-biet-danh-sach h3{font-size:var(--chu-vua); margin-bottom:var(--k2)}.khac-biet-danh-sach p{margin:0}

.xem-thu-section{background:#fff}.xem-thu-luoi article{position:relative; padding:var(--k6); border-top:3px solid var(--chinh); background:#F8FBFF; border-radius:0 0 var(--bo-vua) var(--bo-vua)}.xem-thu-luoi article>b{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--chinh); color:#fff; margin-bottom:var(--k4)}.xem-thu-luoi h3{font-size:var(--chu-vua)}
.faq-section{background:#F6F9FD}.faq-section h2{margin-bottom:var(--k5)}.faq-section .hoi{background:#fff; border:1px solid var(--vien); border-radius:var(--bo-vua); padding:0 var(--k5); margin-bottom:var(--k3)}

.cta-cuoi{background:var(--toi); color:#fff; position:relative; overflow:hidden}.cta-cuoi::before{content:""; position:absolute; width:520px; height:520px; right:-260px; top:-280px; border-radius:50%; background:#1268E8; opacity:.16}.cta-cuoi-luoi{display:grid; grid-template-columns:1fr 460px; gap:var(--k8); align-items:center; position:relative}.cta-cuoi h2{font-size:var(--chu-tieu-de); color:#fff}.cta-cuoi-luoi>div>p{color:#C6D4E5; font-size:var(--chu-vua); max-width:45ch}.cta-nhan{display:inline-block; color:#7DB4FF; font-weight:var(--dam-vua); margin-bottom:var(--k4)}.cta-diem{display:flex; flex-direction:column; gap:var(--k2); color:#DDE9F7; margin-top:var(--k5)}
.form-trang{background:#fff; padding:var(--k6); border-radius:var(--bo-to); box-shadow:var(--bong-noi); color:var(--chu)}.form-trang h3{margin-bottom:var(--k1)}.form-trang>p.phu{margin-bottom:var(--k4)}.form-trang label{display:flex; flex-direction:column; gap:var(--k2); font-size:var(--chu-nho); font-weight:var(--dam-vua)}.form-trang input,.form-trang select{margin:0; font-weight:var(--dam-thuong); min-width:0}.form-trang .nut{justify-content:center; margin-top:var(--k2)}
.hieu-chan{color:#fff; margin-bottom:var(--k4)}.hieu-chan:hover{color:#fff}

@keyframes vao-tu-trai{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes vao-tu-phai{from{opacity:0;transform:translateX(18px) scale(.985)}to{opacity:1;transform:none}}
.hero-noi-dung{animation:vao-tu-trai 520ms var(--cong) both}
.hero-san-pham{animation:vao-tu-phai 620ms var(--cong) 80ms both}

@media(max-width:1050px){
  .hero-luoi{grid-template-columns:1fr 1fr}.hero-moi h1{font-size:48px}.hero-san-pham{min-height:430px}.dai-bang-chung-luoi{grid-template-columns:repeat(2,1fr)}.dai-bang-chung-luoi>div:nth-child(2){border-right:0}.dai-bang-chung-luoi>div:nth-child(-n+2){border-bottom:1px solid var(--vien)}
}
@media(max-width:900px){
  .hero-moi{padding:56px 0 40px}.hero-luoi,.tieu-de-khoi,.giai-phap,.khac-biet-luoi,.cta-cuoi-luoi{grid-template-columns:1fr}.hero-noi-dung{text-align:center}.hero-moi h1{max-width:14ch; margin-left:auto; margin-right:auto}.hero-mo-ta{margin-left:auto; margin-right:auto}.hero-nut,.hero-cam-ket{justify-content:center}.hero-san-pham{min-height:420px}.hero-san-pham img{width:100%; margin:0}.hero-noi-trai{left:6%}.hero-noi-phai{right:4%}.tieu-de-khoi{gap:var(--k4)}.tieu-de-khoi>p{justify-self:start}.giai-phap{gap:var(--k6)}.giai-phap.dao .giai-phap-chu,.giai-phap.dao>.ui-khung,.giai-phap.dao>.man-hinh{order:initial}.giai-phap-chu h3{max-width:none}.khac-biet-luoi,.cta-cuoi-luoi{gap:var(--k7)}.cta-cuoi-luoi{max-width:720px}.form-trang{width:100%}
}
@media(max-width:600px){
  .hero-moi{padding-top:40px}.hero-moi h1{font-size:36px}.hero-mo-ta{font-size:var(--chu-vua)}.hero-nut{flex-direction:column}.hero-nut .nut{width:100%; justify-content:center}.hero-cam-ket{flex-direction:column; align-items:center}.hero-san-pham{min-height:300px}.hero-noi{display:none}.hero-vong-1{width:280px; height:280px}.hero-vong-2{width:200px; height:200px}.dai-bang-chung-luoi{grid-template-columns:1fr}.dai-bang-chung-luoi>div{border-right:0; border-bottom:1px solid var(--vien)!important}.dai-bang-chung-luoi>div:last-child{border-bottom:0!important}.nganh-section{padding:64px 0 48px}.nganh-list{display:grid; grid-template-columns:1fr 1fr}.nganh-list span{padding:var(--k3); font-size:var(--chu-nho)}.giai-phap{padding:var(--k7) 0}.giai-phap-chu h3{font-size:var(--chu-to)}.ui-than{grid-template-columns:44px repeat(3,1fr); min-width:620px}.ui-lich{overflow-x:auto}.ui-man-hinh .man-than{padding:var(--k4)}.khach-dau{flex-wrap:wrap}.khach-dau button{width:100%}.man-tho{align-items:flex-start}.man-tho-tien{font-size:var(--chu-nho)}.man-ket{gap:var(--k2)}.man-ket b{font-size:var(--chu-vua)}.cta-cuoi h2{font-size:var(--chu-tieu-de)}.form-trang{padding:var(--k5)}
}