/* Ảnh có khai báo width/height: giữ tỉ lệ, chiều cao theo CSS của từng khối (độ ưu tiên 0) */
:where(img[width][height]) { height: auto; }

:root {
  --blue: #4564ed;
  --blue-dark: #1b2068;
  --orange: #ff6a00;
  --green: #1fb35a;
  --red: #e5383b;
  --text: #333;
  --muted: #6b6b6b;
  --bg: #f3f3f3;
  --line: #e6e6e6;
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif; color: var(--text); background: var(--bg); font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.h2 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo__mark {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff7a1a, #ff3d2e 55%, #4564ed); color: #fff;
  font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 22px; transform: skewX(-8deg);
  box-shadow: 0 3px 8px rgba(255, 90, 30, .3);
}
.logo__mark.sm { width: 26px; height: 26px; font-size: 15px; border-radius: 7px; }
.logo__text { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 19px; color: #1b2068; line-height: 1; display: flex; flex-direction: column; }
.logo__text small { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; color: #1e5cb3; letter-spacing: .5px; margin-top: 2px; }
.logo__img { display: block; width: auto; max-width: 260px; object-fit: contain; }
.logo--lg .logo__mark { width: 50px; height: 50px; font-size: 28px; }
.logo--lg .logo__text { font-size: 24px; }

/* ---------- Marquee ---------- */
.marquee {
  background: linear-gradient(90deg, #ff3d2e, #ff5a1f 50%, #ff3d2e); color: #fff; height: 42px;
  overflow: hidden; display: flex; align-items: center; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.marquee__track { display: flex; gap: 26px; animation: marquee 60s linear infinite; padding-left: 8px; }
.marquee__track span { flex-shrink: 0; }
.marquee a { color: #ffe066; text-decoration: underline; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--line); }

.nav { background: #fff; height: 72px; display: flex; align-items: center; gap: 36px; padding: 0 16px; position: relative; }
.nav__menu { display: flex; gap: 36px; align-items: center; font-size: 15.5px; font-weight: 500; color: #222; flex: 1; }
.nav__menu > li { position: relative; height: 72px; display: flex; align-items: center; }
.nav__menu > li > a { display: flex; align-items: center; gap: 10px; }
.nav__menu > li > a:hover, .nav__menu > li > a.current { color: var(--blue); }
.nav__cta { margin-left: auto; }
.btn-pill { background: var(--orange); color: #fff !important; padding: 9px 20px; border-radius: 30px; font-weight: 600; font-size: 14.5px; }
.btn-pill:hover { filter: brightness(1.05); }
.sub {
  position: absolute; top: 100%; left: -16px; min-width: 240px; background: #fff; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: .18s; z-index: 5;
}
.sub a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; }
.sub a:hover { background: #f2f4ff; color: var(--blue); }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
.sub a small { display: block; font-size: 12.5px; color: #8a8fa3; margin-top: 1px; }
.sub a.on, .mega__col a.on { color: var(--blue); font-weight: 600; }
/* Menu lớn: mục cấp 2 là cột, cấp 3 là danh sách link */
.nav__menu > li.has-mega { position: static; }
.sub--mega {
  left: var(--gutter, 16px) !important; right: var(--gutter, 16px); top: 100%; min-width: 0; padding: 22px 24px 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 28px; border-radius: 0 0 16px 16px;
}
.mega__head { display: block; padding: 6px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-weight: 700; color: #1b2068; font-size: 15px; }
.mega__head small { display: block; font-weight: 400; color: #8a8fa3; font-size: 12.5px; margin-top: 2px; }
.mega__head:hover { color: var(--blue); }
.mega__col ul { list-style: none; }
.mega__col li a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 14.5px; }
.mega__col li a:hover { background: #f2f4ff; color: var(--blue); }
.chev { width: 8px; height: 8px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.chev-r { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); display: inline-block; margin-left: 8px; }
.nav__toggle { display: none; margin-left: auto; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; }
.nav__toggle span { height: 2px; background: #222; border-radius: 2px; transition: .2s; }

/* ---------- Flash ---------- */
/* Thẻ thông báo nổi (sau khi gửi form) */
.flash { --c: #3b5bdb; --bg: #eef1ff; position: fixed; top: 20px; right: 20px; z-index: 1200; width: min(380px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 12px; padding: 14px 40px 14px 14px; background: #fff; border: 1px solid #e6e8f0; border-left: 4px solid var(--c); border-radius: 12px; box-shadow: 0 12px 32px rgba(20, 30, 80, .18); animation: flash-in .3s cubic-bezier(.2, .9, .3, 1.2); }
.flash--success { --c: #12a150; --bg: #e7f8ee; }
.flash--error { --c: #e03131; --bg: #fdecec; }
.flash__ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--c); font-weight: 800; }
.flash__ic::before { content: "i"; }
.flash--success .flash__ic::before { content: "✓"; }
.flash--error .flash__ic::before { content: "!"; }
.flash p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #2a2d3e; font-weight: 500; }
.flash__x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 6px; font-size: 18px; color: #9a9db0; }
.flash__x:hover { background: #f2f3f7; color: #1c1f2e; }
.flash.is-leaving { animation: flash-out .25s ease forwards; }
@keyframes flash-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes flash-out { to { opacity: 0; transform: translateY(-12px); } }
@media (max-width: 640px) { .flash { top: 12px; right: 16px; left: 16px; width: auto; } }

/* ---------- Hero carousel ---------- */
.hero { position: relative; height: 560px; overflow: hidden; }
.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;
  background-size: cover; background-position: center;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide--orange { background-color: #ff7a12; background-image: radial-gradient(ellipse 60% 70% at 40% 30%, #ffa63d 0%, transparent 70%), linear-gradient(180deg, #ff8a1f, #ff7a12 60%, #ff8d2b); }
.slide--purple { background-color: #6a1fb8; background-image: radial-gradient(ellipse 60% 70% at 30% 30%, #ff4f8b 0%, transparent 65%), linear-gradient(135deg, #e8335f, #8a2bc9 70%); }
.slide--blue { background-color: #1a5ce6; background-image: radial-gradient(ellipse 60% 70% at 40% 30%, #3fa0ff 0%, transparent 70%), linear-gradient(135deg, #1f6bff, #233bd1); }
.slide--red { background-color: #ff3a2c; background-image: linear-gradient(135deg, #ff3a2c, #ff6a14); }
.slide--photo .slide__inner { background: linear-gradient(90deg, rgba(0,0,0,.35), transparent 60%); }
.slide::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 140px, rgba(255,255,255,.06) 140px 260px); pointer-events: none; }
.hero__wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave-fill { fill: #4b6df0; }
.slide--blue .wave-fill { fill: #ff8a1f; }
.slide--purple .wave-fill { fill: #3a1d8f; }
.wave-shine { stroke: rgba(255,255,255,.7); stroke-width: 8; filter: blur(3px); }
.slide__inner { position: relative; z-index: 2; max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.slide__text { text-align: center; flex: 0 1 640px; }
.hero__title {
  font-family: 'Lexend', 'Segoe UI', sans-serif; font-weight: 800; color: #fff; font-size: 72px; line-height: 1.2;
  letter-spacing: 1px; text-shadow: 3px 3px 0 rgba(200, 60, 0, .55), 0 6px 14px rgba(120, 40, 0, .3);
}
.hero__date { color: #fff; font-family: 'Lexend', sans-serif; font-size: 32px; font-weight: 700; margin-top: 6px; }
.hero__btn {
  display: inline-block; margin-top: 18px; padding: 8px 30px; background: linear-gradient(#fff, #f2f2f2); border-radius: 40px;
  font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: 1.5px; color: #f05a00;
  box-shadow: 0 6px 0 #d8d8d8, 0 10px 20px rgba(0,0,0,.18); transition: transform .15s;
}
.slide--purple .hero__btn { color: #a0249b; }
.slide--blue .hero__btn { color: #1f4fe0; }
.hero__btn:hover { transform: translateY(-2px); }
.slide__card {
  flex: 0 0 360px; background: #1f4fe0; border: 3px solid #fff; border-radius: 18px; padding: 34px 28px 28px; color: #fff;
  text-align: center; position: relative; box-shadow: 0 8px 0 #1a3bb0, 0 18px 30px rgba(0,0,0,.2); transform: rotate(2deg);
}
.slide--blue .slide__card { background: #ff6a00; box-shadow: 0 8px 0 #c94f00, 0 18px 30px rgba(0,0,0,.2); }
.slide__card p { font-family: 'Lexend', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.2; }
.slide__card .gift { position: absolute; top: -40px; left: -30px; font-size: 64px; transform: rotate(-14deg); }
.coin {
  position: absolute; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, #ffc23d 45%, #e59a10 80%);
  box-shadow: inset -4px -4px 0 rgba(180,110,0,.4), 0 4px 10px rgba(0,0,0,.15);
}
.coin--1 { width: 66px; height: 82px; left: 3%; top: 32%; }
.coin--2 { width: 30px; height: 26px; left: 55%; top: 10%; }
.coin--3 { width: 78px; height: 96px; right: 4%; bottom: 18%; }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.25); color: #fff; font-size: 30px; line-height: 1; backdrop-filter: blur(4px);
}
.hero__arrow:hover { background: rgba(255,255,255,.45); }
.hero__arrow--prev { left: 16px; } .hero__arrow--next { right: 16px; }
.hero__dots {
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; align-items: center;
  background: rgba(120,120,140,.45); padding: 5px 6px; border-radius: 12px;
}
.hero__dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.65); transition: width .3s; }
.hero__dots button.on { width: 32px; border-radius: 4px; background: #fff; }

/* ---------- Layout blocks ---------- */
.page { padding: 0 16px; max-width: 1400px; margin: 0 auto; }
.page--narrow { max-width: 820px; }

.block { background: #fff; border-radius: var(--radius); margin-top: 24px; padding: 28px 24px 32px; }
.block__title { font-size: 27px; font-weight: 600; color: #333; letter-spacing: -0.4px; margin-bottom: 24px; text-align: center; }

.lead { text-align: center; color: var(--muted); font-size: 15px; margin: -12px 0 24px; }
.see-all { display: flex; justify-content: center; align-items: center; color: var(--blue); font-weight: 500; font-size: 15px; margin-top: 32px; }
.see-all:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }
.empty a { color: var(--blue); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13.5px; margin-top: 20px; }
.crumbs a:hover { color: var(--blue); }

/* ---------- Cards ---------- */
/* Flex thay vì grid để hàng thiếu thẻ vẫn căn giữa */
.cards { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: stretch; }
.cards > .card { width: 303px; max-width: 100%; }
.card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.card__img { height: 219px; position: relative; overflow: hidden; color: #fff; text-align: center; display: block; }
.card__img.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1; }
.card__name { font-size: 19px; font-weight: 500; color: #333; letter-spacing: -0.2px; }
.card__name a:hover { color: var(--blue); }
.card__price { color: var(--blue); font-size: 25px; font-weight: 600; margin-top: 2px; display: flex; align-items: baseline; gap: 4px; letter-spacing: -0.5px; }
.card__price small { font-size: 12px; color: #444; font-weight: 400; }
.info { width: 15px; height: 15px; border: 1px solid #888; border-radius: 50%; font-size: 10px; color: #888; display: inline-grid; place-items: center; align-self: center; cursor: help; }
.speed { display: flex; justify-content: space-between; align-items: center; background: #f7f7f7; border: 1px solid #e3e3e3; border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
.speed p { font-size: 13px; color: #444; white-space: nowrap; }
.speed > div:first-child { min-width: 0; }
.speed__val { display: flex; gap: 8px; margin-top: 6px; font-size: 14px; white-space: nowrap; }
.speed__val b { font-weight: 600; }
.gauge { width: 48px; height: 24px; position: relative; overflow: hidden; flex-shrink: 0; margin-left: 8px; }
.gauge::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 50%; border: 6px solid #cfcfcf; border-bottom-color: transparent; box-sizing: border-box; }
.gauge--on::before { border-color: #ff7a00; border-bottom-color: transparent; }
.gauge i { position: absolute; left: 17px; bottom: 0; width: 15px; height: 5px; background: #9a9a9a; border-radius: 6px 2px 2px 6px; }
.card__feats { margin-top: 16px; min-height: 84px; flex: 1; }
.card__feats li { position: relative; padding-left: 30px; font-size: 13.5px; margin-bottom: 4px; line-height: 1.7; }
.card__feats li::before {
  content: ''; position: absolute; left: 6px; top: 6px; width: 11px; height: 6px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.btn { display: block; text-align: center; border-radius: 8px; font-size: 15px; height: 47px; line-height: 47px; transition: filter .15s; font-weight: 500; padding: 0 20px; }
.btn--primary { background: var(--blue); color: #fff; font-weight: 600; }
.btn--ghost { background: #f2f2f2; color: var(--blue); }
.btn--lg { width: 100%; height: 50px; line-height: 50px; font-size: 16px; }

.btn:hover { filter: brightness(.94); }
.card .btn--primary { margin-top: 20px; }
.card .btn--ghost { margin-top: 7px; }
.btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 8px; }

/* Package illustrations */
.combo h4 { font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 23px; margin-top: 26px; letter-spacing: -0.3px; text-shadow: 0 2px 0 rgba(0,0,0,.15); padding: 0 10px; }
.combo__tag { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border: 1px solid rgba(255,255,255,.75); border-radius: 4px; transform: skewX(-10deg); background: rgba(0,0,0,.08); }
.combo--red, .combo--blue { background: radial-gradient(circle at 70% 70%, #ff7a2a, transparent 60%), linear-gradient(135deg, #ff3a2c, #ff6a14); }
.combo--purple { background: radial-gradient(circle at 25% 80%, #e23a6b 0, transparent 45%), linear-gradient(135deg, #2369ff, #3a3ae0 60%, #6a2ac9); }
.combo--orange { background: linear-gradient(135deg, #ff8a1a, #ff6a00); }
.combo__scene { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; }
.trophy { position: absolute; left: 34px; bottom: 30px; font-size: 62px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.players { position: absolute; left: 92px; bottom: 22px; font-size: 50px; letter-spacing: -14px; }
.combo__dev { position: absolute; right: 30px; bottom: 26px; display: flex; gap: 3px; align-items: flex-end; }
.combo__badge { position: absolute; right: 18px; bottom: 14px; font-size: 6.5px; font-weight: 800; padding: 2px 4px; border: 1px solid #fff; border-radius: 3px; }
.modem {
  width: 52px; height: 86px; background: linear-gradient(90deg, #f4f4f6, #fff 40%, #e4e4ea); border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0,0,0,.25); padding: 6px 7px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
}
.modem i { width: 100%; height: 26px; border-radius: 2px; background: repeating-linear-gradient(90deg, #b9b9c0 0 2px, transparent 2px 4px), repeating-linear-gradient(0deg, transparent 0 2px, #fff 2px 4px); }
.modem b { font-size: 6px; color: #f37021; font-weight: 800; }
.modem--tall { height: 98px; width: 46px; }
.net { background: radial-gradient(circle at 70% 80%, #3f8bff 0, transparent 55%), linear-gradient(135deg, #1a6ef0, #1f7bff); }
.net::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, transparent 0 80px, rgba(255,255,255,.06) 80px 150px); }
.net h4 { position: relative; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 30px; margin-top: 18px; letter-spacing: .5px; line-height: 1.1; padding: 0 8px; }
.net__tag { position: relative; display: inline-block; font-size: 13px; font-weight: 600; padding: 0 10px; margin-top: 2px; background: #155ad6; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; transform: skewX(-12deg); }
.net__scene { position: absolute; left: 44px; right: 30px; bottom: 0; height: 132px; display: flex; align-items: flex-end; gap: 4px; }
.net__scene .modem { margin-bottom: 12px; width: 62px; height: 100px; }
.net__scene .modem--tall { height: 110px; width: 54px; }
.net__people { font-size: 88px; line-height: 1; margin-left: auto; }
.net__scene--rev { flex-direction: row-reverse; left: 30px; right: 40px; }
.net__scene--rev .net__people { margin-left: 0; margin-right: auto; }
.x2 { position: absolute; right: 26px; top: 0; background: #0b2b74; font-weight: 800; padding: 0 6px; font-size: 15px; border-radius: 3px; }

/* Tabs */
.tabs { display: flex; gap: 12px; justify-content: center; margin: -4px 0 22px; flex-wrap: wrap; }
.tab { border: 1px solid #ddd; background: #fff; padding: 0 16px; height: 40px; line-height: 38px; border-radius: 22px; font-size: 13.5px; color: #333; }
.tab.active { border-color: var(--blue); color: var(--blue); background: #eef1ff; }
.tab:hover { border-color: var(--blue); }
.pkg-group + .pkg-group { margin-top: 40px; }

/* ---------- V.VIP block ---------- */
.vvip {
  margin-top: 24px; position: relative; overflow: hidden; color: #fff; padding: 80px 16px 90px;
  background: #e8336e center bottom / cover no-repeat; /* ảnh nền gắn bằng data-lazy-bg khi cuộn tới */
}
.vvip::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 40%, rgba(0,0,0,.25)); }
.vvip > * { position: relative; }
.vvip__title { text-align: center; font-size: 38px; font-weight: 700; letter-spacing: -0.8px; }
.vvip__sub { text-align: center; font-size: 16px; font-weight: 500; margin-top: 16px; }
.vvip__grid { display: grid; grid-template-columns: 1fr 1fr 430px; grid-template-rows: auto auto; gap: 24px; max-width: 1360px; margin: 28px auto 0; }
.vvip__grid .promo { grid-column: 3; grid-row: 1 / 3; }
.feat { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 20px; backdrop-filter: blur(4px); }
.feat__img { width: 58px; height: 58px; display: block; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(120, 0, 30, .25)); }
.feat h3 { font-size: 19.5px; font-weight: 600; margin-top: 20px; letter-spacing: -0.4px; }
.feat p { font-size: 15px; margin-top: 10px; letter-spacing: -0.2px; opacity: .95; }
.promo--img { display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(60, 0, 40, .35); transition: transform .25s; align-self: center; }
.promo--img img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.promo--img:hover { transform: translateY(-4px); }

/* Banner là ảnh thiết kế sẵn: khung theo tỉ lệ ảnh */
/* Luôn phủ đủ chiều ngang; chiều cao theo tỉ lệ ảnh (không đặt max-height vì sẽ ép hẹp chiều ngang) */
.hero.hero--photo { width: 100%; height: auto; aspect-ratio: 1920 / 717; background: #eef1fb; }
.slide--image { display: block; }
.slide--image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide--image::before { display: none; }
.hero--photo + .page .callback { margin-top: 20px; }
/* Banner ảnh có sẵn nút "Đăng ký": đưa chấm chuyển banner xuống góc phải để không che nút */
/* Chấm chuyển banner ở góc trái: không che nút trên ảnh, không trùng cụm nút nổi bên phải */
.hero.hero--photo .hero__dots { bottom: 14px; left: 20px; right: auto; transform: none; }
@media (max-width: 720px) {
  .hero.hero--photo .hero__dots { bottom: 6px; left: 8px; padding: 3px 4px; gap: 4px; }
  .hero.hero--photo .hero__dots button { width: 6px; height: 6px; }
  .hero.hero--photo .hero__dots button.on { width: 18px; }
}

/* Ô danh mục dùng ảnh đã có chữ và nút */
/* Ảnh fpt.vn đã có góc bo và viền trong suốt sẵn: bỏ nền, giữ đúng tỉ lệ ảnh */
.cat.cat--full { padding: 0; background: none; height: auto; aspect-ratio: 414 / 674; border-radius: 0; overflow: visible; }
.cat--full::before { display: none; }
.cat--full img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s; }
.cat--full:hover img { transform: scale(1.03); }

/* ---------- Category tiles ---------- */
.cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.cat { position: relative; height: 318px; border-radius: 12px; overflow: hidden; color: #fff; padding: 18px 12px; transition: transform .2s; }
.cat:hover { transform: translateY(-4px); }
.cat::before { content: ''; position: absolute; right: -40px; top: 0; width: 140px; height: 100%; background: rgba(255,255,255,.1); transform: skewX(-14deg); }
.cat--orange { background: linear-gradient(180deg, #ff6a1a, #ff5a00); }
.cat--blue { background: linear-gradient(180deg, #1f6bff, #0f55e8); }
.cat--dark { background: linear-gradient(180deg, #333, #1d1d1d); }
.cat--dark small { color: #ff7a1a; }
.cat small { position: relative; display: block; font-size: 17px; font-weight: 700; line-height: 1.1; }
.cat b { position: relative; display: block; font-size: 27px; font-weight: 800; line-height: 1.1; }
.cat__img { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 120px; line-height: 1; }
/* Ảnh nhân vật nền trong suốt: đứng sát đáy ô như banner gốc */
.cat__photo { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; width: 100%; object-fit: contain; object-position: center bottom; transition: transform .3s; }
.cat:hover .cat__photo { transform: scale(1.04); }
/* Ảnh phủ kín ô: thêm lớp tối phía trên để chữ dễ đọc */
.cat--cover .cat__photo { height: 100%; object-fit: cover; object-position: center; }
.cat--cover::before { right: 0; width: auto; left: 0; transform: none; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent 45%); }
.cat--cover small, .cat--cover b, .cat--cover .cat__btn { z-index: 2; }
.cat__btn { z-index: 2; }
.cat__btn { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: #fff; color: #f05a00; font-size: 9px; font-weight: 800; padding: 3px 8px 3px 24px; border-radius: 12px; white-space: nowrap; }
.cat--blue .cat__btn { color: var(--blue); }
.cat__btn::before { content: '➜'; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #f05a00; color: #fff; font-size: 9px; display: grid; place-items: center; }
.cat--blue .cat__btn::before { background: var(--blue); }

/* ---------- News ---------- */
.news { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.news__item { border-radius: 10px; overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.08); background: #fff; display: flex; flex-direction: column; }
.news__img { height: 180px; background: linear-gradient(135deg, #dfe5ff, #ffe3cf); display: grid; place-items: center; overflow: hidden; }
.news__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.news__body { padding: 14px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.news__cat { font-size: 12px; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
.news__body h3 { font-size: 15px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.news__body h3 a:hover { color: var(--blue); }
.news__more { color: #2b44e0; font-size: 15px; margin-top: 8px; }
.news__more:hover { text-decoration: underline; }

/* Article / prose */
.article h1 { font-size: 30px; line-height: 1.3; margin: 12px 0 8px; letter-spacing: -0.5px; }

.prose { font-size: 16px; line-height: 1.75; color: #333; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-size: 22px; margin-top: 26px; } .prose h3 { font-size: 18px; margin-top: 22px; }
.prose ul { list-style: disc; padding-left: 22px; } .prose ol { padding-left: 22px; }
.prose a { color: var(--blue); text-decoration: underline; }
.prose img { border-radius: 10px; height: auto; max-width: 100%; }
/* Nội dung soạn bằng trình soạn thảo: tiêu đề nhỏ, trích dẫn, bảng, ảnh có chú thích, video */
.prose h4 { font-size: 16px; margin-top: 18px; }
.prose strong, .prose b { font-weight: 700; }
.prose em, .prose i { font-style: italic; }
.prose blockquote { border-left: 4px solid var(--orange); background: #fff7f0; padding: 12px 16px; border-radius: 0 10px 10px 0; color: #4a4d5e; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid #e3e5ec; padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th, .prose thead td { background: #f5f6fa; font-weight: 600; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figure.image { display: table; margin: 18px auto; }
.prose figure.image img { display: block; }
/* Chú thích ảnh: nằm dưới ảnh, canh giữa. Ảnh chèn bằng trình soạn thảo (figure.image) dùng table-caption để rộng bằng ảnh */
.prose figcaption { display: block; text-align: center; font-size: 13.5px; color: #7a7f93; padding-top: 6px; }
.prose figure.image figcaption { display: table-caption; caption-side: bottom; }
.prose .img-center { display: block; margin-left: auto; margin-right: auto; }
.prose .img-half { width: 50%; }
.prose iframe, .prose video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 12px; }
.prose code { background: #f2f3f7; padding: 1px 6px; border-radius: 4px; font-size: .92em; }
@media (max-width: 600px) { .prose .img-half { width: 100%; } }
/* Tự co giãn theo màn hình (nội dung soạn / nhập từ nơi khác): chữ dài không dấu cách (link, mã lỗi) tự xuống dòng,
   mọi khối không rộng quá khung; bảng / đoạn mã rộng thì cuộn ngang trong khung thay vì đẩy trang */
.prose { min-width: 0; overflow-wrap: anywhere; }
.prose > *, .prose figure, .prose blockquote, .prose li { max-width: 100%; }
.prose img, .prose svg, .prose canvas { max-width: 100%; height: auto; }
.prose figure.image { max-width: 100%; }
.prose table { max-width: 100%; -webkit-overflow-scrolling: touch; }
.prose td, .prose th { overflow-wrap: normal; word-break: normal; min-width: 90px; }
.prose pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; background: #f6f7fb; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.prose code { overflow-wrap: anywhere; }
.narticle, .ndetail > * { min-width: 0; }

/* ---------- Trang giới thiệu ---------- */
.ab-wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.ab-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.ab-tabs a { padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; color: #4a4d5e; }
.ab-tabs a:hover { color: var(--blue); }
.ab-tabs a.on { background: #fff1e6; color: #c2410c; }
.ab-hero { background: radial-gradient(ellipse 60% 90% at 90% 10%, #e3e9ff 0, transparent 60%), radial-gradient(ellipse 50% 80% at 0 100%, #ffe8d6 0, transparent 60%), #fff; padding: 48px 0 0; border-bottom: 1px solid var(--line); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.ab-eyebrow { display: inline-block; padding: 5px 14px; border-radius: 20px; background: #fff3ea; border: 1px solid #ffd9bf; color: #e8590c; font-size: 13px; font-weight: 700; }
.ab-hero h1 { font-family: 'Lexend', sans-serif; font-size: 46px; line-height: 1.15; letter-spacing: -1px; color: #1b2068; margin-top: 14px; }
.ab-hero__lead { margin-top: 16px; font-size: 18px; line-height: 1.65; color: #4a4d5e; max-width: 680px; }
.ab-hero__img { width: 100%; max-width: 360px; justify-self: center; }
.ab-stats { list-style: none; margin: 40px 0 -48px; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); background: #1b2068; border-radius: 22px; box-shadow: 0 20px 50px rgba(27, 32, 104, .25); position: relative; }
.ab-stats li { padding: 22px 18px; text-align: center; color: #fff; }
.ab-stats li + li { border-left: 1px solid rgba(255,255,255,.14); }
.ab-stats b { display: block; font-family: 'Lexend', sans-serif; font-size: 32px; color: #ffb27a; letter-spacing: -0.5px; }
.ab-stats span { font-size: 13.5px; opacity: .85; }
.ab-hero + .page { padding-top: 48px; }

.ab-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ab-story h2, .ab-contact h2 { font-size: 28px; color: #1b2068; letter-spacing: -0.5px; line-height: 1.25; }
.ab-story p { margin-top: 14px; font-size: 16px; line-height: 1.75; color: #3d4052; }
.ab-story blockquote { margin-top: 20px; padding: 14px 20px; border-left: 4px solid var(--orange); background: #fff7f0; border-radius: 0 12px 12px 0; font-family: 'Lexend', sans-serif; font-size: 20px; color: #c2410c; }
.ab-story__img { width: 100%; border-radius: 20px; }

.ab-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.ab-values__item { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; position: relative; overflow: hidden; }
.ab-values__item::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: #f1f4ff; }
.ab-values__item span { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 16px; background: #fff3ea; display: grid; place-items: center; font-size: 26px; }
.ab-values__item h3 { font-size: 19px; color: #1b2068; margin-top: 14px; position: relative; z-index: 1; }
.ab-values__item p { margin-top: 8px; color: #4a4d5e; line-height: 1.65; font-size: 15px; position: relative; z-index: 1; }

.ab-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-service { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color .15s, box-shadow .15s; }
a.ab-service:hover { border-color: #b9c3f7; box-shadow: 0 10px 28px rgba(27,32,104,.08); }
.ab-service__ic { width: 46px; height: 46px; border-radius: 14px; background: #eef1ff; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.ab-service h3 { font-size: 16px; color: #1b2068; }
.ab-service h3 em { font-style: normal; color: var(--blue); }
.ab-service p { margin-top: 4px; font-size: 14px; color: #5b6077; line-height: 1.55; }
.ab-biz { margin-top: 18px; padding: 18px 20px; border-radius: 18px; background: #f7f8fc; }
.ab-biz h3 { font-size: 16px; color: #1b2068; }
.ab-biz ul { margin: 10px 0 0; padding-left: 20px; list-style: disc; columns: 2; column-gap: 32px; font-size: 14.5px; color: #4a4d5e; line-height: 1.8; }

.ab-awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: aw; }
.ab-awards li { position: relative; padding: 18px 18px 18px 18px; border-radius: 18px; background: linear-gradient(180deg, #fffaf0, #fff); border: 1px solid #f6e3bf; }
.ab-awards li::before { content: '🏆'; font-size: 26px; display: block; margin-bottom: 6px; }
.ab-awards b { display: block; color: #7a4a00; font-size: 14.5px; }
.ab-awards span { display: block; margin-top: 4px; font-size: 13.5px; color: #5b5f70; line-height: 1.5; }
.ab-certs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.ab-certs__label { font-weight: 600; color: #3a3d4f; margin-right: 4px; }
.ab-cert { padding: 6px 12px; border-radius: 16px; background: #e7f8ee; color: #137a3f; font-size: 13px; font-weight: 600; }

.ab-contact { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; border-radius: 24px; background: linear-gradient(120deg, #1b2068, #2f3aa5); color: #fff; }
.ab-contact h2 { color: #fff; }
.ab-contact p { margin-top: 8px; opacity: .85; }
.ab-contact ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ab-contact li { display: flex; gap: 10px; align-items: baseline; }
.ab-contact li span { width: 22px; text-align: center; }
.ab-contact li a b { color: #ffb27a; font-size: 20px; }
.ab-contact .callback__form { flex: none; }
.ab-contact .callback__msg.is-ok { color: #a7f3c4; }

@media (max-width: 1100px) {
  .ab-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ab-hero { padding-top: 28px; }
  .ab-hero__grid, .ab-story, .ab-contact { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ab-hero h1 { font-size: 32px; }
  .ab-hero__lead { font-size: 16px; }
  .ab-hero__img { max-width: 220px; }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: -40px; }
  .ab-stats li + li { border-left: 0; }
  .ab-stats li { border-bottom: 1px solid rgba(255,255,255,.12); padding: 16px 10px; }
  .ab-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; border-bottom: 0; }
  .ab-stats b { font-size: 26px; }
  .ab-values, .ab-services { grid-template-columns: minmax(0, 1fr); }
  .ab-biz ul { columns: 1; }
  .ab-story h2, .ab-contact h2 { font-size: 23px; }
  .ab-contact { padding: 22px 18px; }
}

/* ---------- Trang Camera AI ---------- */
.cam-benefits { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cam-benefits li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.cam-benefits__ic { width: 44px; height: 44px; border-radius: 12px; background: #fff3ea; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.cam-benefits b { display: block; color: #1b2068; font-size: 15px; }
.cam-benefits p { color: #5b6077; font-size: 13.5px; margin-top: 3px; line-height: 1.45; }

.cam-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cam-filter button { border: 1px solid #dfe2ec; background: #fff; border-radius: 22px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; color: #333; }
.cam-filter button em { font-style: normal; font-size: 12px; background: #f0f2f8; border-radius: 10px; padding: 0 7px; margin-left: 4px; color: #5b6077; }
.cam-filter button:hover { border-color: var(--blue); color: var(--blue); }
.cam-filter button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cam-filter button.on em { background: rgba(255,255,255,.25); color: #fff; }

.cam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cam-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.cam-card:hover { box-shadow: 0 16px 40px rgba(27, 32, 104, .12); transform: translateY(-2px); }
.cam-card[hidden] { display: none; }
.cam-card__img { position: relative; display: block; aspect-ratio: 1; background: #fff6ef; }
.cam-card__img img { width: 100%; height: 100%; object-fit: cover; }
.cam-card__img span { display: grid; place-items: center; height: 100%; font-size: 48px; }
.cam-card__badge { position: absolute; bottom: 10px; left: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.18); background: #e8590c; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px; }
.cam-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cam-card h3 { font-size: 16px; line-height: 1.35; color: #1d1f2c; }
.cam-card h3 a:hover { color: var(--blue); }
.cam-card__tag { font-size: 13px; color: #6b7085; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cam-card__price b { font-size: 21px; color: var(--orange); }
.cam-card__price small { color: #6b7085; }
.cam-card__inc { font-size: 13px; color: #137a3f; line-height: 1.45; }
.cam-card__act { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.cam-btn { flex: 1; text-align: center; padding: 10px 12px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14px; }
.cam-btn:hover { filter: brightness(1.08); }
.cam-btn--ghost { background: #eef1ff; color: var(--blue); }

.cam-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; min-width: 560px; }
.cam-compare th, .cam-compare td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cam-compare thead th { vertical-align: bottom; background: #f7f8fc; }
.cam-compare thead th:first-child { border-radius: 14px 0 0 0; } .cam-compare thead th:last-child { border-radius: 0 14px 0 0; }
.cam-compare thead img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; display: block; margin-bottom: 8px; }
.cam-compare thead span { display: block; font-size: 16px; color: #1b2068; }
.cam-compare thead a { display: inline-block; margin-top: 4px; font-size: 13.5px; color: var(--orange); font-weight: 600; }
.cam-compare tbody th { font-weight: 600; color: #3a3d4f; width: 26%; }
.cam-compare tbody tr:nth-child(even) td, .cam-compare tbody tr:nth-child(even) th { background: #fafbfe; }

.cam-why__hero { position: relative; border-radius: 22px; min-height: 360px; background: #0f1336 center / cover no-repeat; display: flex; align-items: flex-end; overflow: hidden; }
.cam-why__hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 13, 40, .78)); }
.cam-why__hero p { position: relative; color: #fff; font-size: 22px; font-weight: 700; padding: 28px; max-width: 720px; line-height: 1.35; }
.cam-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.cam-why__item { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.cam-why__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.cam-why__item h3 { font-size: 16px; color: #1b2068; padding: 14px 16px 0; }
.cam-why__item p { font-size: 14px; color: #5b6077; padding: 6px 16px 16px; line-height: 1.55; }

.cam-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; background: linear-gradient(135deg, #f3f6ff, #fff 60%); border: 1px solid #e6eafb; }
.cam-app h2 { font-size: 26px; color: #1b2068; line-height: 1.3; letter-spacing: -0.4px; }
.cam-app ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cam-app li { position: relative; padding-left: 30px; font-size: 15px; color: #333; }
.cam-app li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #22a35a; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cam-app__img { width: 100%; border-radius: 16px; }

.cam-tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cam-tech__item { border: 1px solid var(--line); border-radius: 18px; padding: 20px; background: #fff; }
.cam-tech__ic { width: 48px; height: 48px; border-radius: 14px; background: #eef1ff; display: grid; place-items: center; font-size: 24px; }
.cam-tech__item h3 { font-size: 16px; color: #1b2068; margin-top: 12px; line-height: 1.35; }
.cam-tech__item ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 5px; font-size: 14px; color: #4a4d5e; }

.cam-awards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cam-awards div { text-align: center; padding: 20px 14px; border-radius: 18px; background: linear-gradient(180deg, #fffaf0, #fff); border: 1px solid #f6e3bf; }
.cam-awards span { font-size: 34px; }
.cam-awards b { display: block; margin-top: 8px; color: #7a4a00; font-size: 14.5px; }
.cam-awards small { display: block; margin-top: 4px; color: #6b6f80; font-size: 13px; }

@media (max-width: 1100px) {
  .cam-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cam-benefits, .cam-why, .cam-tech, .cam-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cam-card__body { padding: 10px 12px 12px; }
  .cam-card h3 { font-size: 14.5px; }
  .cam-card__price b { font-size: 18px; }
  .cam-card__tag, .cam-card__inc { font-size: 12.5px; }
  .cam-card__act { flex-direction: column; }
  .cam-benefits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cam-why, .cam-tech { grid-template-columns: minmax(0, 1fr); }
  .cam-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cam-app { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cam-app h2 { font-size: 21px; }
  .cam-why__hero { min-height: 220px; }
  .cam-why__hero p { font-size: 17px; padding: 18px; }
}

/* Mục lục tự động */
.toc { margin: 4px 0 24px; border: 1px solid #e3e7f5; background: #f7f9ff; border-radius: 14px; max-width: 640px; }
.toc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; font-weight: 700; color: #1b2068; }
.toc summary::-webkit-details-marker { display: none; }
.toc__toggle::after { content: 'Thu gọn'; font-size: 12.5px; font-weight: 500; color: var(--blue); }
.toc details:not([open]) .toc__toggle::after { content: 'Mở rộng'; }
.toc__list { margin: 0; padding: 0 16px 14px 36px; counter-reset: toc; font-size: 15px; line-height: 1.5; }
.toc__list > li { margin-top: 6px; }
.toc__list ol { padding-left: 20px; margin-top: 4px; list-style: circle; font-size: 14px; }
.toc__list ol li { margin-top: 3px; }
.toc a { color: #333c66; }
.toc a:hover { color: var(--blue); text-decoration: underline; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.nrow__tag { font-style: normal; color: var(--blue); }

/* Thẻ tag cuối bài viết */
.art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.art-tags__label { font-weight: 600; color: #3a3d4f; font-size: 14px; margin-right: 2px; }
.art-tags a { display: inline-block; padding: 6px 14px; border-radius: 18px; background: #eef1ff; border: 1px solid #d9dffb; color: #2e3a8c; text-decoration: none; font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s; }
.art-tags a:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

.ntags__list a.on { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Pager */
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); padding: 0 10px; }
.pager a.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.pager a:hover:not(.on) { border-color: var(--blue); color: var(--blue); }

/* Steps + FAQ */

.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font-size: 16px; font-weight: 500; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 8px; top: 12px; font-size: 26px; color: var(--blue); font-weight: 300; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: #555; font-size: 15px; }

/* Forms */
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-weight: 500; margin-bottom: 6px; font-size: 14px; }
.field em { color: var(--red); font-style: normal; }
.input { width: 100%; height: 46px; border: 1px solid #d7d9e0; border-radius: 8px; padding: 0 14px; font: inherit; font-size: 15px; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(69,100,237,.15); }
.input.is-err { border-color: var(--red); }
.field__err { display: block; color: var(--red); font-size: 13px; margin-top: 4px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 16px; font-size: 14px; }
.check input { margin-top: 3px; width: 16px; height: 16px; }
.check a { color: var(--blue); }
.reg-form .btn { margin-top: 8px; }
.reg-form .muted { text-align: center; margin-top: 12px; }
.block--form { padding: 36px 40px; }
.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; }
.alert--error { background: #fdecec; color: #b42318; }

/* Success / lookup */
.success { text-align: center; }
.success__icon { width: 72px; height: 72px; border-radius: 50%; background: #e7f8ee; color: var(--green); display: inline-grid; place-items: center; font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.success__icon--warn { background: #fff1e6; color: var(--orange); font-size: 22px; }
.success__code { font-family: 'Lexend', sans-serif; font-size: 34px; font-weight: 800; color: var(--blue); letter-spacing: 2px; margin: -10px 0 20px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 10px 16px; text-align: left; background: #f8f9fd; border-radius: 12px; padding: 18px 20px; margin: 16px 0; }
.kv dt { color: var(--muted); } .kv dd { font-weight: 500; }
.lookup { display: flex; gap: 12px; max-width: 520px; margin: 0 auto 8px; }
.lookup .input { flex: 1; height: 50px; font-size: 16px; }
.lookup .btn { height: 50px; line-height: 50px; padding: 0 28px; }
.lookup__count { text-align: center; margin: 24px 0 4px; color: var(--muted); }
.lookup__empty { text-align: center; margin-top: 24px; }
.lookup__result { margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 6px; }
.lookup__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lookup__head .h3 { margin: 0; font-family: 'Lexend', sans-serif; color: var(--blue); letter-spacing: 1px; }
.lookup__note { text-align: center; margin-top: 16px; }
.timeline { display: flex; counter-reset: step; margin: 20px 0; list-style: none; }
.timeline li { flex: 1; text-align: center; position: relative; font-size: 13px; color: var(--muted); padding-top: 34px; }
.timeline li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: #e3e5ec; display: grid; place-items: center; font-weight: 700; color: #fff; z-index: 1; }
.timeline li::after { content: ''; position: absolute; top: 12px; left: -50%; width: 100%; height: 3px; background: #e3e5ec; }
.timeline li:first-child::after { display: none; }
.timeline li.done { color: var(--text); font-weight: 600; }
.timeline li.done::before, .timeline li.done::after { background: var(--green); }

.status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.status--blue { background: #eef1ff; color: var(--blue); }
.status--amber { background: #fff4e0; color: #b45f06; }
.status--purple { background: #f3e8ff; color: #7e22ce; }
.status--green { background: #e7f8ee; color: #137a3f; }
.status--gray { background: #f0f0f0; color: #666; }

.table-wrap { overflow-x: auto; }

/* ---------- Footer ---------- */
.footer { background: #fff; margin-top: 40px; border-top: 1px solid var(--line); }
.footer__top { display: flex; justify-content: space-between; align-items: center; padding: 28px 16px; border-bottom: 1px solid var(--line); gap: 16px; flex-wrap: wrap; }
.social { display: flex; align-items: center; gap: 8px 30px; flex-wrap: wrap; }
.social__item { display: grid; place-items: center; height: 40px; min-width: 32px; transition: transform .15s; }
.social__item:hover { transform: translateY(-2px); }
.si { width: 28px; height: 28px; display: block; }
.si--fb { width: 30px; height: 30px; }
.si--yt { width: 34px; height: 34px; }
.si--img { width: 32px; height: 32px; object-fit: contain; }
.si-text { font-family: 'Lexend', 'Inter', sans-serif; font-weight: 800; line-height: 1; color: #333; }
.si-text--zalo { color: #0068ff; font-size: 21px; letter-spacing: -0.5px; }
.si-text--hi { color: #1e5cf2; font-size: 26px; letter-spacing: -1px; transform: skewX(-6deg); }
.si-text--tiki { color: #1a94ff; font-size: 22px; letter-spacing: -0.5px; }
.si-shop { display: flex; flex-direction: column; align-items: center; }
.si-shop small { font-size: 9px; font-weight: 600; margin-top: -1px; }
.si-shop--shopee { color: #ee4d2d; }
.si-shop--lazada { color: #0f146d; }
.social__phone { display: flex; align-items: center; gap: 8px; color: #1fa855; font-weight: 700; font-size: 21px; font-family: 'Lexend', 'Inter', sans-serif; }
.social__phone svg { width: 28px; height: 28px; fill: currentColor; }
.social__phone:hover { color: #178a45; }
.footer__main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--fc, 3), minmax(0, 1fr)); gap: 24px; padding: 36px 16px 40px; font-size: 15px; }
.footer__info p { margin-bottom: 8px; }
.footer__info h4 { font-size: 15px; font-weight: 600; margin: 20px 0 14px; }
.footer__contact li { display: flex; gap: 10px; margin-bottom: 8px; }
.footer__bct { display: inline-block; margin-top: 14px; }
.footer__bct img { height: 52px; width: auto; }
.footer__col h5 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.footer__col a { display: block; margin-bottom: 12px; }
.footer__col a:hover { color: var(--blue); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* Nút liên hệ nổi: Messenger / Zalo / Gọi */
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ring { 0%, 50%, 100% { rotate: 0deg; } 5%, 15% { rotate: -14deg; } 10%, 20% { rotate: 14deg; } 25% { rotate: 0deg; } }

/* Khối "Gọi lại cho tôi" */
.callback {
  position: relative; z-index: 5; margin: -38px auto 0; max-width: 1180px; display: flex; align-items: center; gap: 20px;
  background: #fff; border-radius: 18px; padding: 20px 24px; box-shadow: 0 14px 40px rgba(27, 32, 104, .14);
  border: 1px solid #eef0f6;
}
.callback__icon { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, #ff7a1a, #ff3d2e); box-shadow: 0 6px 14px rgba(255, 90, 30, .35); }
.callback__icon svg { width: 28px; height: 28px; fill: #fff; }
.callback__text { flex: 1; min-width: 0; }
.callback__text h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.callback__text p { color: var(--muted); font-size: 14px; margin-top: 2px; }
.callback__form { display: flex; gap: 10px; flex: 0 1 470px; position: relative; flex-wrap: wrap; }
.callback__input { flex: 1; min-width: 0; height: 52px; border: 1.5px solid #dfe2ec; border-radius: 12px; padding: 0 16px; font: inherit; font-size: 16px; background: #fafbfe; }
.callback__input:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(255,106,0,.14); }
.callback__btn { height: 52px; padding: 0 24px; border-radius: 12px; background: var(--orange); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 8px 18px rgba(255,106,0,.3); transition: .15s; }
.callback__btn:hover { filter: brightness(1.06); }
.callback__btn:disabled { opacity: .7; cursor: wait; }
.callback__msg { flex-basis: 100%; font-size: 13.5px; font-weight: 500; }
.callback__msg.is-ok { color: #137a3f; }
.callback__msg.is-err { color: #b42318; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Modal */

/* ---------- Trang chủ: nền trắng, khối thẻ nhẹ ---------- */
body.home { background: #fff; }

.glass { background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(27, 32, 104, .06); }
.page--home .block { border-radius: 24px; margin-top: 28px; padding: 36px 28px 36px; }
.page--home .card { box-shadow: 0 8px 28px rgba(27, 32, 104, .1); }
.page--home .card:hover { box-shadow: 0 18px 44px rgba(27, 32, 104, .18); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 30px; font-size: 13px; font-weight: 700;
  color: #e8590c; background: #fff3ea; border: 1px solid #ffd9bf;
}
.eyebrow--light { color: #fff; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
.sec-head { text-align: center; margin-bottom: 26px; }
.sec-head__title { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; margin-top: 12px; line-height: 1.25; color: #1b2068; }

.sec-head__sub { color: #5b6077; font-size: 15.5px; margin-top: 8px; }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 16px; }
.see-all--inline { margin-top: 0; }

.page--home .callback { border-radius: 22px; }

/* Số liệu */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.stat { border-radius: 20px; padding: 22px 22px 20px; transition: transform .25s; }
.stat:hover { transform: translateY(-4px); }
.stat__value { display: flex; align-items: baseline; gap: 6px; font-family: 'Lexend', sans-serif; }
.stat__value span { font-size: 40px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #ff6a00, #ff3d7f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__value small { font-size: 16px; font-weight: 700; color: #1b2068; }
.stat p { color: #5b6077; margin-top: 8px; font-size: 14px; }

/* Nhu cầu */
.needs { margin-top: 44px; }
.needs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.need { display: flex; align-items: center; gap: 16px; border-radius: 20px; padding: 18px 20px; transition: transform .25s, box-shadow .25s, background .25s; }
.need:hover { transform: translateY(-4px); background: rgba(255,255,255,.88); box-shadow: 0 16px 40px rgba(27,32,104,.15); }
.need__ic { width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; display: grid; place-items: center; font-size: 28px;
  background: linear-gradient(135deg, #fff1e6, #ffe0ec); box-shadow: inset 0 0 0 1px rgba(255,138,61,.25); }
.need__text { flex: 1; min-width: 0; }
.need__text b { display: block; font-size: 16.5px; color: #1b2068; }
.need__text small { display: block; color: #5b6077; font-size: 13.5px; margin-top: 2px; }
.need__go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700;
  transition: transform .25s; flex-shrink: 0; }
.need:hover .need__go { transform: translateX(4px); }

/* 3 bước */
.steps-home { margin-top: 44px; }

/* CTA cuối trang */
.cta-home { margin-top: 44px; border-radius: 28px; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: #fff; position: relative; overflow: hidden; background: linear-gradient(120deg, #ff6a00, #ff3d7f 55%, #6b3ff0); box-shadow: 0 20px 50px rgba(255, 70, 90, .3); }
.cta-home::before { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -200px; border-radius: 50%; background: rgba(255,255,255,.14); }
.cta-home > * { position: relative; }
.cta-home h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.cta-home p { opacity: .92; margin-top: 6px; font-size: 16px; }
.cta-home__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-home__btn { background: #fff; color: #e8590c; font-weight: 700; padding: 14px 26px; border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.15); transition: transform .2s; }
.cta-home__btn:hover { transform: translateY(-2px); }
.cta-home__btn--ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.55); box-shadow: none; }

.home .vvip { margin-top: 44px; text-align: center; }
.home .vvip .eyebrow { margin-bottom: 14px; }

/* Đánh giá khách hàng */
.reviews { margin-top: 44px; }
.reviews__score { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: #5b6077; font-size: 14.5px; flex-wrap: wrap; justify-content: center; }
.reviews__score b { font-family: 'Lexend', sans-serif; font-size: 26px; color: #1b2068; }
.stars { color: #ffb400; letter-spacing: 2px; font-size: 18px; }

/* Số đánh giá chẵn 2/4: chia 2 cột cho cân; 1 đánh giá: đặt giữa */

/* Thanh ưu đãi đếm ngược */
.promo-bar { background: linear-gradient(90deg, #1b2068, #3a2aa8 45%, #c2185b); color: #fff; }
.promo-bar__inner { max-width: 1400px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.promo-bar__fire { font-size: 20px; animation: flame 1.6s ease-in-out infinite; }
@keyframes flame { 50% { transform: scale(1.18) rotate(-6deg); } }
.promo-bar__text { font-weight: 600; font-size: 14.5px; }
.promo-bar__timer { display: flex; align-items: center; gap: 6px; }
.promo-bar__label { font-size: 13px; opacity: .85; margin-right: 2px; }
.cd { display: inline-flex; align-items: baseline; gap: 3px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 3px 8px; }
.cd b { font-family: 'Lexend', sans-serif; font-size: 16px; min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.cd small { font-size: 11px; opacity: .85; }
.promo-bar__btn { background: #ffb400; color: #1b2068; font-weight: 700; font-size: 13.5px; padding: 6px 16px; border-radius: 20px; white-space: nowrap; }
.promo-bar__btn:hover { filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) { .promo-bar__fire { animation: none; } }

/* Hiện dần khi cuộn */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 1100px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .needs__grid { grid-template-columns: 1fr 1fr; }

}
@media (max-width: 720px) {

  .promo-bar__inner { gap: 8px; padding: 8px 12px; }
  .promo-bar__text { font-size: 13px; text-align: center; width: 100%; }
  .promo-bar__fire, .promo-bar__label { display: none; }
  .promo-bar__timer { gap: 4px; }
  .cd { padding: 2px 5px; gap: 2px; }
  .cd b { font-size: 13.5px; min-width: 16px; }
  .cd small { font-size: 10px; }
  .promo-bar__btn { padding: 5px 12px; font-size: 12.5px; }
}

/* ---------- Trang danh mục (tham khảo bố cục fpt.vn) ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumbs-bar { padding: 12px 16px; background: #fff; font-size: 14px; color: #555; border-bottom: 1px solid var(--line); }
.crumbs-bar ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1368px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.crumbs-bar li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crumbs-bar li + li::before { content: '›'; color: #999; }
.crumbs-bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.crumbs-bar svg { width: 20px; height: 20px; fill: none; stroke: #444; stroke-width: 1.7; display: block; }
.crumbs-bar a:hover { color: var(--blue); }
.crumbs-bar b { font-weight: 500; color: #222; }
.hero.hero--wide { aspect-ratio: 1920 / 560; }
.cat-nav { display: flex; gap: 10px; overflow-x: auto; padding: 18px 0 2px; scrollbar-width: none; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav__item { flex-shrink: 0; padding: 8px 18px; border-radius: 22px; background: #fff; border: 1px solid #e2e4ea; font-size: 14px; font-weight: 500; white-space: nowrap; }
.cat-nav__item:hover { border-color: var(--blue); color: var(--blue); }
.cat-nav__item.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Dải thẻ gói trượt ngang có nút ‹ › */
.slider { position: relative; }
.slider__track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 18px; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
/* Tối đa 4 thẻ vừa khít khung; nhiều hơn mới trượt */
.slider__track > .card { flex: 0 0 clamp(260px, calc((100% - 72px) / 4), 303px); scroll-snap-align: start; }
.slider:not(.is-scrollable) .slider__track { justify-content: center; }
.slider__btn {
  position: absolute; top: 40%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--blue);
  font-size: 28px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.14); display: none; place-items: center; transition: opacity .2s;
}
.slider.is-scrollable .slider__btn { display: grid; }
.slider__btn--prev { left: -8px; } .slider__btn--next { right: -8px; }
.slider__btn:disabled { opacity: 0; pointer-events: none; }

/* Dải lợi ích nền cam */
/* Ảnh nền 1920×667 có hình minh họa ở ~42% bên phải: phóng đúng tỉ lệ, neo phải, chữ giữ trong 52% bên trái */
.band { position: relative; margin-top: 24px; color: #fff; background: #ff7a12 var(--band-img, url('/img/category/band-desk.jpg')) right center / auto 100% no-repeat; }
.band::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #ff7a12 0 36%, rgba(255,122,18,.85) 48%, transparent 62%); pointer-events: none; }
.band__inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 64px 24px 72px; min-height: 560px; }
.band__title { font-size: 38px; font-weight: 700; line-height: 1.25; letter-spacing: -0.6px; max-width: 620px; text-shadow: 0 2px 10px rgba(160, 60, 0, .25); }
.band__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 18px 20px; margin-top: 30px; }
.band__item { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.45); border-radius: 18px; padding: 20px; }
.band__item img { width: 48px; height: 48px; display: block; border-radius: 12px; }
.band__item h3 { color: #fff; font-size: 18px; font-weight: 700; margin-top: 16px; letter-spacing: -0.3px; }
.band__item p { font-size: 15px; font-weight: 500; margin-top: 6px; }

/* Bài viết + bảng giá có nút "Xem thêm" */
.article-block .block__title { padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.collapse__body { max-height: 420px; overflow: hidden; position: relative; transition: max-height .4s; }
.collapse__body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.collapse.open .collapse__body { max-height: none; }
.collapse.open .collapse__body::after { display: none; }
.collapse.no-overflow .collapse__body::after, .collapse.no-overflow .collapse__btn { display: none; }
.collapse__btn { display: block; margin: -24px auto 0; position: relative; z-index: 1; padding: 10px 26px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-weight: 600; }
.collapse__btn:hover { color: var(--blue); }
.price-title { font-size: 17px; font-weight: 600; margin: 28px 0 12px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
.price-table th { background: #f6f7f9; text-align: left; font-weight: 600; padding: 14px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.price-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.price-table tbody tr:hover { background: #fafbff; }
.price-table__name { color: var(--blue); font-weight: 500; }
.price-table__name:hover { text-decoration: underline; }
.price-table__price { font-weight: 700; white-space: nowrap; }
.price-table__price small { font-weight: 400; color: var(--muted); margin-left: 2px; }

.faq--wide { max-width: none; }

/* Khối đăng ký tư vấn cuối trang */
.cta { margin-top: 24px; border-radius: var(--radius); padding: 28px 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, #1b2068, #3a4fd8 70%, #4564ed); color: #fff; }
.cta__text { flex: 1 1 360px; }
.cta__text h2 { font-size: 24px; font-weight: 700; }
.cta__text p { opacity: .9; margin-top: 6px; font-size: 15px; }
.cta .callback__form { flex: 1 1 420px; }
.cta .callback__msg.is-ok { color: #a7f3c4; }
.cta .callback__msg.is-err { color: #ffd2d2; }

/* ---------- Trang tin tức (tham khảo fpt.vn/tin-tuc) ---------- */
.nwrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.ntabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-top: 8px; scrollbar-width: none; }
.ntabs::-webkit-scrollbar { display: none; }
.ntabs a { flex-shrink: 0; padding: 14px 10px 12px; font-size: 14.5px; color: #333; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.ntabs a:hover { color: var(--blue); }
.ntabs a.on { color: #1b2068; font-weight: 600; border-bottom-color: var(--blue); }
.nsec-title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: #1d1f2c; margin-bottom: 18px; }
.nsec-title--lg { font-size: 32px; }
.nsec-title--top { margin-top: 32px; }

time { display: block; color: #8a8fa3; font-size: 13px; }

.nhero { padding-top: 36px; }
.nhero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 330px; gap: 28px; align-items: start; }
.nbig__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; display: block; transition: transform .3s; }
.nbig, .nsmall__item, .nrow, .nmost__item { display: block; color: inherit; }
.nbig time { margin-top: 16px; }
.nbig h2 { font-size: 24px; line-height: 1.35; font-weight: 600; margin-top: 6px; color: #1d1f2c; }
.nbig p { color: #6b7085; margin-top: 8px; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nsmall { display: grid; gap: 24px; }
.nsmall__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; display: block; }
.nsmall__item time { margin-top: 10px; }
.nsmall__item h3 { font-size: 16px; font-weight: 600; line-height: 1.4; margin-top: 4px; color: #1d1f2c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nbig:hover h2, .nsmall__item:hover h3, .nrow:hover b, .nmost__item:hover b { color: var(--blue); }

.nmost__title { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.nmost__item { display: flex; gap: 14px; padding: 10px 0; }
.nmost__item + .nmost__item { border-top: 1px solid var(--line); }
.nmost__img { width: 140px; height: 88px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.nmost__item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; font-size: 14.5px; line-height: 1.45; margin-top: 4px; color: #1d1f2c; }

.npromo { background: #f0f1f5; margin-top: 56px; padding: 44px 0 48px; }
.npromo__inner { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.npromo__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.npromo__item img, .npromo__ph { width: 100%; aspect-ratio: 1250 / 902; object-fit: cover; border-radius: 14px; display: grid; place-items: center; transition: transform .25s; }
.npromo__ph { background: linear-gradient(135deg, #1a6ef0, #3f8bff); color: #fff; font-family: 'Lexend', sans-serif; font-weight: 800; font-size: 26px; text-align: center; padding: 10px; }
.npromo__item:hover img { transform: translateY(-4px); }
.npromo__item b { display: block; margin-top: 14px; font-weight: 500; font-size: 15.5px; }
.npromo__item small { color: #6b7085; font-size: 14px; }
.npromo__item em { font-style: normal; color: var(--blue); font-weight: 600; }

.nlatest { padding-top: 48px; }
.nlatest__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.nlatest__head .nsec-title { margin: 0; }
.nsearch { display: flex; align-items: center; border: 1px solid #d7d9e0; border-radius: 24px; overflow: hidden; background: #fff; width: min(360px, 100%); }
.nsearch input { flex: 1; min-width: 0; border: 0; padding: 10px 16px; font: inherit; outline: none; }
.nsearch button { width: 44px; height: 42px; font-size: 20px; color: var(--blue); }
.nlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px; }
.nrow { display: flex; gap: 20px; align-items: flex-start; }
.nrow__img { width: 250px; flex-shrink: 0; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
.nrow__body { min-width: 0; }
.nrow b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16.5px; font-weight: 600; line-height: 1.45; margin-top: 6px; color: #1d1f2c; }
.nrow small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #6b7085; font-size: 14px; margin-top: 8px; line-height: 1.55; }
.nlatest + .nmost { margin-top: 40px; max-width: 520px; }

.ntags { padding: 48px 0 8px; }
.ntags__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ntag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-radius: 999px; background: #fff; border: 1px solid #e3e6f0; color: #2a2d3e; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 30, 80, .04); transition: border-color .18s, box-shadow .18s, transform .18s, color .18s; }
.ntag__icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #eef1ff; color: var(--blue); font-weight: 700; font-size: 13px; transition: background .18s, color .18s; }
.ntag__name { padding-right: 4px; }
.ntag__n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: grid; place-items: center; background: #f2f3f7; color: #6b7085; font-size: 12px; font-weight: 600; }
.ntag:hover { border-color: #c6cff8; color: var(--blue); box-shadow: 0 6px 16px rgba(40, 70, 220, .12); transform: translateY(-1px); }
.ntag:hover .ntag__icon { background: var(--blue); color: #fff; }
.ntags__list a.ntag.on { background: linear-gradient(135deg, #4a6cf7, #2f4fe0); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(47, 79, 224, .28); }
.ntag.on .ntag__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.ntag.on .ntag__n { background: rgba(255, 255, 255, .22); color: #fff; }
.ntag:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Chi tiết bài viết */
.ndetail { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; padding-top: 32px; }
.ndetail .nmost { position: sticky; top: 130px; }
.narticle { max-width: 820px; }
.narticle__cat { color: var(--orange); font-weight: 600; font-size: 14px; }
.narticle h1 { font-size: 34px; line-height: 1.3; letter-spacing: -0.6px; margin: 8px 0 10px; color: #1d1f2c; }
.narticle__meta { color: #8a8fa3; font-size: 14px; }
.narticle__lead { font-size: 18px; font-weight: 500; color: #3a3d4f; margin: 20px 0; line-height: 1.6; }
.narticle__cover { width: 100%; border-radius: 14px; margin: 8px 0 24px; }
.narticle__cta { margin-top: 36px; border-radius: 16px; padding: 22px; background: #f3f5ff; border: 1px solid #dfe5ff; display: grid; gap: 14px; }
.narticle__cta b { display: block; font-size: 18px; color: #1b2068; }
.narticle__cta span { color: #5b6077; font-size: 14.5px; }

@media (max-width: 1200px) {
  .nhero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .nhero__grid .nmost { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .nhero__grid .nmost__title { grid-column: 1 / -1; }
  .nhero__grid .nmost__item:nth-child(3) { border-top: 0; }
  .npromo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlist { grid-template-columns: minmax(0, 1fr); }
  .ndetail { grid-template-columns: minmax(0, 1fr); }
  .ndetail .nmost { position: static; }
}
@media (max-width: 720px) {
  .nsec-title { font-size: 21px; } .nsec-title--lg { font-size: 24px; }
  .nhero { padding-top: 22px; }
  .nhero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .nhero__grid .nmost { display: block; }
  .nbig h2 { font-size: 19px; }
  .nsmall { grid-template-columns: 1fr 1fr; gap: 14px; }
  .nsmall__item h3 { font-size: 14px; }
  .nmost__img { width: 110px; height: 70px; }
  .npromo { margin-top: 36px; padding: 30px 0; }
  .npromo__grid { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .npromo__grid::-webkit-scrollbar { display: none; }
  .npromo__item { flex: 0 0 72%; scroll-snap-align: start; }
  .nlatest { padding-top: 32px; }
  .nlist { gap: 18px; }
  .nrow { gap: 12px; }
  .nrow__img { width: 120px; border-radius: 10px; }
  .nrow b { font-size: 14.5px; margin-top: 2px; }
  .nrow small { display: none; }
  .nsearch { width: 100%; }
  .narticle h1 { font-size: 24px; }
  .narticle__lead { font-size: 16px; }
  .ndetail { gap: 32px; padding-top: 20px; }
}

/* ---------- Khung trang dùng chung: đường dẫn → tiêu đề → các khối ---------- */
.btn--inline { display: inline-block; }
.page-head { padding: 28px 0 4px; }
.page-head h1 { font-family: 'Lexend', sans-serif; font-size: 34px; line-height: 1.25; letter-spacing: -0.6px; color: #1b2068; }
.page-head p { margin-top: 8px; max-width: 760px; color: #5b6077; font-size: 16px; }
.page-head--center { text-align: center; }
.page-head--center p { margin-left: auto; margin-right: auto; }
.sec-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.sec-bar h2 { font-size: 24px; font-weight: 700; color: #1b2068; letter-spacing: -0.4px; line-height: 1.3; }

.sec-bar p { flex-basis: 100%; color: #5b6077; font-size: 15px; margin-top: -4px; }
.sec-bar__more { color: var(--blue); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.sec-bar__more:hover { text-decoration: underline; }
.pkg-group { scroll-margin-top: 130px; }
/* Nhóm ít gói (không đủ 1 hàng): căn giữa cho cân, nhóm đủ hàng thì cuộn ngang như cũ */
.pkg-group .slider:not(.is-scrollable) .slider__track { justify-content: center; }
.cat-hero { margin-top: 18px; }
@media (max-width: 720px) {
  .page-head { padding-top: 20px; }
  .page-head h1 { font-size: 26px; }
  .page-head p { font-size: 14.5px; }
  .sec-bar h2 { font-size: 20px; }
}

/* ---------- Trang chi tiết gói cước ---------- */
.pd-wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
.pd-hero { background: radial-gradient(ellipse 60% 90% at 85% 10%, #e3e9ff 0, transparent 60%), radial-gradient(ellipse 50% 80% at 5% 100%, #ffeadb 0, transparent 60%), #fff; border-bottom: 1px solid var(--line); }
.pd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding-top: 36px; padding-bottom: 40px; align-items: center; }
.pd-hero__img { width: 100%; aspect-ratio: 1250 / 902; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 60px rgba(27, 32, 104, .18); }
.pd-hero__card { max-width: 420px; margin: 0 auto; }
.pd-hero__card .card__body { display: none; }
.pd-hero__card .card { box-shadow: 0 24px 60px rgba(27, 32, 104, .18); border-radius: 22px; }
.pd-hero__card .card__img { height: 300px; }
.pd-compare__link { color: var(--blue); font-weight: 600; }
.pd-trust { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 10px; margin-top: 18px; }
.pd-trust li { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; color: #3a3d4f; }
.pd-trust span { font-size: 18px; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-tag { font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: #eef1ff; color: var(--blue); }
.pd-tag--hot { background: #fff1e6; color: #c2410c; }
.pd-tag--star { background: #fff7d6; color: #a16207; }
.pd-title { font-family: 'Lexend', sans-serif; font-size: 44px; line-height: 1.12; letter-spacing: -1px; color: #1b2068; margin-top: 14px; }
.pd-sub { color: #5b6077; font-size: 17px; margin-top: 8px; }
.pd-price { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 16px 20px; border-radius: 16px; background: linear-gradient(120deg, #fff6ef, #f1f3ff); border: 1px solid #f2e3d6; }
.pd-price__label { width: 100%; font-size: 13px; color: #6b7085; }
.pd-price b { font-family: 'Lexend', sans-serif; font-size: 42px; line-height: 1; background: linear-gradient(135deg, #ff6a00, #e8337a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pd-price small { font-size: 16px; color: #3a3d4f; font-weight: 600; }
.pd-price em { width: 100%; font-style: normal; font-size: 13px; color: #6b7085; }
.pd-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pd-specs div { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.pd-specs span { display: block; font-size: 12.5px; color: #6b7085; }
.pd-specs b { font-size: 19px; color: #1b2068; font-family: 'Lexend', sans-serif; }
.pd-perks { list-style: none; margin-top: 16px; display: grid; gap: 8px; }
.pd-perks li { position: relative; padding-left: 30px; font-size: 15px; color: #2b2e3f; }
.pd-perks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #e7f8ee; color: #138a45; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 700; font-size: 16px; transition: transform .15s, box-shadow .15s; }
.pd-btn:hover { transform: translateY(-2px); }
.pd-btn--primary { background: linear-gradient(135deg, #ff7a1a, #ff4d2e); color: #fff; box-shadow: 0 10px 24px rgba(255, 90, 40, .35); flex: 1 1 200px; }
.pd-btn--ghost { background: #fff; color: #1b2068; border: 1.5px solid #d6dbf2; }

/* Nền gần đặc thay cho làm mờ nền (backdrop-filter) – làm mờ phải vẽ lại mỗi khung hình khi cuộn, máy yếu bị giật */
.pd-nav { position: sticky; top: 112px; z-index: 40; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); }
/* Khung bọc khối (.blk) không giữ chỗ để thanh mục lục dính được theo cả trang */
.blk:has(> .pd-nav) { display: contents; }
.pd-nav .pd-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.pd-nav .pd-wrap::-webkit-scrollbar { display: none; }
.pd-nav a { flex-shrink: 0; padding: 15px 14px; font-size: 14.5px; font-weight: 500; color: #3a3d4f; border-bottom: 2.5px solid transparent; }
.pd-nav a:hover, .pd-nav a.on { color: var(--blue); border-bottom-color: var(--blue); }

.pd-main { padding-bottom: 24px; }
.pd-sec { margin-top: 44px; scroll-margin-top: 180px; }
.pd-h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: #1b2068; margin-bottom: 18px; }
.pd-overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.pd-table-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; box-shadow: 0 8px 24px rgba(27,32,104,.05); }
.pd-table-card h3 { font-size: 18px; margin-bottom: 12px; color: #1b2068; }
.pd-dl { display: grid; grid-template-columns: 140px 1fr; }
.pd-dl dt, .pd-dl dd { padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.pd-dl dt { color: #6b7085; }
.pd-dl dd { font-weight: 600; color: #1d1f2c; }
.pd-dl dt:last-of-type, .pd-dl dd:last-of-type { border-bottom: 0; }
.pd-dl__price { color: var(--orange) !important; }

.pd-speed { border-radius: 24px; padding: 32px; color: #fff; background: radial-gradient(ellipse 70% 120% at 100% 0, #4a5cff 0, transparent 60%), linear-gradient(135deg, #141a5c, #2a2f8f); }
.pd-speed__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pd-h2--light { color: #fff; margin-bottom: 6px; }
.pd-speed__head p { opacity: .75; font-size: 14.5px; }
.pd-meter { position: relative; width: 170px; text-align: center; }
.pd-meter svg { width: 170px; height: 100px; }
.pd-meter path { fill: none; stroke-width: 10; stroke-linecap: round; }
.pd-meter__bg { stroke: rgba(255,255,255,.15); }
.pd-meter__fg { stroke: #ffb03b; stroke-dasharray: var(--lv) 100; filter: drop-shadow(0 0 6px rgba(255,176,59,.6)); }
.pd-meter b { position: absolute; left: 0; right: 0; top: 46px; font-family: 'Lexend', sans-serif; font-size: 22px; }
.pd-meter small { position: absolute; left: 0; right: 0; top: 76px; font-size: 12px; opacity: .7; }
.pd-tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.pd-task { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 18px; }
.pd-task span { font-size: 26px; }
.pd-task b { display: block; font-family: 'Lexend', sans-serif; font-size: 24px; margin-top: 8px; }
.pd-task small { opacity: .75; font-size: 13.5px; }

.pd-feats { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 14px; }
.pd-feat { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; transition: border-color .2s, box-shadow .2s; }
.pd-feat:hover { border-color: #c8d1ff; box-shadow: 0 10px 24px rgba(27,32,104,.08); }
.pd-feat span { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #fff1e6, #eef1ff); }
.pd-feat p { font-size: 15px; font-weight: 500; color: #2b2e3f; margin-top: 2px; }

.pd-compare { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pd-compare th, .pd-compare td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.pd-compare tbody tr:last-child th, .pd-compare tbody tr:last-child td { border-bottom: 0; }
.pd-compare tbody th { text-align: left; color: #6b7085; font-weight: 500; width: 140px; background: #fafbfd; }
.pd-compare thead th:first-child { width: 150px; }
.pd-compare thead th { font-weight: 700; background: #fafbfd; vertical-align: bottom; }
.pd-compare thead a:hover { color: var(--blue); }
.pd-compare .is-current { background: #f3f5ff; }
.pd-compare thead .is-current { background: #e8ecff; }
.pd-compare__flag { display: block; width: max-content; margin: 0 auto 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--blue); padding: 2px 8px; border-radius: 10px; }
.pd-compare__price { color: var(--orange); font-size: 16px; }


.pd-register { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0; background: #fff; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(27,32,104,.08); }
.pd-register__summary { padding: 32px; color: #fff; background: radial-gradient(ellipse 80% 60% at 100% 0, rgba(255,255,255,.18) 0, transparent 60%), linear-gradient(160deg, #ff6a00, #e8337a); }
.pd-register__eyebrow { font-size: 13px; font-weight: 600; opacity: .85; }
.pd-register__summary h2 { font-family: 'Lexend', sans-serif; font-size: 28px; margin-top: 6px; }
.pd-register__price { font-family: 'Lexend', sans-serif; font-size: 34px; font-weight: 800; margin-top: 8px; }
.pd-register__price small { font-size: 15px; font-weight: 500; opacity: .85; }
.pd-register__summary ul { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.pd-register__summary li { position: relative; padding-left: 26px; font-size: 15px; }
.pd-register__summary li::before { content: '✓'; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 11px; font-weight: 800; display: grid; place-items: center; top: 2px; }

.pd-register__form { padding: 32px; }
.pd-register__form .reg-form .btn { background: linear-gradient(135deg, #ff7a1a, #ff4d2e); }

@media (max-width: 1100px) {
  .pd-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pd-hero__media { max-width: 640px; }
  .pd-nav { top: 112px; }
  .pd-overview { grid-template-columns: minmax(0, 1fr); }
  .pd-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-register { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pd-hero__grid { padding-top: 20px; padding-bottom: 28px; }
  .pd-title { font-size: 32px; }
  .pd-sub { font-size: 15px; }
  .pd-price b { font-size: 34px; }
  .pd-specs b { font-size: 16px; }
  .pd-specs div { padding: 10px; }
  .pd-trust { gap: 6px; }
  .pd-trust li { flex-direction: column; text-align: center; gap: 4px; font-size: 12px; padding: 10px 6px; line-height: 1.3; }
  .pd-actions .pd-btn { flex: 1 1 100%; }

  .pd-nav a { padding: 13px 10px; font-size: 14px; }
  .pd-sec { margin-top: 32px; scroll-margin-top: 170px; }
  .pd-h2 { font-size: 21px; }
  .pd-speed { padding: 22px 18px; border-radius: 20px; }
  .pd-meter { margin: 0 auto; }
  .pd-task { padding: 14px; }
  .pd-task b { font-size: 19px; }
  .pd-feats { grid-template-columns: minmax(0, 1fr); }
  .pd-dl { grid-template-columns: 120px 1fr; }
  .pd-register__summary, .pd-register__form { padding: 22px 18px; }
  .pd-hero__card .card__img { height: 220px; }
}

/* ---------- Tối ưu điện thoại ---------- */
@media (max-width: 720px) {
  /* Điện thoại: chỉ giữ nút gọi nhỏ ở góc, không thanh dính ở đáy */

  /* Vùng chạm tối thiểu ~40px */

  .see-all, .see-all--inline { padding: 10px 0; }
  .crumbs-bar a, .crumbs a { padding: 8px 0; }
  /* Đường dẫn trên 1 dòng, vuốt ngang khi dài */
  .crumbs-bar { white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 4px; padding-bottom: 4px; }
  .crumbs-bar::-webkit-scrollbar { display: none; }
  .crumbs-bar > * { flex-shrink: 0; }
  .crumbs { align-items: center; row-gap: 0; margin-top: 8px; }
  .marquee a { padding: 10px 0; }
  .tab, .cat-nav__item { min-height: 40px; display: inline-flex; align-items: center; }
  .footer__col a { padding: 4px 0; }
  .narticle__cat { display: inline-block; padding: 8px 0; }
  .promo-bar__btn { padding: 8px 14px; }

  /* Ô tra cứu bị bẹp khi xếp dọc */
  .lookup .input, .lookup .btn { flex: none; width: 100%; }

  /* Dải ưu đãi trang tin: chừa lề khi cuộn ngang */
  .npromo__grid { scroll-padding-left: 16px; }
  .npromo__grid::after { content: ''; flex: 0 0 2px; }

  /* Form nhập liệu: cỡ chữ 16px để iPhone không tự phóng to */
  .input, .callback__input, .nsearch input, select.input, textarea.input { font-size: 16px; }
}

/* ---------- Căn lề thống nhất: các thanh full màn hình có nội dung thẳng hàng với khung 1400px ---------- */
:root { --gutter: max(16px, calc((100% - 1368px) / 2)); }
.nav, .crumbs-bar, .footer__top, .footer__main, .footer__bottom { padding-left: var(--gutter); padding-right: var(--gutter); }
.promo-bar__inner { max-width: none; padding-left: var(--gutter); padding-right: var(--gutter); }
.nav__menu .sub { left: -16px; }

/* Cụm nút nổi chiếm ~80px mép phải: chừa chỗ ở chân trang khi màn hình chưa đủ rộng */
@media (max-width: 1560px) {
  .footer__top, .footer__bottom { padding-right: 96px; }
}

/* Khối V.VIP: chữ trong ô căn trái như các khối khác, tiêu đề vẫn ở giữa */
.home .vvip .feat { text-align: left; }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .vvip__grid { grid-template-columns: 1fr 1fr; }
  .vvip__grid .promo { grid-column: 1 / -1; grid-row: auto; order: 5; max-width: 430px; justify-self: center; width: 100%; }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

}
@media (max-width: 1100px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 16px 16px; box-shadow: 0 12px 24px rgba(0,0,0,.1); max-height: calc(100vh - 112px); overflow-y: auto;
  }
  .nav.open .nav__menu { display: flex; }
  .nav.open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__menu > li { height: auto; flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--line); }
  .nav__menu > li > a { padding: 14px 0; justify-content: space-between; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 10px 10px; display: none; }
  .has-sub.open .sub { display: block; }
  .has-sub:hover .sub { display: none; }
  .has-sub.open:hover .sub { display: block; }
  /* Điện thoại: menu lớn thành danh sách lồng nhau */
  .nav__menu > li.has-mega { position: static; }
  .sub--mega { padding: 0 0 10px 10px; border-radius: 0; }
  .has-sub.open .sub--mega { display: block; }
  .mega__head { border-bottom: 0; padding: 8px 10px 2px; margin: 0; font-size: 14.5px; }
  .mega__head small { display: none; }
  .mega__col li a { padding: 7px 10px 7px 22px; }
  .nav__cta { margin: 16px 0 0; border: 0 !important; }
  .nav__cta .btn-pill { text-align: center; justify-content: center; }
  .hero { height: 520px; }
  .slide__inner { flex-direction: column; justify-content: center; gap: 28px; }
  .slide__text { flex: none; }
  .slide__card { flex: none; max-width: 340px; padding: 20px; }
  .slide__card p { font-size: 22px; }
  .hero__title { font-size: 52px; }
  .coin { display: none; }
  .news { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer__main { grid-template-columns: 1fr 1fr; }
  .footer__info { grid-column: 1 / -1; }
}
@media (max-width: 720px) {

  .hero { height: 480px; }
  .hero__title { font-size: 38px; }
  .hero__date { font-size: 22px; }
  .hero__btn { font-size: 22px; padding: 6px 22px; }
  .hero__arrow { display: none; }
  .slide__card { display: none; }
  .block { padding: 24px 16px; }
  .block--form { padding: 28px 20px; }
  .block__title { font-size: 21px; }
  .cards > .card { width: 340px; }
  .vvip { padding: 48px 16px; }
  .vvip__title { font-size: 26px; }
  .vvip__grid { grid-template-columns: minmax(0, 1fr); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cat { height: 240px; } .cat b { font-size: 21px; } .cat small { font-size: 14px; } .cat__img { font-size: 84px; }
  .news { grid-template-columns: minmax(0, 1fr); }

  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .lookup { flex-direction: column; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; } .kv dd { margin-bottom: 8px; }

  .footer__main { grid-template-columns: minmax(0, 1fr); }

  .footer__top { padding-right: 16px; }
  .footer__bottom { padding-right: 76px; }
  .nav .logo__img { max-height: 48px; max-width: 220px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat { padding: 16px; }
  .stat__value span { font-size: 30px; }
  .stat p { font-size: 13px; }
  .needs__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .need { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .need__ic { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
  .need__text b { font-size: 14.5px; }
  .need__text small { font-size: 12.5px; }
  .need__go { display: none; }

  .sec-head__title { font-size: 23px; }
  .page--home .block { padding: 26px 16px; border-radius: 20px; }
  .sec-head--row { flex-direction: column; align-items: flex-start; }
  .cta-home { padding: 28px 22px; border-radius: 22px; }
  .cta-home h2 { font-size: 23px; }
  .slider__track > .card { flex-basis: 82%; }
  .slider__track { gap: 14px; }
  .slider__btn { display: none !important; }
  .band { background-image: var(--band-img-m, url('/img/category/band-m.jpg')); background-position: center bottom; background-size: 100% auto; background-color: #ff7a12; }
  .band::before { display: none; }
  .band__inner { padding: 40px 16px 300px; min-height: 0; }
  .band__title { font-size: 26px; }
  .band__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .band__item { padding: 14px; }
  .band__item h3 { font-size: 15px; margin-top: 10px; }
  .band__item p { font-size: 13px; }
  .cta { padding: 22px 18px; }
  .callback { flex-direction: column; align-items: stretch; text-align: center; margin-top: -28px; padding: 18px 16px; gap: 12px; }
  .callback__icon { display: none; }
  .callback__form { flex: none; }
  .callback__btn { flex: 1 1 100%; }
  .social { gap: 8px 14px; }
  .si-text--hi { font-size: 22px; } .si-text--zalo, .si-text--tiki { font-size: 18px; }
  .social__phone { width: 100%; }
  .timeline li { font-size: 11px; }
}

/* Trang gói: giá theo chu kỳ (truyền hình, camera, dịch vụ số) */
.pd-cycles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.pd-cycles__label { font-size: 13.5px; font-weight: 600; color: #4a4d5e; }
.pd-cycle { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 12px; background: #fff; border: 1px solid #e3e7f5; font-size: 14px; font-weight: 700; color: var(--orange); line-height: 1.3; }
.pd-cycle b { font-size: 11.5px; font-weight: 600; color: #6b7085; }

/* Vùng bấm tối thiểu ~24–32px trên điện thoại (chấm banner, link "Xem tất cả", "Xem thêm") */
.hero__dots { padding-top: 0 !important; padding-bottom: 0 !important; }
.hero__dots button { box-sizing: content-box; padding: 9px 3px; background-clip: content-box; }
.sec-bar__more { display: inline-block; padding: 6px 0; }
.news__more { display: inline-block; padding: 4px 0; }
.cam-compare thead a { padding: 4px 0; }

/* Chân trang: máy tính hiện đủ cột; máy tính bảng / điện thoại thu gọn thành menu bấm mở */
.footer__toggle { display: none; }
@media (max-width: 1024px) {
  .footer__main { grid-template-columns: minmax(0, 1fr) !important; gap: 0; padding-top: 24px; padding-bottom: 8px; }
  .footer__info { grid-column: auto; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: #4a4d5e; }
  .footer__info p { margin-bottom: 6px; }
  .footer__info h4 { margin: 12px 0 8px; font-size: 14.5px; color: var(--text); }
  .footer__contact li { margin-bottom: 6px; }
  .footer__col { border-bottom: 1px solid var(--line); }
  .footer__col h5 { display: none; }
  .footer__toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 15px 0; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
  .footer__toggle i { width: 9px; height: 9px; border-right: 2px solid #8a8fa3; border-bottom: 2px solid #8a8fa3; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
  .footer__col.is-open .footer__toggle i { transform: rotate(-135deg); }
  .footer__list { display: none; padding: 0 0 12px 2px; }
  .footer__col.is-open .footer__list { display: block; }
  .footer__list a { margin-bottom: 0; padding: 8px 0; color: #4a4d5e; }
}

/* Trang thẻ tag: số bài + danh sách ngay dưới tiêu đề */

.nlatest--first { padding-top: 8px; }

.nrelated__more { display: inline-flex; margin-top: 22px; }

/* ---------- Nút liên hệ nổi: Gọi / Zalo / Messenger ---------- */
.cfab { position: fixed; bottom: 22px; z-index: 60; display: flex; flex-direction: column; gap: 14px; }
.cfab--right { right: 18px; align-items: flex-end; }
.cfab--left { left: 18px; align-items: flex-start; }
.cfab__btn { --c: #1fb35a; --c2: #12924a; position: relative; display: flex; align-items: center; text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent; }
.cfab--left .cfab__btn { flex-direction: row-reverse; }
.cfab__btn--zalo { --c: #0a7cff; --c2: #0059d6; }
.cfab__btn--msg { --c: #a033ff; --c2: #0a7cff; }
.cfab__ic { position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--c), var(--c2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .25s; }
.cfab__btn--msg .cfab__ic { background: linear-gradient(140deg, #0a7cff, #a033ff 60%, #ff5c87); }
.cfab__ic svg { width: 28px; height: 28px; }
.cfab__btn--zalo .cfab__ic svg { width: 34px; height: 34px; }
/* Nhãn dạng viên thuốc trượt ra khi rê chuột */
.cfab__label { position: absolute; top: 50%; display: grid; padding: 7px 16px; border-radius: 999px; background: #fff; color: #1c1f2e; white-space: nowrap; box-shadow: 0 10px 28px rgba(20,30,80,.18); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.3,1.4,.5,1); }
.cfab--right .cfab__label { right: calc(100% + 12px); transform: translate(12px, -50%) scale(.92); transform-origin: right center; }
.cfab--left .cfab__label { left: calc(100% + 12px); transform: translate(-12px, -50%) scale(.92); transform-origin: left center; }
.cfab__label b { font-size: 14px; color: var(--c2); }
.cfab__label small { font-size: 12px; color: #6b7085; }
.cfab__btn:hover .cfab__label, .cfab__btn:focus-visible .cfab__label { opacity: 1; transform: translate(0, -50%) scale(1); }
.cfab__btn:hover .cfab__ic, .cfab__btn:focus-visible .cfab__ic { transform: scale(1.1); box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.35); }
.cfab__btn:focus-visible { outline: none; }
.cfab__btn:focus-visible .cfab__ic { outline: 3px solid #fff; outline-offset: 2px; }

/* Hiệu ứng: xuất hiện lần lượt, sóng lan, rung chuông (Gọi), nhún nhẹ (Zalo, Messenger) */
.cfab--motion .cfab__btn { animation: cfab-in .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i) * 90ms + .4s); }
.cfab--motion .cfab__ic::before, .cfab--motion .cfab__ic::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c); opacity: .45; z-index: -1; animation: cfab-wave 2.4s ease-out infinite; animation-delay: calc(var(--i) * .5s); }
.cfab--motion .cfab__ic::after { animation-delay: calc(var(--i) * .5s + 1.2s); }
.cfab--motion .cfab__btn--call .cfab__ic svg { animation: cfab-ring 2.4s ease-in-out infinite; }
.cfab--motion .cfab__btn--zalo .cfab__ic svg, .cfab--motion .cfab__btn--msg .cfab__ic svg { animation: cfab-bob 3s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
.cfab--motion .cfab__btn:hover .cfab__ic svg { animation-play-state: paused; }
@keyframes cfab-in { from { opacity: 0; transform: translateY(18px) scale(.5); } }
@keyframes cfab-wave { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes cfab-ring { 0%, 55%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-16deg); } 10%, 20%, 30% { transform: rotate(16deg); } 35% { transform: rotate(0); } }
@keyframes cfab-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .cfab--motion .cfab__btn, .cfab--motion .cfab__ic::before, .cfab--motion .cfab__ic::after, .cfab--motion .cfab__ic svg { animation: none !important; } }

/* Điện thoại: nút nhỏ hơn, không hiện nhãn (bấm là gọi / mở chat ngay) */
@media (max-width: 720px) {
  .cfab { bottom: 16px; gap: 12px; }
  .cfab--right { right: 12px; } .cfab--left { left: 12px; }
  .cfab__ic { width: 48px; height: 48px; }
  .cfab__ic svg { width: 24px; height: 24px; }
  .cfab__btn--zalo .cfab__ic svg { width: 30px; height: 30px; }
  .cfab__label { display: none; }
}
/* Tinh chỉnh: sóng lan gọn hơn để các nút không đè vầng sáng lên nhau */
.cfab { gap: 18px; }
@keyframes cfab-wave { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(1.42); opacity: 0; } }
.cfab__btn--zalo .cfab__ic svg { width: 40px; height: 40px; }
.cfab__label { border: 1px solid #eef0f6; }
.cfab__label b { font-weight: 700; }
.cfab__label small { color: #4a4d5e; font-weight: 500; }
@media (max-width: 720px) { .cfab { gap: 14px; } .cfab__btn--zalo .cfab__ic svg { width: 34px; height: 34px; } }

/* Danh mục sản phẩm trang chủ: tự chia cột theo số ô (--n), không để hụt chỗ khi bớt danh mục */
.cats { --cols: var(--n, 6); --gap: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cats > .cat { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); max-width: 300px; min-width: 0; }
@media (max-width: 1320px) { .cats { --cols: var(--n2, 3); } }
@media (max-width: 720px) { .cats { --cols: 2; --gap: 14px; } .cats > .cat { max-width: none; } }
/* Máy tính bảng & điện thoại: 1 hàng trượt ngang (ô kế tiếp ló ra), tự chạy vòng tròn – bản sao ô (data-clone) để vòng liền mạch */
@media (max-width: 1024px) {
  .cats[data-loop] { --gap: 14px; --show: 3.3; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .cats[data-loop]::-webkit-scrollbar { display: none; }
  .cats[data-loop] > .cat { flex: 0 0 calc((100% - (var(--show) - 1) * var(--gap)) / var(--show)); max-width: none; scroll-snap-align: start; }
  .cats[data-loop] > .cat:hover { transform: none; }
}
@media (max-width: 720px) { .cats[data-loop] { --show: 2.2; } }
@media (min-width: 1025px) { .cats > [data-clone] { display: none; } }

/* ---------- Trang Ngoại Hạng Anh (/ngoai-hang-anh) ---------- */
.nha { --nha-1: #2b0033; --nha-2: #37003c; --nha-pink: #e90052; --nha-cyan: #04f5ff; --nha-green: #00ff85; color: #fff; background: var(--nha-2) var(--nha-bg, none) center top / cover fixed; }
.nha-banner { background: #1d0021; line-height: 0; }
.nha-banner img { width: 100%; height: auto; display: block; max-height: 560px; object-fit: cover; }
.nha-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.nha-wrap--narrow { max-width: 920px; }
.nha-sec { padding: 64px 0; background: linear-gradient(180deg, rgba(43,0,51,.92), rgba(55,0,60,.86)); }
.nha-sec--light { background: linear-gradient(180deg, rgba(70,8,78,.82), rgba(43,0,51,.9)); }
.nha-title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 18px; margin: 0; text-align: center; font-size: clamp(24px, 3.2vw, 38px); line-height: 1.25; font-weight: 800; }
.nha-title__logo { height: 40px; width: auto; filter: brightness(0) invert(1); }
.nha-h2 { margin: 0 auto; max-width: 900px; text-align: center; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; font-weight: 800; }
.nha-sub { max-width: 820px; margin: 14px auto 0; text-align: center; color: #e6d6ea; font-size: 16px; line-height: 1.65; }
.nha-badge { display: table; margin: 18px auto 0; padding: 8px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--nha-pink), #ff6a00); font-weight: 700; font-size: 14px; box-shadow: 0 8px 20px rgba(233,0,82,.35); }
.nha-hl { list-style: none; margin: 36px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nha-hl li { padding: 18px 12px; border-radius: 16px; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.nha-hl b { display: block; font-size: 30px; font-weight: 800; background: linear-gradient(90deg, var(--nha-cyan), var(--nha-green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nha-hl span { font-size: 13.5px; color: #e6d6ea; }

/* Bảng so sánh */
.nha-table-wrap { margin-top: 30px; overflow-x: auto; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); }
.nha-table { width: 100%; min-width: calc(200px + var(--cols) * 200px); border-collapse: collapse; font-size: 14.5px; }
.nha-table th, .nha-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
.nha-table tbody th { text-align: left; font-weight: 500; color: #e6d6ea; white-space: nowrap; }
.nha-table tbody th svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; fill: none; stroke: var(--nha-cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nha-table thead th { position: relative; padding-top: 26px; background: rgba(255,255,255,.06); vertical-align: top; }
.nha-table thead th.is-hot { background: linear-gradient(180deg, rgba(233,0,82,.35), rgba(255,255,255,.06)); }
.nha-table__corner { text-align: left !important; font-size: 16px; vertical-align: middle !important; }
.nha-table__name { display: block; color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; }
.nha-table__name:hover { color: var(--nha-cyan); }
.nha-table thead small { display: block; margin-top: 4px; font-weight: 400; color: #d9c4de; font-size: 12.5px; line-height: 1.45; }
.nha-table__hot { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--nha-pink); font-size: 11px; font-style: normal; font-weight: 700; }
.nha-table__price b { font-size: 22px; font-weight: 800; color: var(--nha-green); }
.nha-table__price small { display: block; color: #d9c4de; font-size: 12px; }
.nha-table__group th { padding: 10px 16px; background: rgba(4,245,255,.08); color: var(--nha-cyan) !important; font-weight: 700 !important; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.nha-table__perks { text-align: left !important; }
.nha-table__perks span { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.45; margin: 3px 0; }
.nha-ok { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--nha-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nha-table__act td { border-bottom: 0; padding-bottom: 22px; }
.nha-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 150px; height: 44px; padding: 0 22px; border-radius: 999px; background: linear-gradient(90deg, #ffb21a, #ffd84d); color: #3a0040; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(255,178,26,.3); transition: transform .18s, box-shadow .18s; }
.nha-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255,178,26,.45); }
.nha-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); box-shadow: none; }
.nha-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); box-shadow: none; }

/* Bảng giá Combo: thẻ gói trên nền tím */
.nha .slider { margin-top: 30px; }
.nha .slider__btn { background: #fff; color: var(--nha-2); }

/* Gói V.VIP FPT Play */
.nha-tv { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; gap: 24px; margin-top: 30px; }
.nha-tv__card { border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.nha-tv__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.nha-tv__img { display: block; line-height: 0; background: #1d0021; }
.nha-tv__img img { width: 100%; height: auto; }
.nha-tv__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nha-tv__body h3 { margin: 0; font-size: 20px; }
.nha-tv__body h3 a { color: #fff; text-decoration: none; }
.nha-tv__price b { font-size: 26px; color: var(--nha-green); }
.nha-tv__price small { color: #d9c4de; }
.nha-tv__body ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #f0e6f2; flex: 1; }
.nha-tv__body .nha-btn { align-self: flex-start; }

/* Khuyến mãi */
.nha-promo { display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; margin-top: 32px; }
.nha-promo__img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.nha-promo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nha-promo__list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.nha-promo__list img { flex: none; width: 52px; height: 52px; }
.nha-promo__list h3 { margin: 0; font-size: 16px; }
.nha-promo__list p { margin: 4px 0 0; color: #e6d6ea; font-size: 14px; line-height: 1.55; }

/* Hỏi đáp */
.nha-faq { margin-top: 28px; display: grid; gap: 10px; }
.nha-faq details { border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.nha-faq summary { cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 700; list-style: none; position: relative; }
.nha-faq summary::-webkit-details-marker { display: none; }
.nha-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--nha-cyan); transition: transform .2s; }
.nha-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.nha-faq p { margin: 0; padding: 0 18px 18px; color: #e6d6ea; line-height: 1.7; white-space: pre-line; }

/* Tư vấn */
.nha-cta__box { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px 32px; border-radius: 22px; background: linear-gradient(120deg, var(--nha-pink), #8a00a8); box-shadow: 0 20px 50px rgba(233,0,82,.3); }
.nha-cta__box h2 { margin: 0; font-size: 24px; }
.nha-cta__box p { margin: 6px 0 0; color: #ffe3ee; }
.nha-cta__box .callback__form { flex: 1; min-width: 300px; max-width: 520px; }

/* Câu trả lời hỏi đáp có xuống dòng (mọi trang) */
.faq details p { white-space: pre-line; }

@media (max-width: 900px) {
  .nha-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nha-promo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .nha-sec { padding: 44px 0; }
  .nha-wrap { padding: 0 16px; }
  .nha { background-attachment: scroll; }
  .nha-table tbody th { position: sticky; left: 0; z-index: 1; background: #3a0641; white-space: normal; min-width: 130px; }
  .nha-table { min-width: calc(140px + var(--cols) * 170px); font-size: 13.5px; }
  .nha-cta__box { padding: 22px 18px; }
}
/* Thẻ gói (nền trắng) đặt trên nền tím: trả lại màu chữ tối */
.nha .card { color: #1f2333; }
.nha-promo__img { box-shadow: none; border-radius: 0; }

/* =====================================================================
   Đợt chỉnh giao diện chuyên nghiệp (10/2026)
   ===================================================================== */

/* ---- Icon SVG dùng chung (src/icons.js): cỡ theo font-size của khung chứa ---- */
.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.14em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--emoji { width: auto; height: auto; stroke: none; }
.need__ic, .pd-feat span, .cam-benefits__ic, .ab-values__item span { color: #f0620a; }
.need__ic .ico { width: 26px; height: 26px; }
.ab-service__ic, .cam-tech__ic { color: var(--blue); }
.pd-task span { color: #ffb27a; }
.pd-trust span { color: #f0620a; display: inline-grid; }
.cat__img { color: rgba(255,255,255,.92); }
.cat__img .ico { stroke-width: 1.3; }
.trophy, .players, .net__people { color: rgba(255,255,255,.9); }
.trophy .ico, .players .ico, .net__people .ico { stroke-width: 1.4; }
.net__people { font-size: 76px; }
.slide__card .gift { color: #ff6a00; }
.marquee .ico { color: #ffe066; margin-right: 2px; }
.promo-bar__fire { display: inline-grid; color: #ffb400; }
.art-tags__label .ico { color: var(--blue); }
.nha-badge .ico { margin-right: 4px; }
.cta-home__btn, .pd-btn { gap: 8px; }
.cta-home__btn { display: inline-flex; align-items: center; }
.footer__contact li { align-items: flex-start; }
.footer__contact .ico { font-size: 17px; margin-top: 2px; color: #f0620a; }
.footer__contact a:hover { color: var(--blue); }
.ab-contact li { align-items: center; }
.ab-contact li .ico { font-size: 18px; color: #ffb27a; }

/* ---- Nhãn nhỏ trên tiêu đề khối: chấm màu thay emoji ---- */
.eyebrow { gap: 8px; letter-spacing: .2px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(240, 98, 10, .18); }
.eyebrow--light::before { box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* ---- Đầu trang một hàng (bỏ thanh xanh phía trên) ---- */

.nav { gap: 28px; }
.nav__menu { gap: 30px; }
.nav__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.nav__hotline { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; transition: background .15s; }
.nav__hotline:hover { background: #f4f6ff; }
.nav__hotline-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #eaf7ef; color: #12a150; font-size: 18px; }
.nav__hotline-txt { display: flex; flex-direction: column; line-height: 1.15; }
.nav__hotline-txt small { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.nav__hotline-txt b { font-size: 16px; color: #1b2068; letter-spacing: .2px; }
.nav__icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; color: #3a3d4f; transition: background .15s, color .15s; }
.nav__icon-btn:hover { background: #f4f6ff; color: var(--blue); }
.nav__cta { margin-left: 4px; }
.nav__drawer-only { display: none !important; }
@media (max-width: 1280px) { .nav__hotline-txt small { display: none; } .nav__menu { gap: 22px; } }
@media (max-width: 1100px) {
  .nav { gap: 12px; }
  .nav__toggle { margin-left: 4px; }
  .nav__drawer-only { display: flex !important; }
  .nav__drawer-only a { gap: 8px !important; justify-content: flex-start !important; }
  .nav__menu { max-height: calc(100vh - 72px); }
}
@media (max-width: 720px) {
  .nav { height: 64px; }
  .nav__hotline { padding: 0; }
  .nav__hotline-txt, .nav__icon-btn { display: none; }
  .nav__hotline-ic { width: 40px; height: 40px; }
  .nav__cta { padding: 8px 16px; font-size: 14px; }
  .nav .logo__img { max-height: 42px; max-width: 165px; }
}

/* ---- Thanh ưu đãi: điện thoại chỉ 1 dòng, bấm cả thanh để mở ưu đãi ---- */
@media (max-width: 720px) {
  .promo-bar__inner { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; padding-top: 7px; padding-bottom: 7px; position: relative; }
  .promo-bar__fire { font-size: 16px; }
  .promo-bar__text { width: auto; flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
  .promo-bar__label { display: none; }
  .promo-bar__timer { gap: 3px; flex-shrink: 0; }
  .cd { padding: 2px 5px; border-radius: 6px; }
  .cd b { font-size: 13px; min-width: 16px; }
  .cd small { font-size: 9.5px; }
  .promo-bar__btn { position: absolute; inset: 0; opacity: 0; font-size: 0; }
}

/* ---- Nút: cam = hành động chính, xanh viền = hành động phụ ---- */
.btn--primary { background: linear-gradient(135deg, #ff7a1a, #ff5a00); color: #fff; }
.btn--outline { background: #fff; color: var(--blue); border: 1.5px solid #c9d2fb; font-weight: 600; line-height: 44px; }
.btn--outline:hover { background: #f2f4ff; border-color: var(--blue); filter: none; }
.btn--ghost { background: #fff; color: var(--blue); border: 1.5px solid #c9d2fb; line-height: 44px; }

/* ---- Thẻ gói: tối đa 3 ý ngắn, mỗi ý tối đa 2 dòng; ô tốc độ không bị đè ---- */
.card__feats { min-height: 0; }
.card__feats li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; margin-bottom: 8px; }
.speed > div:first-child { flex: 1; }
@media (max-width: 720px) {
  .card .gauge { display: none; }
  .speed p { white-space: normal; }
}

/* ---- Trang chủ: bỏ khung trắng viền; các khối xen kẽ dải nền trắng / xám nhạt tràn màn hình ---- */
.page--home .block.hsec { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.page--home .hsec, .page--home .block.hsec { margin-top: 0; padding: 64px 0; }
.page--home .hsec--alt { background: #f5f7fc; box-shadow: 0 0 0 100vmax #f5f7fc; clip-path: inset(0 -100vmax); }
.page--home .stats { margin-bottom: 40px; }
.page--home .hsec .sec-head { margin-bottom: 32px; }
.page--home .hsec .see-all { margin-top: 26px; }
.page--home .hsec + .cta-home { margin-top: 0; }
.page--home .hsec--alt .glass, .page--home .hsec--alt .card { background: #fff; }
.page--home .hsec .card { box-shadow: 0 6px 22px rgba(27, 32, 104, .08); }
@media (max-width: 720px) {
  .page--home .hsec, .page--home .block.hsec { padding: 40px 0; }
  .page--home .hsec .sec-head { margin-bottom: 22px; }
}

/* ---- Ảnh đại diện bài viết chưa có ảnh: khung thương hiệu ---- */
.nph { position: relative; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 18px; overflow: hidden; text-align: left;
  background: radial-gradient(120% 90% at 100% 0, rgba(255, 122, 26, .55), transparent 55%), linear-gradient(135deg, #1b2068, #3a4bd8); color: #fff; }
.nph::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(255,255,255,.07); }
.nph__cat { align-self: flex-start; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px !important; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff !important; font-family: 'Inter', sans-serif !important; }
.nph__title { font-family: 'Lexend', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; line-height: 1.3; color: #fff !important; padding: 0 !important; text-align: left !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nph__ic { position: absolute; top: 14px; right: 16px; font-size: 22px; opacity: .55; z-index: 1; }
.news__img .nph { width: 100%; height: 100%; }
.nph--sm { padding: 8px; justify-content: center; align-items: center; }
.nph--sm .nph__cat, .nph--sm .nph__title { display: none !important; }
.nph--sm .nph__ic { position: static; font-size: 26px; opacity: .8; }
.nph--sm::after { display: none; }
.nrow__img.nph .nph__title { font-size: 15px !important; }

/* ---- Kiểu chữ tiêu đề thống nhất: Lexend, thang cỡ H1 40 / H2 32 / H3 20 ---- */
:root { --font-head: 'Lexend', 'Inter', sans-serif; --h1: clamp(28px, 3.2vw, 40px); --h2: clamp(24px, 2.6vw, 32px); --h3: 20px; }
.pd-title, .page-head h1, .ab-hero h1, .narticle h1 { font-family: var(--font-head); font-size: var(--h1); font-weight: 700; letter-spacing: -0.8px; line-height: 1.2; }
.sec-head__title, .vvip__title, .cta-home h2, .pd-h2, .sec-bar h2, .nha-h2, .ab-story h2, .ab-contact h2, .cam-app h2, .nsec-title, .nsec-title--lg {
  font-family: var(--font-head); font-size: var(--h2); font-weight: 700; letter-spacing: -0.6px; line-height: 1.25; }
.need__text b, .pd-sec h3 { font-family: 'Inter', sans-serif; }
.callback__text h2 { font-family: var(--font-head); font-weight: 600; }
.cta-home h2 { font-weight: 700; }

/* ---- Trang chi tiết gói: cột phải gọn, bảng so sánh rõ gói đang xem ---- */
.pd-perks li { line-height: 1.55; }
.pd-compare th.is-current, .pd-compare td.is-current { background: #fff6ef; box-shadow: inset 2px 0 0 #ff7a1a, inset -2px 0 0 #ff7a1a; }
.pd-compare thead th.is-current { box-shadow: inset 2px 0 0 #ff7a1a, inset -2px 0 0 #ff7a1a, inset 0 2px 0 #ff7a1a; border-radius: 12px 12px 0 0; }
.pd-compare tbody tr:last-child td.is-current { box-shadow: inset 2px 0 0 #ff7a1a, inset -2px 0 0 #ff7a1a, inset 0 -2px 0 #ff7a1a; }

/* Đầu trang còn 1 hàng (72px, điện thoại 64px): chỉnh lại vị trí các thanh dính và khoảng cuộn tới mục */
.pd-nav { top: 72px; }
.pd-sec { scroll-margin-top: 140px; }
.prose h2[id], .prose h3[id], .pkg-group { scroll-margin-top: 90px; }
@media (max-width: 1100px) { .pd-nav { top: 72px; } .pd-sec { scroll-margin-top: 130px; } }
@media (max-width: 720px) { .pd-nav { top: 64px; } .nav__menu { max-height: calc(100vh - 64px); } }
.pd-compare__flag { background: #ff7a1a !important; color: #fff !important; }
.ab-contact li > span { width: auto; text-align: left; }
.ab-contact li { align-items: flex-start; } .ab-contact li .ico { margin-top: 4px; }
@media (max-width: 1100px) {
  .nav__tools .nav__cta { margin: 0 0 0 4px; }
  .promo-bar__inner { flex-wrap: nowrap; justify-content: flex-start; }
  .promo-bar__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .promo-bar__label { display: none; }
  .promo-bar__timer, .promo-bar__btn { flex-shrink: 0; }
}

/* Menu điện thoại / máy tính bảng: các dòng gọn, dễ quét mắt */
@media (max-width: 1100px) {
  .nav__menu { padding: 4px 16px 10px; font-size: 15px; gap: 0; }
  .nav__menu > li > a { padding: 10px 2px; min-height: 44px; }
  .nav__menu > li { border-bottom-color: #f0f1f5; }
  .sub, .sub--mega { padding: 0 0 6px 8px; }
  .sub a, .mega__col li a { padding: 7px 10px; font-size: 14px; }
  .sub a small { display: none; }
  .mega__head { padding: 7px 10px 3px; font-size: 14px; }
  .nav__drawer-only { border-bottom: 0 !important; }
}
/* Đầu trang thẻ tag: gọn, không khung nền – tiêu đề + dòng thông tin + mô tả, gạch chân phân cách danh sách */
.taghero { margin: 26px 0 28px; padding-bottom: 20px; border-bottom: 1px solid #e6e8ef; }
.taghero__top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; }
.taghero__title { margin: 0; font-family: var(--font-head, 'Lexend', sans-serif); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; color: #1b2068; }
.taghero__hash { color: var(--orange); margin-right: 4px; font-weight: 600; }
.taghero__meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 13.5px; color: #6b7085; }
.taghero__meta span + span::before { content: "·"; margin: 0 8px; color: #b3b7c7; }
.taghero__meta b { color: #1b2068; font-weight: 600; }
.taghero__desc { margin: 10px 0 0; max-width: 820px; color: #4a4d5e; font-size: 15px; line-height: 1.65; }
@media (max-width: 720px) { .taghero { margin: 18px 0 20px; padding-bottom: 16px; } .taghero__desc { font-size: 14.5px; } }/* Trang thẻ tag: tiêu đề danh sách nhỏ hơn tên chủ đề (tên chủ đề là tiêu đề chính) */
.nsec-title.nsec-title--sm { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0; color: #3a3d4f; margin-bottom: 0; }
.taghero__title { font-size: clamp(26px, 3vw, 36px); }

/* Khối V.VIP trên điện thoại: 4 ô thành lưới 2×2 gọn, icon nhỏ, mô tả tối đa 3 dòng; ảnh khuyến mãi thu nhỏ */
@media (max-width: 720px) {
  .home .vvip { padding: 36px 14px 32px; }
  .home .vvip .eyebrow { margin-bottom: 10px; }
  .vvip__title { font-size: 21px; line-height: 1.3; }
  .vvip__sub { font-size: 13.5px; margin-top: 8px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vvip__grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .feat { padding: 14px 12px; border-radius: 14px; }
  .feat__img { width: 36px; height: 36px; }
  .feat h3 { font-size: 14px; line-height: 1.35; margin-top: 10px; letter-spacing: -0.2px; }
  .feat p { font-size: 12.5px; line-height: 1.45; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vvip__grid .promo { grid-column: 1 / -1; max-width: 300px; margin-top: 6px; }
}

/* ---- Khối đánh giá khách hàng: băng chuyền 1 hàng tự xoay vòng – máy tính 3 thẻ, máy tính bảng 2, điện thoại 1 ---- */
.rv-carousel { --gap: 14px; --per: 3; position: relative; max-width: 1080px; margin: 0 auto; }
.rv-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 6px; outline: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); min-width: 0; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 16px 18px 14px; border-radius: 14px; background: #fff; border: 1px solid #e8ebf5; text-align: left; }
.rv-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-stars { color: #ffb400; font-size: 13px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.rv-stars i { font-style: normal; color: #dfe2ec; }
.rv-pkg { display: inline-flex; align-items: center; gap: 4px; max-width: 62%; padding: 3px 9px; border-radius: 999px; background: #eef1ff; color: #3a4bd8; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-pkg svg { width: 12px; height: 12px; flex: none; }
.rv-card blockquote { flex: 1; margin: 10px 0 0; color: #2c3048; font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rv-author { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f6; }
.rv-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.rv-ava--text { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; background: linear-gradient(135deg, #ff7a1a, #7b4bff); }
.rv-author__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.rv-author__txt b { color: #1b2068; font-size: 14px; }
.rv-author__txt small { color: #6b7085; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-author__txt small svg { width: 12px; height: 12px; flex: none; }
.rv-nav { position: absolute; top: calc(50% - 22px); z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: #1b2068; border: 1px solid #e3e6f0; box-shadow: 0 4px 14px rgba(27, 32, 104, .12); transition: background .2s, color .2s; }
.rv-nav:hover { background: #1b2068; color: #fff; }
.rv-nav--prev { left: -18px; } .rv-nav--next { right: -18px; }
.rv-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.rv-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #d5d9e8; cursor: pointer; transition: width .25s, background .25s; }
.rv-dots button.on { width: 20px; background: #ff6a00; }
@media (max-width: 960px) { .rv-carousel { --per: 2; } }
@media (max-width: 1100px) { .rv-nav--prev { left: -6px; } .rv-nav--next { right: -6px; } } /* màn hẹp: nút ‹ › không lố ra mép màn hình */
@media (max-width: 720px) {
  .rv-carousel { --per: 1; }
  .rv-card { flex-basis: 86%; }
  .rv-nav { display: none; }
}

/* ---- Lắp đặt 3 bước: dạng tiến trình có chuyển động ----
   Khi khối cuộn vào màn hình (.reveal.is-in): đường nối tô dần từ trái sang phải, các bước lần lượt bật lên,
   sau đó một chấm sáng chạy dọc đường nối và vòng sáng nhịp quanh số bước. Điện thoại: xếp dọc gọn. */
.flow { --dot: 60px; --dur: 1.6s; position: relative; max-width: 1100px; margin: 0 auto; }
.flow__list { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; position: relative; z-index: 1; }
.flow__track { position: absolute; top: calc(var(--dot) / 2 - 2px); left: calc(100% / var(--n) / 2); right: calc(100% / var(--n) / 2); height: 4px; border-radius: 4px; background: #e6e9f4; overflow: hidden; }
.flow__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ff7a1a, #ff3d7f); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) cubic-bezier(.6, .1, .2, 1) .3s; }
.flow__runner { position: absolute; top: 50%; left: 0; width: 60px; height: 4px; margin-top: -2px; border-radius: 4px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); }
.flow__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow__dot { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #e6e9f4;
  color: #9aa0b8; font-family: var(--font-head, "Lexend", sans-serif); font-size: 22px; font-weight: 700;
  transition: background .4s, color .4s, border-color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .4s;
  transition-delay: calc(.3s + var(--i) * var(--dur) / (var(--n) - 1 + .001) * .9); }
.flow__dot::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 90, 60, .35); opacity: 0; }
.flow__txt { margin-top: 18px; max-width: 300px; opacity: .35; transform: translateY(8px); transition: opacity .5s, transform .5s; transition-delay: calc(.4s + var(--i) * var(--dur) / (var(--n) - 1 + .001) * .9); }
.flow__txt h3 { font-size: 18px; color: #1b2068; font-weight: 700; }
.flow__txt p { margin-top: 6px; color: #5b6077; font-size: 14.5px; line-height: 1.6; }

/* Trạng thái đã cuộn tới */
.flow.is-in .flow__fill, html:not(.js) .flow__fill { transform: none; }
.flow.is-in .flow__dot { border-color: transparent; color: #fff; transform: scale(1.06); box-shadow: 0 10px 24px rgba(255, 80, 60, .32); }
/* Nền gradient của ô số: lớp phủ hiện dần đúng lúc đường nối chạy tới */
.flow__dot { isolation: isolate; }
.flow__dot::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1; background: linear-gradient(135deg, #ff7a1a, #ff3d7f); opacity: 0;
  transition: opacity .4s; transition-delay: calc(.3s + var(--i) * var(--dur) / (var(--n) - 1 + .001) * .9); }
.flow.is-in .flow__dot::before, html:not(.js) .flow__dot::before { opacity: 1; }
html:not(.js) .flow__dot { color: #fff; }
.flow.is-in .flow__dot::after { animation: flow-ping 2.4s ease-out infinite; animation-delay: calc(2.2s + var(--i) * .8s); }
.flow.is-in .flow__txt, html:not(.js) .flow__txt { opacity: 1; transform: none; }
.flow.is-in .flow__runner { animation: flow-run 2.6s ease-in-out 2.2s infinite; }
@keyframes flow-ping { 0% { opacity: .9; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes flow-run { 0% { left: -60px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.flow__step:hover .flow__dot { transform: scale(1.12); }

@media (max-width: 720px) {
  .flow { --dot: 44px; max-width: 420px; padding-left: 8px; }
  .flow__list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flow__track { top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); left: calc(var(--dot) / 2 + 6px); right: auto; width: 4px; height: auto; }
  .flow__fill { transform: scaleY(0); transform-origin: top; }
  .flow.is-in .flow__fill { transform: scaleY(1); }
  .flow__runner { width: 4px; height: 50px; left: 0; top: 0; margin: 0; background: linear-gradient(180deg, transparent, rgba(255,255,255,.95), transparent); }
  .flow.is-in .flow__runner { animation-name: flow-run-v; }
  @keyframes flow-run-v { 0% { top: -50px; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
  .flow__step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .flow__dot { flex: none; font-size: 17px; }
  .flow__dot::after { inset: -6px; }
  .flow__txt { margin-top: 2px; max-width: none; }
  .flow__txt h3 { font-size: 15.5px; }
  .flow__txt p { font-size: 13.5px; margin-top: 3px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__fill, .flow__dot, .flow__txt { transition: none !important; }
  .flow__dot::after, .flow__runner { animation: none !important; }
}
.sec-bar + .flow, .pd-h2 + .flow { margin-top: 10px; }

/* ===================== Khối của trình dựng trang (src/builder) ===================== */
/* Tùy chọn hiển thị: nền, khoảng cách, thiết bị (lớp do render.js gắn vào vỏ .blk) */
.blk--bg-gray, .blk--bg-white, .blk--bg-brand { position: relative; }
.blk--bg-gray { background: #f5f7fc; box-shadow: 0 0 0 100vmax #f5f7fc; clip-path: inset(0 -100vmax); }
.blk--bg-white { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }
.blk--bg-brand { background: #fff4ec; box-shadow: 0 0 0 100vmax #fff4ec; clip-path: inset(0 -100vmax); }
.page--home .hsec--brand { background: #fff4ec; box-shadow: 0 0 0 100vmax #fff4ec; clip-path: inset(0 -100vmax); }
.blk--sp-wide { padding-top: 32px; padding-bottom: 32px; }
.blk--sp-compact > section, .blk--sp-compact > .block, .blk--sp-compact > .hsec { margin-top: 8px !important; padding-top: 24px !important; padding-bottom: 24px !important; }
@media (max-width: 720px) { .blk--only-desktop { display: none !important; } }
@media (min-width: 721px) { .blk--only-mobile { display: none !important; } }
.blk[id] { scroll-margin-top: 130px; }

/* Khối "Văn bản + ảnh" */
.ti { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.ti--left .ti__img { order: -1; }
.ti--noimg { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.ti__title { font-family: var(--font-head); font-size: var(--h2); font-weight: 700; color: #1b2068; letter-spacing: -0.5px; line-height: 1.25; margin: 10px 0 12px; }
.ti__text p { color: #4a4d5e; font-size: 15.5px; line-height: 1.7; margin-top: 10px; }
.ti__btn { display: inline-block; margin-top: 18px; width: auto; }
.ti__img { width: 100%; border-radius: 20px; box-shadow: 0 16px 40px rgba(27,32,104,.12); }
@media (max-width: 720px) { .ti { grid-template-columns: minmax(0, 1fr); gap: 20px; } .ti--left .ti__img { order: 0; } }
.embed-block { margin: 24px 0; }
.embed-block iframe { max-width: 100%; }

/* Các quy tắc "khối đứng ngay sau khối" khi khối được bọc trong .blk (trình dựng trang) */
.blk--banner_slider + .page > .blk:first-child > .callback { margin-top: 20px; }
.blk--about_hero + .page { padding-top: 48px; }
.page--home .blk:has(> .hsec) + .blk--cta_band > .cta-home { margin-top: 0; }

/* Trang dựng bằng khối: khối nằm ngoài màn hình thì trình duyệt chưa dựng/vẽ (cuộn mượt hơn, nhất là máy yếu).
   auto 600px: chiều cao tạm trước lần hiện đầu tiên, sau đó nhớ chiều cao thật nên thanh cuộn không nhảy */
.blk:not(:has(> .pd-nav)) { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ---- Tìm kiếm: nút trên menu, khung tìm nhanh (public/js/search.js), trang /tim-kiem ---- */
.nav__search { height: 40px; min-width: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border-radius: 999px; color: #3a3d4f; font-size: 19px; background: transparent; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.nav__search:hover, .nav__search:focus-visible { background: #f4f6ff; color: var(--blue); }
.nav__search-txt, .nav__search kbd { display: none; }
.nav__search kbd, .srch__close kbd { font: 600 11px/1 Inter, sans-serif; padding: 3px 6px; border-radius: 5px; border: 1px solid #dfe3f0; background: #fff; color: #7a7f95; }
@media (min-width: 1440px) {
  .nav__search { width: 236px; padding: 0 8px 0 14px; background: #f5f6fa; border-color: #eceef5; font-size: 17px; }
  .nav__search:hover { border-color: #d6dcf7; }
  .nav__search-txt { display: block; flex: 1; min-width: 0; font-size: 13.5px; color: #8a8fa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav__search kbd { display: inline-block; }
}
@media (max-width: 1100px) { .nav__search { display: none; } } /* điện thoại / máy tính bảng: dùng ô tìm trong menu */
.nav__sfield { width: 100%; display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; padding: 0 14px; height: 46px; border-radius: 12px; background: #f4f5f9; border: 1px solid #e8eaf2; color: #8a8fa3; font-size: 14.5px; text-align: left; }
.nav__sfield .ico { font-size: 18px; color: #5a5f78; flex-shrink: 0; }
.nav__sfield span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__drawer-search { order: -1; }

html.srch-lock, html.srch-lock body { overflow: hidden; }
.srch { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; }
.srch[hidden] { display: none; }
.srch__backdrop { position: absolute; inset: 0; background: rgba(16, 20, 50, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s; }
.srch__panel { position: relative; width: min(680px, 100%); max-height: min(640px, 82vh); display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(16, 20, 60, .28); overflow: hidden; opacity: 0; transform: translateY(-10px) scale(.985); transition: opacity .18s, transform .22s cubic-bezier(.2, .9, .3, 1.1); }
.srch.is-open .srch__backdrop { opacity: 1; }
.srch.is-open .srch__panel { opacity: 1; transform: none; }
.srch__bar { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; height: 64px; border-bottom: 1px solid #eef0f5; flex-shrink: 0; }
.srch__ic { font-size: 21px; color: var(--blue); display: flex; }
.srch__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 17px Inter, sans-serif; color: #1b2068; }
.srch__input::placeholder { color: #9a9fb3; font-weight: 400; }
.srch__input::-webkit-search-cancel-button { display: none; }
.srch__clear { width: 30px; height: 30px; border-radius: 50%; background: #f0f2f7; color: #6b7085; font-size: 18px; line-height: 1; flex-shrink: 0; }
.srch__clear:hover { background: #e4e7f0; }
.srch__close { display: flex; align-items: center; gap: 6px; padding: 6px; color: #6b7085; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.srch__close span { display: none; }
.srch__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px; }
.srch__foot { flex-shrink: 0; padding: 9px 18px; border-top: 1px solid #eef0f5; font-size: 12px; color: #9a9fb3; background: #fafbfd; }
.srch__sec { padding: 8px 6px 4px; }
.srch__head { display: flex; align-items: center; gap: 7px; padding: 4px 8px 6px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #8a8fa3; }
.srch__head .ico { font-size: 15px; color: #b0b5c8; }
.srch__head small { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #a8adbf; background: #f3f4f8; padding: 2px 7px; border-radius: 999px; }
.srch__x { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--blue); text-transform: none; letter-spacing: 0; }
.srch__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 8px 6px; }
.srch__chips--center { justify-content: center; }
.srch__chip { padding: 7px 13px; border-radius: 999px; background: #f3f5fb; border: 1px solid #e6e9f3; color: #3a3d4f; font-size: 13.5px; font-weight: 500; transition: .15s; }
.srch__chip:hover { background: #eef1ff; border-color: #cdd5fb; color: var(--blue); }
.srch__chip--hot { background: #fff6ef; border-color: #ffe2cc; color: #c2410c; }
.srch__chip--hot:hover { background: #ffeddd; border-color: #ffc89e; color: #c2410c; }
.srch__list { display: flex; flex-direction: column; }
.srch__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: #23263a; scroll-margin: 8px; }
.srch__item.is-active, .srch__item:focus-visible { background: #f1f4ff; outline: none; }
.srch__thumb { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: #f3f5fb; display: grid; place-items: center; }
.srch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.srch__thumb--ic { font-size: 20px; color: var(--blue); background: #eef1ff; }
.srch__thumb--phone { color: #12a150; background: #eaf7ef; }
.srch__item--news .srch__thumb { width: 64px; }
.srch__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srch__txt b { font-size: 14.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srch__txt small { font-size: 12.5px; color: #7a7f95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch__price { flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--orange); }
.srch mark, .sres mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.srch__all { justify-content: center; margin: 6px 6px 2px; padding: 11px; background: #f5f7fc; font-size: 14px; font-weight: 600; color: var(--blue); }
.srch__empty { text-align: center; padding: 28px 20px 8px; color: #6b7085; font-size: 14.5px; line-height: 1.6; }
.srch__empty > .ico { font-size: 34px; color: #c7cce0; margin-bottom: 8px; }
.srch__empty a { color: var(--blue); font-weight: 600; white-space: nowrap; }
.srch__loading { display: flex; justify-content: center; gap: 6px; padding: 26px; }
.srch__loading span { width: 8px; height: 8px; border-radius: 50%; background: #c7cfee; animation: srch-dot 1s infinite ease-in-out; }
.srch__loading span:nth-child(2) { animation-delay: .15s; } .srch__loading span:nth-child(3) { animation-delay: .3s; }
@keyframes srch-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: none; opacity: 1; } }
@media (max-width: 720px) {
  .srch { padding: 0; }
  .srch__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; transform: translateY(12px); }
  .srch__bar { height: 60px; padding: 0 8px 0 16px; }
  .srch__input { font-size: 16px; } /* 16px: iPhone không tự phóng to khi gõ */
  .srch__close span { display: inline; }
  .srch__price { font-size: 13px; max-width: 38%; text-align: right; }
  .srch__txt b { font-size: 14px; }
  .srch__close kbd, .srch__foot { display: none; }
  .srch__body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .srch__panel, .srch__backdrop { transition: none; } }

.sres { padding: 26px var(--gutter) 64px; }
.sres__title { margin: 0 0 16px; font-family: var(--font-head, 'Lexend', sans-serif); font-size: clamp(22px, 2.6vw, 30px); color: #1b2068; line-height: 1.25; overflow-wrap: anywhere; }
.sres__form { display: flex; align-items: center; gap: 10px; max-width: 720px; height: 54px; padding: 0 6px 0 16px; border: 1.5px solid #dfe3f0; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.sres__form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(69, 100, 237, .12); }
.sres__ic { font-size: 20px; color: #8a8fa3; flex-shrink: 0; }
.sres__form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 16px Inter, sans-serif; color: #1b2068; }
.sres__btn { height: 42px; padding: 0 22px; border-radius: 10px; background: var(--orange); color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.sres__count { margin: 14px 0 6px; color: #6b7085; font-size: 14.5px; }
.sres__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.sres__tabs a { padding: 6px 13px; border-radius: 999px; background: #f3f5fb; color: #3a3d4f; font-size: 13.5px; font-weight: 600; }
.sres__tabs a:hover { background: #eef1ff; color: var(--blue); }
.sres__tabs small, .sres__h small { font-weight: 600; color: #9a9fb3; }
.sres__group { margin-top: 26px; scroll-margin-top: 90px; }
.sres__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; color: #1b2068; }
.sres__h .ico { color: var(--blue); }
.sres__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sres__list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sres__item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #eceef5; border-radius: 14px; background: #fff; color: #23263a; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sres__item:hover { border-color: #cdd5fb; box-shadow: 0 8px 22px rgba(30, 40, 110, .08); transform: translateY(-1px); }
.sres__thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: #f3f5fb; display: grid; place-items: center; }
.sres__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sres__thumb--ic { font-size: 24px; color: var(--blue); background: #eef1ff; }
.sres__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sres__txt b { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sres__txt small { font-size: 13px; color: #7a7f95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sres__txt em { font-style: normal; font-weight: 700; color: var(--orange); font-size: 14.5px; }
.sres__empty { margin: 30px 0 10px; max-width: 720px; text-align: center; color: #6b7085; font-size: 15px; line-height: 1.6; }
.sres__empty-ic { font-size: 40px; color: #c7cce0; }
.sres__empty a { color: var(--blue); font-weight: 600; }
.sres__pop { margin-top: 28px; max-width: 720px; }
.sres__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sres__chips a { padding: 8px 14px; border-radius: 999px; background: #fff6ef; border: 1px solid #ffe2cc; color: #c2410c; font-size: 14px; font-weight: 500; }
@media (max-width: 1100px) { .sres__list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .sres { padding-top: 18px; }
  .sres__list, .sres__list--cards { grid-template-columns: minmax(0, 1fr); }
  .sres__btn { padding: 0 16px; }
  .sres__thumb { width: 56px; height: 56px; }
}