/* ================================================================
   Nguyễn Khương — BẢN B
   Xanh thép sáng · bố cục & nhịp chữ theo ngai.vn nhưng cứng cáp hơn:
   bo góc sắc 4px, viền dày, nhãn in hoa nén, khối định nghĩa rõ.
   ================================================================ */

:root {
  --xanh:        #1E5FA8;   /* xanh thép sáng — màu số 1 */
  --xanh-sang:   #2E76C4;
  --xanh-tham:   #12406F;
  --xanh-mo:     rgba(30, 95, 168, .08);
  --nga:         #FDF8F4;
  --nga-dam:     #F5EEE7;
  --nga-vien:    #E4D8CC;
  --muc:         #3E3936;
  --muc-nhat:    #6B625E;
  --cam:         #C2703D;
  --cam-sang:    #E08A50;
  --trang:       #FFFFFF;

  --f-tieu-de: "Noto Serif", Georgia, "Times New Roman", serif;
  --f-than:    "Noto Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* nhịp khoảng cách của ngai.vn */
  --k1: 8px;  --k2: 16px; --k3: 24px; --k4: 40px;
  --k5: 64px; --k6: 96px; --k7: 128px;

  --rong: 1240px;
  --rong-hep: 780px;
  --bo: 4px;                                    /* sắc, không bo tròn mềm */
  --vien: 1px solid var(--nga-vien);
  --vien-day: 2px solid var(--xanh);
  --bong: 0 16px 44px rgba(30, 95, 168, .10);
  --bong-nho: 0 3px 12px rgba(30, 95, 168, .10);
  --nhanh: 200ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--nga); color: var(--muc);
  font-family: var(--f-than); font-size: 17px;
  line-height: 1.75;                             /* nhịp đọc của ngai.vn */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-tieu-de); color: var(--xanh-tham);
  line-height: 1.22; margin: 0 0 var(--k2);
  font-weight: 700; letter-spacing: -.015em;
}
h1 { font-size: clamp(32px, 5.6vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 40px); }
h3 { font-size: clamp(19px, 2.2vw, 23px); }
p  { margin: 0 0 var(--k2); }

a { color: var(--xanh); text-underline-offset: 3px; }
a:hover { color: var(--xanh-tham); }
img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--cam); outline-offset: 3px; }

.chi-doc-man-hinh { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.bo-qua { position:absolute;left:-9999px;top:0;z-index:200;background:var(--xanh);color:#fff;padding:12px 20px; }
.bo-qua:focus { left:0; }

.khung { width:100%; max-width:var(--rong); margin:0 auto; padding:0 var(--k3); }
.khung-hep { max-width: var(--rong-hep); }

/* ---------- NHÃN in hoa nén — vai trò của Oswald bên ngai.vn ---------- */
.nhan {
  display: inline-block; font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cam); margin-bottom: var(--k2);
}

/* ---------- Đầu trang ---------- */
.dau-trang {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,248,244,.96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 2px solid var(--nga-vien);
}
.dau-trang .khung { display:flex; align-items:center; gap:var(--k3); min-height:78px; }
.hieu { display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; flex-shrink:0; }
.hieu svg { width:40px; height:40px; flex-shrink:0; }
.hieu-chu { display:flex; flex-direction:column; line-height:1.12; }
.hieu-ten { font-family:var(--f-tieu-de); font-weight:700; font-size:20px; color:var(--xanh-tham); letter-spacing:-.015em; }
.hieu-phu { font-size:10px; color:var(--muc-nhat); letter-spacing:.19em; text-transform:uppercase; font-weight:800; margin-top:2px; }

.menu { display:flex; gap:var(--k3); align-items:center; }
.menu a {
  color: var(--muc); text-decoration:none; font-size:15px; font-weight:600;
  padding:9px 0; white-space:nowrap; position:relative;
  letter-spacing:.01em; transition: var(--nhanh);
}
.menu a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--cam); transform:scaleX(0); transform-origin:left;
  transition: transform var(--nhanh);
}
.menu a:hover { color: var(--xanh-tham); }
.menu a:hover::after { transform: scaleX(1); }

/* ---------- NÚT — bản thiết kế lại ---------- */
.nut {
  --nut-nen: var(--xanh);
  --nut-chu: #fff;
  position: relative; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 30px;
  border-radius: var(--bo);
  font-family:var(--f-than); font-size:16px; font-weight:700;
  letter-spacing:.015em; text-decoration:none;
  border:2px solid var(--nut-nen); background:var(--nut-nen); color:var(--nut-chu);
  cursor:pointer; text-align:center; isolation:isolate;
  transition: transform var(--nhanh), box-shadow var(--nhanh), border-color var(--nhanh);
}
/* lớp phủ sáng chạy qua khi di chuột */
.nut::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 520ms ease;
}
.nut:hover::before { transform: translateX(120%); }
.nut:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(30,95,168,.30); }
.nut:active { transform: translateY(0); box-shadow: var(--bong-nho); }

.nut svg { width:19px; height:19px; flex-shrink:0; }
/* mũi tên trượt nhẹ */
.nut .mui { transition: transform var(--nhanh); }
.nut:hover .mui { transform: translateX(4px); }

.nut-phu {
  --nut-nen: transparent; --nut-chu: var(--xanh-tham);
  border-color: var(--xanh); background: transparent;
}
.nut-phu:hover { background: var(--xanh-mo); border-color: var(--xanh-tham); color: var(--xanh-tham); box-shadow: none; }

.nut-cam { --nut-nen: var(--cam); }
.nut-cam:hover { box-shadow: 0 10px 26px rgba(194,112,61,.34); }

.nut-trang { --nut-nen:#fff; --nut-chu: var(--xanh-tham); border-color:#fff; }
.nut-trang:hover { box-shadow: 0 10px 26px rgba(0,0,0,.20); }

.nut-vien-trang { --nut-nen: transparent; --nut-chu:#fff; border-color: rgba(255,255,255,.6); }
.nut-vien-trang:hover { background: rgba(255,255,255,.12); border-color:#fff; box-shadow:none; }

.nut-nho { min-height:44px; padding:10px 20px; font-size:15px; }

.nut-menu {
  display:none; background:none; border:0; cursor:pointer;
  padding:12px; min-width:48px; min-height:48px; color:var(--xanh-tham); border-radius:var(--bo);
}
.nut-menu:hover { background: var(--nga-dam); }

/* ---------- Hero có băng ảnh bìa chạy ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: clamp(520px, 74vh, 720px);
  display: flex; align-items: flex-end;
  padding: clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px);
}
.hero-bang { position:absolute; inset:0; z-index:0; background:var(--xanh-tham); }
.hero-bang picture {
  position:absolute; inset:0; opacity:0;
  transition: opacity 1100ms ease;
}
.hero-bang picture.hien { opacity:1; }
.hero-bang img { width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block; }
/* Lớp phủ nhẹ cho tổng thể — KHÔNG dựa vào lớp này để đọc chữ.
   Lý do: 4 ảnh thay nhau, mỗi ảnh sáng tối khác nhau nên không lớp phủ nào
   vừa cho tất cả. Chữ nằm trên panel đặc bên dưới mới là thứ bảo đảm đọc được. */
.hero::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(9,32,56,.34) 0%, rgba(9,32,56,.18) 40%, rgba(9,32,56,.58) 100%);
}
.hero > .khung { position:relative; z-index:2; width:100%; }

.hero-cha {
  position:absolute; right:20px; bottom:18px; z-index:2;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.80); background:rgba(9,32,56,.55);
  padding:7px 14px; border-radius:var(--bo);
  backdrop-filter:blur(4px); max-width:60vw;
}
.hero-cham { position:absolute; left:50%; transform:translateX(-50%); bottom:18px; z-index:2; display:flex; gap:12px; }
.hero-cham button {
  width:34px; height:5px; border:0; padding:0; cursor:pointer; position:relative;
  background:rgba(255,255,255,.34); border-radius:99px; transition:var(--nhanh);
}
/* Vạch chỉ cao 5px — ngón tay không bấm trúng. Nới vùng chạm vô hình lên 44px
   mà không đổi hình vạch. */
.hero-cham button::after {
  content:""; position:absolute; left:-5px; right:-5px;
  top:50%; transform:translateY(-50%); height:44px;
}
.hero-cham button[aria-current="true"] { background:var(--cam-sang); width:52px; }
.hero-cham button:hover { background:rgba(255,255,255,.66); }

/* Panel kính mờ — đủ đọc chữ mà vẫn thấy ảnh xuyên qua.
   Bí quyết: độ đục vừa phải + độ mờ nền CAO. Mờ nền xoá chi tiết rối phía sau
   nên chữ vẫn rõ dù nền chỉ đục 68%. */
.hero-trong {
  max-width: 36rem;
  background: rgba(9, 32, 56, .68);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
  border-left: 5px solid var(--cam-sang);
  padding: clamp(26px, 3.2vw, 38px) clamp(22px, 2.8vw, 40px);
  border-radius: 0 var(--bo) var(--bo) 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
/* Trình duyệt không hỗ trợ mờ nền thì phải đục hơn, nếu không chữ sẽ khó đọc */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-trong { background: rgba(9, 32, 56, .88); }
}
.hero-trong h1, .hero-trong .hero-dan { color:#fff; }
.hero-trong h1 { text-shadow:none; }
/* Cam nhạt hơn cho nền tối — bản #E08A50 chỉ đạt tương phản 2,47, dưới chuẩn 4,5.
   Phải viết .hero .hero-trong vì luật .hero h1 em bên dưới cùng độ ưu tiên sẽ thắng. */
.hero .hero-trong h1 em { color:#FBC79B; box-shadow:none; }
.hero-trong .hero-dan { color:rgba(255,255,255,.93); margin-bottom:var(--k3); }
.hero-trong .hero-nhan { background:transparent; border:2px solid rgba(255,255,255,.30); color:#fff; }
.hero-trong .hero-nhan .sao { color:var(--cam-sang); }
.hero-trong .hero-duoi {
  background:rgba(9,32,56,.52); border-left-color:var(--cam-sang);
  backdrop-filter:blur(6px); color:rgba(255,255,255,.94);
}
.hero-trong .hero-duoi span { color:rgba(255,255,255,.72) !important; }
.hero-trong .nut-phu { color:#fff; border-color:rgba(255,255,255,.62); }
.hero-trong .nut-phu:hover { background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

/* ---------- Khối 4 bước (đã tách khỏi hero) ---------- */
.hero-luoi { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,76px); align-items:center; }

.hero-nhan {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--trang); border:2px solid var(--nga-vien);
  border-radius:var(--bo); padding:9px 18px;
  font-size:14px; font-weight:700; color:var(--muc); margin-bottom:var(--k3);
}
.hero-nhan .sao { color:var(--cam); font-size:16px; letter-spacing:1px; }
.hero h1 { margin-bottom:var(--k3); }
.hero h1 em {
  font-style:normal; color:var(--xanh);
  box-shadow: inset 0 -14px 0 rgba(194,112,61,.20);
}
.hero-dan { font-size:clamp(17px,2.1vw,20px); max-width:31em; margin-bottom:var(--k4); }
.hero-nut { display:flex; gap:var(--k2); flex-wrap:wrap; }
.hero-duoi {
  margin-top:var(--k4); padding:var(--k3);
  background:var(--trang); border-left:4px solid var(--cam);
  font-size:15.5px; color:var(--muc);
}

/* Khối 4 bước */
.hero-hinh { background:var(--trang); border:2px solid var(--nga-vien); padding:clamp(28px,4vw,44px); box-shadow:var(--bong); }
.buoc-list { list-style:none; margin:0; padding:0; }
.buoc { display:grid; grid-template-columns:44px 1fr; gap:var(--k3); padding-bottom:var(--k3); position:relative; }
.buoc:last-child { padding-bottom:0; }
.buoc:not(:last-child)::before { content:""; position:absolute; left:21px; top:44px; bottom:4px; width:2px; background:var(--nga-vien); }
.buoc-so {
  width:44px; height:44px; border-radius:var(--bo);
  background:var(--nga); border:2px solid var(--xanh); color:var(--xanh);
  font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; font-family:var(--f-than);
}
.buoc:last-child .buoc-so { background:var(--cam); border-color:var(--cam); color:#fff; }
.buoc h3 { font-size:17.5px; margin:9px 0 4px; }
.buoc p { font-size:15px; color:var(--muc-nhat); margin:0; line-height:1.65; }

/* ---------- Dải số ---------- */
.dai-so { background:var(--xanh-tham); color:#fff; padding:var(--k5) 0; }
.dai-so-luoi { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--k3); }
.o-so { text-align:center; padding:0 var(--k2); border-left:1px solid rgba(255,255,255,.18); }
.o-so:first-child { border-left:0; }
.so-lon { font-family:var(--f-tieu-de); font-size:clamp(28px,3.6vw,42px); font-weight:700; color:#fff; line-height:1.05; margin-bottom:10px; }
.so-lon .diem { color:var(--cam-sang); }
.so-nhan { font-size:13px; color:rgba(255,255,255,.80); line-height:1.5; letter-spacing:.02em; }

/* ---------- Mục ---------- */
.muc { padding: clamp(60px,8vw,110px) 0; }
.muc-nga { background:var(--nga-dam); }
.muc-dau { max-width:40em; margin-bottom:var(--k5); }
.muc-dau.giua { margin-left:auto; margin-right:auto; text-align:center; }
.muc-dan { font-size:17.5px; color:var(--muc-nhat); margin:0; }

/* ---------- Thẻ ---------- */
.luoi { display:grid; gap:var(--k3); }
.luoi-3 { grid-template-columns:repeat(3,1fr); }
.luoi-2 { grid-template-columns:repeat(2,1fr); }
.luoi-4 { grid-template-columns:repeat(4,1fr); }

.the {
  background:var(--trang); border:2px solid var(--nga-vien);
  padding:var(--k4) var(--k3); transition:var(--nhanh);
  display:flex; flex-direction:column; position:relative;
}
.the::after { content:""; position:absolute; left:-2px; right:-2px; top:-2px; height:4px; background:var(--xanh); transform:scaleX(0); transform-origin:left; transition:transform var(--nhanh); }
.the:hover { border-color:rgba(30,95,168,.35); box-shadow:var(--bong); transform:translateY(-3px); }
.the:hover::after { transform:scaleX(1); }
.muc-nga .the { background:var(--nga); }
.the-icon { width:52px; height:52px; border-radius:var(--bo); background:var(--xanh-mo); color:var(--xanh); display:flex; align-items:center; justify-content:center; margin-bottom:var(--k3); }
.the-icon svg { width:26px; height:26px; }
.the h3 { margin-bottom:10px; }
.the p { font-size:15.5px; color:var(--muc-nhat); margin-bottom:var(--k2); }
.the p:last-child { margin-bottom:0; }
.the-gia { margin-top:auto; padding-top:var(--k2); border-top:2px solid var(--nga-vien); font-weight:800; color:var(--xanh-tham); font-size:18px; }
.the-gia span { font-weight:400; color:var(--muc-nhat); font-size:14.5px; }

/* Ba trụ */
.tru { padding:var(--k3) 0; border-top:3px solid var(--xanh); }
.tru-so { font-family:var(--f-than); font-size:13px; font-weight:800; color:var(--cam); letter-spacing:.16em; margin-bottom:12px; }
.tru h3 { font-size:21px; margin-bottom:10px; }
.tru p { font-size:15.5px; color:var(--muc-nhat); margin:0; }

/* ---------- Ảnh thật ---------- */
.anh-luoi { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--k2); }
.anh-o { position:relative; overflow:hidden; border:2px solid var(--nga-vien); background:var(--nga-dam); aspect-ratio:4/3; }
.anh-o img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms ease; }
.anh-o:hover img { transform:scale(1.04); }
.anh-o.cao { aspect-ratio:4/5; }

/* ---------- Chuyên gia ---------- */
.cg-luoi { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,5vw,72px); align-items:start; }
.cg-anh { border:2px solid var(--nga-vien); overflow:hidden; aspect-ratio:4/5; }
.cg-anh img { width:100%; height:100%; object-fit:cover; display:block; }
.cg-noi p { font-size:17.5px; }
.cg-noi p:first-of-type::first-letter { font-family:var(--f-tieu-de); font-size:3.2em; float:left; line-height:.8; padding:5px 12px 0 0; color:var(--xanh); font-weight:700; }
.cg-chungchi { background:var(--trang); border-left:4px solid var(--cam); padding:var(--k3); margin-top:var(--k3); font-size:15.5px; }
.cg-chungchi strong { color:var(--xanh-tham); }

/* ---------- Đánh giá ---------- */
.dg { background:var(--trang); border:2px solid var(--nga-vien); padding:var(--k4) var(--k3); display:flex; flex-direction:column; }
.muc-nga .dg { background:var(--nga); }
.dg-sao { color:var(--cam); font-size:17px; letter-spacing:2px; margin-bottom:var(--k2); }
.dg blockquote { margin:0 0 var(--k3); font-size:16.5px; line-height:1.72; flex:1; }
.dg-chan { display:flex; align-items:center; gap:12px; padding-top:var(--k2); border-top:2px solid var(--nga-vien); }
.dg-chu { width:40px; height:40px; border-radius:50%; background:var(--xanh); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0; }
.dg-ten { font-weight:800; color:var(--xanh-tham); font-size:15px; line-height:1.3; }
.dg-phu { font-size:13px; color:var(--muc-nhat); }

/* ---------- Kênh: dải video + 4 kênh ---------- */

/* Dải video. Trên máy tính chia 5 cột; trên điện thoại thành băng cuộn ngang
   để không phải cuộn dọc qua 5 thẻ cao. */
.video-dai {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--k2);
  margin-bottom:var(--k2);
}
.video-the { display:flex; flex-direction:column; gap:12px; min-width:0; }

.video-nut {
  position:relative; display:block; width:100%; padding:0; border:2px solid var(--nga-vien);
  background:var(--muc); cursor:pointer; overflow:hidden; aspect-ratio:9/16;
  transition:var(--nhanh); border-radius:var(--bo);
}
.video-nut img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.video-nut:hover { border-color:var(--xanh); box-shadow:var(--bong); }
.video-nut:hover img { transform:scale(1.05); }
.video-nut:focus-visible { outline:3px solid var(--cam); outline-offset:3px; }

/* Nút phát: nền tối mờ để nổi trên mọi ảnh, không phải chỉnh từng tấm. */
.video-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  background:rgba(9,32,56,.72); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:var(--nhanh); box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.video-play svg { width:28px; height:28px; color:#fff; margin-left:3px; }
.video-nut:hover .video-play { background:var(--xanh); transform:translate(-50%,-50%) scale(1.1); }

/* Thanh "đang chiếu" chạy dọc mép dưới ảnh cho biết đây là video, không phải ảnh tĩnh */
.video-nut::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--cam) 0%, var(--cam-sang) 100%);
  transform:scaleX(.18); transform-origin:left; transition:transform .5s ease;
}
.video-nut:hover::after { transform:scaleX(1); }

.video-ten {
  font-size:14px; line-height:1.45; font-weight:700; color:var(--xanh-tham); margin:0;
}
.video-nhac { text-align:center; font-size:13.5px; color:var(--muc-nhat); margin:0 0 var(--k4); }

/* Khi khách bấm, trình phát YouTube thay chỗ ảnh */
.video-khung { width:100%; aspect-ratio:9/16; border:2px solid var(--xanh); border-radius:var(--bo); overflow:hidden; }
.video-khung iframe { width:100%; height:100%; border:0; display:block; }

/* Bốn kênh: hàng ngang, mỗi kênh một dấu hiệu màu riêng của nền tảng */
.kenh-hang { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--k2); }
.kenh-o {
  display:flex; align-items:center; gap:14px; padding:var(--k3);
  background:var(--trang); border:2px solid var(--nga-vien); border-left-width:5px;
  text-decoration:none; color:var(--muc); transition:var(--nhanh); border-radius:var(--bo);
}
.kenh-o:hover { transform:translateY(-3px); box-shadow:var(--bong); border-color:var(--nga-vien); }
.kenh-hieu {
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.kenh-hieu svg { width:24px; height:24px; }
.kenh-noi { display:flex; flex-direction:column; gap:1px; min-width:0; }
.kenh-so { font-family:var(--f-tieu-de); font-size:21px; font-weight:700; line-height:1.1; color:var(--xanh-tham); }
.kenh-sao { color:var(--cam); font-size:17px; }
.kenh-ten { font-size:13px; font-weight:700; color:var(--muc); }
.kenh-vi { font-size:12.5px; line-height:1.4; color:var(--muc-nhat); }

/* Màu chính thức của từng nền tảng, chỉ dùng ở chấm tròn và viền trái —
   không tô mảng lớn để không phá bảng màu thương hiệu. */
.kenh-fb { border-left-color:#1877F2; } .kenh-fb .kenh-hieu { background:#1877F2; }
.kenh-tt { border-left-color:#111; }    .kenh-tt .kenh-hieu { background:#111; }
.kenh-yt { border-left-color:#FF0000; } .kenh-yt .kenh-hieu { background:#FF0000; }
.kenh-gg { border-left-color:#1A73E8; } .kenh-gg .kenh-hieu { background:#1A73E8; }
.kenh-fb:hover { border-color:#1877F2; } .kenh-tt:hover { border-color:#111; }
.kenh-yt:hover { border-color:#FF0000; } .kenh-gg:hover { border-color:#1A73E8; }

/* ---------- Hỏi đáp ---------- */
.hd { border-bottom:2px solid var(--nga-vien); }
.hd summary { cursor:pointer; list-style:none; padding:var(--k3) 46px var(--k3) 0; font-family:var(--f-tieu-de); font-size:18.5px; font-weight:700; color:var(--xanh-tham); position:relative; }
.hd summary::-webkit-details-marker { display:none; }
.hd summary::after { content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:28px; color:var(--cam); font-family:var(--f-than); line-height:1; }
.hd[open] summary::after { content:"−"; }
.hd summary:hover { color:var(--xanh); }
.hd-noi { padding:0 46px var(--k3) 0; color:var(--muc-nhat); font-size:16px; }
.hd-noi p:last-child { margin-bottom:0; }

/* ---------- CTA ---------- */
.cta { background:var(--xanh); color:#fff; text-align:center; padding:clamp(60px,8vw,100px) 0; }
.cta h2 { color:#fff; }
.cta p { color:rgba(255,255,255,.90); font-size:18px; max-width:35em; margin:0 auto var(--k4); }
.cta-nut { display:flex; gap:var(--k2); justify-content:center; flex-wrap:wrap; }
/* Ô lưu ý: nền SÁNG đặt trên nền xanh. Bản cũ dùng đen mờ 16% trên xanh —
   gần như cùng một màu nên cả mục dồn thành một mảng xanh liền. */
.cta-luuy {
  max-width:44em; margin:var(--k5) auto 0; padding:var(--k4);
  background:var(--nga); border-left:5px solid var(--cam);
  border-radius:var(--bo); box-shadow:0 14px 40px rgba(0,0,0,.22);
  text-align:left; font-size:15.5px; line-height:1.72; color:var(--muc);
}
.cta-luuy strong { color:var(--xanh-tham); }
.cta-duoi { margin-top:var(--k4); font-size:15px; color:rgba(255,255,255,.75); }

/* ---------- Chân trang ---------- */
.chan { background:var(--xanh-tham); color:rgba(255,255,255,.78); padding:var(--k5) 0 var(--k3); font-size:15px; }
.chan-luoi { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--k4); margin-bottom:var(--k4); }
.chan-map { border-radius:var(--bo); overflow:hidden; margin-bottom:var(--k4); border:1px solid rgba(255,255,255,.15); line-height:0; }
.chan-map iframe { display:block; width:100%; height:320px; }
.chan h4 { color:#fff; font-size:12px; font-family:var(--f-than); font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin-bottom:var(--k3); }
.chan a { color:rgba(255,255,255,.78); text-decoration:none; }
.chan a:hover { color:#fff; text-decoration:underline; }
.chan ul { list-style:none; margin:0; padding:0; }
.chan li { margin-bottom:11px; }
.chan .hieu-ten { color:#fff; }
.chan .hieu-phu { color:rgba(255,255,255,.55); }
.chan-tagline { font-family:var(--f-tieu-de); font-style:italic; color:var(--cam-sang); margin-top:var(--k2); font-size:16.5px; }
.chan-kenh { display:flex; gap:10px; margin-top:var(--k3); }
.chan-kenh a { width:42px; height:42px; border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:var(--nhanh); }
.chan-kenh a:hover { background:#fff; color:var(--xanh-tham); border-color:#fff; }
.chan-kenh svg { width:19px; height:19px; }
.chan-cuoi { border-top:1px solid rgba(255,255,255,.15); padding-top:var(--k3); display:flex; justify-content:space-between; gap:var(--k2); flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.55); }

/* ---------- Nút liên hệ nổi ở góc phải ----------
   Trôi theo màn hình thay vì bệt kín mép dưới. Chỉ hiện sau khi khách
   cuộn qua phần đầu trang — lúc đó họ đã biết đây là chỗ nào rồi mới mời gọi. */
.lh-noi {
  position:fixed; right:18px; bottom:18px; z-index:150;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.lh-noi.hien { opacity:1; visibility:visible; transform:none; }

.lh-nut {
  position:relative; display:flex; align-items:center; gap:0;
  height:56px; width:56px; padding:0; border-radius:28px;
  color:#fff; text-decoration:none; overflow:hidden;
  box-shadow:0 8px 26px rgba(9,32,56,.32);
  transition:width .28s cubic-bezier(.4,0,.2,1), gap .28s, padding .28s, background .2s, transform .2s;
}
.lh-nut svg { width:24px; height:24px; flex:none; margin-inline:16px; }
.lh-chu {
  white-space:nowrap; font-weight:800; font-size:15px;
  max-width:0; opacity:0; overflow:hidden;
  transition:max-width .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.lh-goi  { background:var(--xanh); }
.lh-zalo { background:var(--cam); }
.lh-whatsapp { background:#25D366; }
.lh-goi:hover  { background:var(--xanh-tham); }
.lh-zalo:hover { background:#A85C2E; }
.lh-whatsapp:hover { background:#1DA851; }

/* Trên máy tính: rê chuột vào thì nút nở ra hiện chữ */
@media (hover:hover) {
  .lh-nut:hover { width:auto; padding-right:20px; transform:translateY(-2px); }
  .lh-nut:hover svg { margin-right:10px; }
  .lh-nut:hover .lh-chu { max-width:140px; opacity:1; }
}
.lh-nut:focus-visible { outline:3px solid var(--cam-sang); outline-offset:3px; }

/* Vòng sóng quanh nút Gọi — nhắc mắt mà không nhấp nháy gây khó chịu */
.lh-song {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--xanh); animation:lhSong 2.6s ease-out infinite;
}
@keyframes lhSong {
  0%   { transform:scale(1);    opacity:.65; }
  70%  { transform:scale(1.55); opacity:0; }
  100% { transform:scale(1.55); opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .lh-song { animation:none; display:none; }
  .lh-noi { transition:none; }
}

/* ---------- Đáp ứng ---------- */
@media (max-width: 1000px) {
  .hero-luoi, .cg-luoi { grid-template-columns:1fr; }
  .luoi-3, .luoi-4 { grid-template-columns:repeat(2,1fr); }
  .kenh-hang { grid-template-columns:repeat(2,1fr); }
  /* Băng cuộn ngang: giữ đủ 5 video thay vì giấu bớt. Thẻ tràn ra mép màn hình
     một chút để mắt thấy ngay là còn video bên phải. */
  .video-dai {
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:var(--k3); padding-bottom:12px; margin-inline:calc(var(--k3) * -1);
    padding-inline:var(--k3); -webkit-overflow-scrolling:touch;
    /* Không có dòng này thì điểm bám bỏ qua phần đệm, thẻ đầu bị dính sát mép màn hình */
    scroll-padding-inline:var(--k3);
  }
  .video-the { flex:0 0 44%; scroll-snap-align:start; }
  .chan-luoi { grid-template-columns:1fr 1fr; }
  .cg-anh { aspect-ratio:16/10; max-width:480px; }
  .o-so:nth-child(3) { border-left:0; }
}
@media (max-width: 780px) {
  body { font-size:16px; }
  .menu { display:none; position:absolute; top:78px; left:0; right:0; background:var(--nga); border-bottom:2px solid var(--nga-vien); flex-direction:column; align-items:stretch; gap:0; padding:var(--k2) var(--k3) var(--k3); box-shadow:var(--bong); }
  .menu.mo { display:flex; }
  .menu a { padding:15px 0; border-bottom:1px solid var(--nga-vien); }
  .menu a::after { display:none; }
  .nut-menu { display:flex; align-items:center; justify-content:center; }
  .dau-trang .nut { display:none; }
  .dai-so-luoi { grid-template-columns:repeat(2,1fr); gap:var(--k4) 0; }
  .o-so:nth-child(odd) { border-left:0; }
  .luoi-3, .luoi-2 { grid-template-columns:1fr; }
  .anh-luoi { grid-template-columns:repeat(2,1fr); }
  /* Bốn thẻ chữ ngắn xếp dọc thành một cột dài đều tăm tắp — nhìn thành một cục.
     Xếp 2 cột: trang ngắn lại và mắt có nhịp để bám. */
  .luoi-4 { grid-template-columns:repeat(2,1fr); gap:var(--k2); }
  .luoi-4 .the { padding:var(--k3) var(--k2); }
  .luoi-4 .the h3 { font-size:17px; }
  .luoi-4 .the p { font-size:14.5px; line-height:1.6; }
  .luoi-4 .the-icon { width:38px; height:38px; margin-bottom:var(--k2); }
  /* Thẻ nói chung bớt đệm trên điện thoại */
  .the { padding:var(--k3); }
  /* Liên kết chân trang cao 21px — ngón tay bấm trượt sang dòng bên cạnh */
  .chan li { margin-bottom:2px; }
  .chan li a { display:inline-flex; align-items:center; min-height:44px; }

  /* ---- Ảnh bìa trên điện thoại ----
     Bản cũ: ô chữ rộng gần bằng màn hình và cao gần hết ảnh, nên ảnh chỉ còn
     hai sợi mỏng hai bên — nhìn thành một cục tối. Chú thích ảnh lại nằm đè
     lên ô chữ.
     Bản mới: chừa hẳn một băng ảnh ~196px phía trên, ô chữ nằm dưới băng đó.
     Chú thích và các vạch chọn ảnh dời lên nằm TRONG băng ảnh. */
  .hero { min-height:auto; padding:200px 0 var(--k4); align-items:stretch; background:var(--xanh-tham); }
  /* Ảnh chỉ chiếm đúng băng trên. Nếu để ảnh trải hết chiều cao hero thì băng
     196px phía trên chỉ cắt được phần trần nhà — không thấy phòng. */
  .hero-bang { bottom:auto; height:200px; }
  .hero-bang img { object-position:center 45%; }
  .hero-trong { padding:var(--k3) var(--k3) var(--k4); border-radius:0 var(--bo) var(--bo) 0; }
  .hero-cha {
    top:12px; bottom:auto; right:12px; max-width:64vw;
    font-size:10.5px; padding:5px 10px; letter-spacing:.08em;
  }
  .hero-cham { top:170px; bottom:auto; }
  .chan-luoi { grid-template-columns:1fr; gap:var(--k4); }
  .hero-nut .nut, .cta-nut .nut { flex:1 1 100%; }
  .kenh-hang { grid-template-columns:1fr; }
  .video-the { flex:0 0 62%; }
  .video-ten { font-size:13.5px; }
  /* Trên điện thoại nút nổi luôn hiện chữ — ngón tay không "rê chuột" được */
  .lh-noi { right:14px; bottom:14px; gap:10px; }
  .lh-nut { width:auto; padding-right:18px; height:52px; }
  .lh-nut svg { margin-inline:15px 9px; width:21px; height:21px; }
  .lh-chu { max-width:140px; opacity:1; font-size:14.5px; }
}
@media print { .dau-trang, .lh-noi, .cta { display:none; } }