/* Bổ sung cho thiết kế gốc: ảnh, video thật và trang Sứ mệnh. Không đổi màu, chữ của bản gốc. */
.hero__img { padding: 0 !important; width: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4, 28, 18, .92) 100%); pointer-events: none; }
.hero__caption, .hero__seals { z-index: 2; }

.seal--stat { border-style: solid !important; border-color: var(--champagne) !important; width: 92px !important; height: 92px !important; color: var(--white) !important; }
.seal__txt { font: 600 13px/1.25 var(--font-sans); color: var(--champagne); }

.media--filled { position: relative; width: 100%; overflow: hidden; border-radius: 4px; background: #041c12; }
.media--filled > video, .media--filled > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.rcard--real .rcard__avatar--letter { display: grid; place-items: center; background: var(--forest); color: var(--champagne); font: 600 15px/1 var(--font-sans); }
.rcard__name b { display: block; font: 600 14px/1.3 var(--font-sans); color: var(--ink, #17231d); }
.rcard__name small { font: 400 12px/1.3 var(--font-sans); color: var(--body); }
.rcard__stars { color: #f4b400; letter-spacing: 2px; font-size: 15px; }
.rcard__quote { margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--ink, #17231d); }

.gcard--mission { border-color: var(--champagne) !important; background: rgba(201, 176, 122, .08) !important; }
.gcard--mission a { color: var(--champagne); font-weight: 600; }

/* Trang Sứ mệnh bảo tồn răng nguyên bản */
.mis-hero { padding-top: clamp(48px, 7vw, 96px); }
.mis-hero__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.mis-hero__lead { font: 300 18px/1.65 var(--font-sans); color: var(--on-forest); margin: 18px 0 26px; max-width: 520px; }
.mis-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.mis-split__img { width: 100%; height: auto; border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; }
.mis-points { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; }
.mis-points li { padding-left: 28px; position: relative; font: 400 16px/1.55 var(--font-sans); }
.mis-points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--champagne); border-bottom: 2px solid var(--champagne); transform: rotate(-45deg); }
.mis-age { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.mis-age b { white-space: nowrap; font: 500 52px/1 var(--font-serif, Georgia, serif); color: var(--champagne); }
.mis-nos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 30px 0; list-style: none; padding: 0; }
.mis-nos li { border: 1px solid var(--champagne-line); border-radius: 4px; padding: 22px 14px; text-align: center; }
.mis-nos b { display: block; font: 600 13px/1 var(--font-sans); letter-spacing: .18em; color: var(--champagne); margin-bottom: 8px; }
.mis-fine { font: 300 13px/1.5 var(--font-sans); opacity: .7; }
.section--light .mis-points li { color: var(--ink, #17231d); }

@media (max-width: 900px) {
  .mis-hero__grid, .mis-split { grid-template-columns: 1fr; }
  .mis-nos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seal--stat { width: 80px !important; height: 80px !important; }
  .seal__txt { font-size: 11.5px; }
}

/* Dòng sản phẩm */
.pkg__tag { margin: 0 0 8px; font: 600 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); }
.pkg { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
@media (max-width: 1000px) { .pkg { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 520px) { .pkg { grid-template-columns: 1fr !important; } }

/* v4: chữ to, đậm hơn theo tỉ lệ Smile Magic */
body .hero__title { font-size: clamp(40px, 4.6vw, 64px) !important; font-weight: 300 !important; line-height: 1.08 !important; }
body .hero__kicker { font-size: clamp(17px, 1.5vw, 21px) !important; }
body .hero__points li { font-size: clamp(17px, 1.35vw, 20px) !important; font-weight: 400 !important; color: #fff !important; }
body .hero__video-title { font-size: clamp(20px, 1.8vw, 26px) !important; font-weight: 300 !important; }
body .hero__caption { bottom: 132px !important; }
body .hero__name { font-size: clamp(30px, 2.8vw, 40px) !important; font-weight: 500 !important; color: var(--champagne-hover) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
body .hero__role { font-size: 16px !important; font-weight: 500 !important; color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
body .hero__bio { font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 500 !important; color: #fff !important; line-height: 1.45 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, .85); }
.hero__media::after { background: linear-gradient(180deg, rgba(4, 28, 18, .05) 30%, rgba(4, 28, 18, .55) 62%, rgba(4, 28, 18, .95) 100%) !important; }
.seal__txt { font-size: 14px !important; }
body h2.display { font-size: clamp(32px, 3.6vw, 50px) !important; font-weight: 300 !important; }
body .eyebrow { font-size: 15px !important; font-weight: 500 !important; color: var(--champagne) !important; letter-spacing: .14em; }
body .gcard h3 { font-size: 19px !important; font-weight: 600 !important; }
body .gcard p { font-size: 15px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .78) !important; }
body .cta__title { font-size: clamp(20px, 1.7vw, 25px) !important; font-weight: 500 !important; }
body .cta__sub { font-size: 14px !important; }
body .feat__title { font-size: 23px !important; font-weight: 500 !important; }
body .feat__text { font-size: 15.5px !important; font-weight: 400 !important; }
body .faq dt { font-size: 22px !important; font-weight: 500 !important; }
body .faq dd { font-size: 16.5px !important; font-weight: 400 !important; }
body .spec__col h3 { font-size: 25px !important; font-weight: 500 !important; }
body .spec__col p, body .about__p { font-size: 16.5px !important; font-weight: 400 !important; }
body .step h3 { font-size: 24px !important; font-weight: 400 !important; }
body .step p { font-size: 15.5px !important; font-weight: 400 !important; }
.rcard__quote { font-size: 16px !important; }
.mis-points li { font-size: 18px !important; }
.mis-hero__lead { font-size: 20px !important; font-weight: 400 !important; }

/* Ô Dịch Vụ Bảo Tồn Răng độc quyền: viền vàng chạy chậm */
@property --nkhg-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gcard--exclusive {
  grid-column: span 2;
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(135deg, #0e3d28, #072a1b) padding-box,
    conic-gradient(from var(--nkhg-ang), rgba(201, 176, 122, .18) 0deg, var(--champagne-hover) 40deg, rgba(201, 176, 122, .18) 90deg, rgba(201, 176, 122, .18) 360deg) border-box !important;
  animation: nkhg-border 7s linear infinite;
  box-shadow: 0 0 28px -10px rgba(201, 176, 122, .45);
}
.gcard--exclusive h3 { font-size: clamp(21px, 2vw, 26px) !important; color: var(--champagne-hover) !important; }
.gcard--exclusive p { font-size: 16.5px !important; color: #fff !important; }
.gcard--exclusive a { color: var(--champagne); font-weight: 600; }
@keyframes nkhg-border { to { --nkhg-ang: 360deg; } }
@media (max-width: 520px) { .gcard--exclusive { grid-column: auto; } }

/* Nút bật tiếng cho video tự phát */
.unmute { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--champagne); background: rgba(4, 28, 18, .78); color: #fff; font: 500 13px/1 var(--font-sans); cursor: pointer; }
.unmute:hover { background: var(--champagne); color: #041c12; }

@media (prefers-reduced-motion: reduce) { .gcard--exclusive { animation: none; } }

/* Huy hiệu Google nổi: ẩn ở màn đầu để không đè con dấu số liệu */
.gb--float { transition: opacity .3s ease, transform .3s ease; }
body:not(.is-scrolled) .gb--float { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* ===== v6: khung rộng, chữ to lấp màn hình như Smile Magic ===== */
:root { --container: min(90vw, 1640px); }
body { font-size: 17px; }
body .section { padding-block: clamp(56px, 6.5vw, 104px) !important; }
body .hero__title { font-size: clamp(46px, 6vw, 88px) !important; line-height: 1.04 !important; }
body .hero__kicker { font-size: clamp(18px, 1.6vw, 23px) !important; }
body .hero__points li { font-size: clamp(18px, 1.5vw, 22px) !important; line-height: 1.6 !important; }
body .hero__video-title { font-size: clamp(22px, 2vw, 30px) !important; }
body h2.display { font-size: clamp(36px, 4.2vw, 62px) !important; line-height: 1.1 !important; }
body .eyebrow { font-size: clamp(14px, 1.1vw, 17px) !important; }
body .feat__title { font-size: clamp(22px, 1.9vw, 27px) !important; }
body .feat__text { font-size: clamp(15px, 1.2vw, 17.5px) !important; }
body .gcard { padding: 26px 26px 30px !important; }
body .gcard h3 { font-size: clamp(19px, 1.5vw, 22px) !important; }
body .gcard p { font-size: clamp(15px, 1.15vw, 17px) !important; line-height: 1.55 !important; }
body .cta__title { font-size: clamp(20px, 1.9vw, 27px) !important; }
body .cta__sub { font-size: 15px !important; }
body .faq dt { font-size: clamp(20px, 1.8vw, 26px) !important; }
body .faq dd { font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.6 !important; }
body .spec__col h3 { font-size: clamp(22px, 2vw, 29px) !important; }
body .spec__col p, body .about__p { font-size: clamp(16px, 1.3vw, 19px) !important; }
body .step h3 { font-size: clamp(21px, 1.9vw, 27px) !important; }
body .step p { font-size: clamp(15px, 1.2vw, 17.5px) !important; }
.rcard__quote { font-size: clamp(15.5px, 1.2vw, 18px) !important; }
.mis-points li { font-size: clamp(17px, 1.4vw, 21px) !important; }
.mis-hero__lead { font-size: clamp(18px, 1.6vw, 23px) !important; }
.pkg__tag { font-size: 13px !important; }

/* Màn đầu: chỉ còn dòng 16 năm, căn giữa, to và rõ */
body .hero__caption { text-align: center !important; bottom: 168px !important; padding-inline: clamp(20px, 4vw, 56px) !important; }
body .hero__bio { font-size: clamp(22px, 2.1vw, 32px) !important; font-weight: 400 !important; line-height: 1.35 !important; max-width: 640px; margin-inline: auto !important; }
body .hero__seals { justify-content: center !important; padding-right: 0 !important; gap: clamp(14px, 2vw, 28px) !important; bottom: 32px !important; }
.seal--stat {
  width: clamp(104px, 9vw, 124px) !important; height: clamp(104px, 9vw, 124px) !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 35%, #0f4a30, #041c12 75%) !important;
  border: 2px solid var(--champagne) !important;
  box-shadow: inset 0 0 0 5px rgba(201, 176, 122, .18), 0 10px 24px -10px rgba(0, 0, 0, .7);
}
.seal__num { font: 600 clamp(24px, 2.2vw, 32px)/1 var(--font-serif, Georgia, serif); color: var(--champagne-hover); white-space: nowrap; }
.seal__lbl { font: 600 12px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }

/* Trình phát video theo màu nha khoa */
.vp video { cursor: pointer; }
.vp__sound { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 10px; background: rgba(4, 28, 18, .72); border: 1px solid rgba(201, 176, 122, .55); color: #fff; font: 500 14px/1 var(--font-sans); cursor: pointer; backdrop-filter: blur(6px); }
.vp__sound:hover { background: var(--champagne); color: #041c12; }
.vp__sound svg { width: 20px; height: 20px; }
.vp__replay { position: absolute; top: 14px; right: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(4, 28, 18, .72); border: 1px solid var(--champagne); color: var(--champagne); display: grid; place-items: center; cursor: pointer; }
.vp__replay:hover { background: var(--champagne); color: #041c12; }
.vp__replay svg { width: 20px; height: 20px; }
.vp__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 30px 16px 12px; background: linear-gradient(180deg, transparent, rgba(4, 28, 18, .82)); }
.vp__play, .vp__full { flex: none; background: none; border: 0; color: #fff; width: 30px; height: 30px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.vp__play svg, .vp__full svg { width: 22px; height: 22px; }
.vp__play:hover, .vp__full:hover { color: var(--champagne); }
.vp__time { flex: none; font: 500 13px/1 var(--font-sans); color: rgba(255, 255, 255, .88); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp__bar { flex: 1; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .25); cursor: pointer; }
.vp__bar:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }
.vp__fill { display: block; position: relative; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #a8843f, #e3c98d); }
.vp__fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #e3c98d; transform: translateY(-50%); box-shadow: 0 0 0 3px rgba(227, 201, 141, .3); }
.vp:fullscreen video { object-fit: contain; }
@media (max-width: 640px) { .vp__time { display: none; } .vp__sound span { display: none; } }

/* ===== v7 ===== */
/* Video luôn giữ đúng tỉ lệ, không bị cắt */
.media--filled > video { object-fit: contain !important; background: #000; }

/* Thanh âm lượng */
.vp__volwrap { display: flex; align-items: center; gap: 6px; flex: none; }
.vp__mute { flex: none; background: none; border: 0; color: #fff; width: 30px; height: 30px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.vp__mute svg { width: 22px; height: 22px; }
.vp__mute:hover { color: var(--champagne); }
.vp__vol { -webkit-appearance: none; appearance: none; width: 84px; height: 5px; border-radius: 5px; cursor: pointer;
  background: linear-gradient(90deg, #e3c98d var(--vol, 100%), rgba(255, 255, 255, .25) var(--vol, 100%)); }
.vp__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #e3c98d; border: 0; }
.vp__vol::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #e3c98d; border: 0; }
@media (max-width: 640px) { .vp__vol { width: 56px; } }

/* Khung đặt lịch: viền vàng đậm như Smile Magic */
body .book { border: clamp(6px, .8vw, 12px) solid var(--champagne) !important; border-radius: 2px !important; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.form__note { margin: 0; font: 400 13px/1.5 var(--font-sans); color: #5c6660; }

/* Bảng gói ở trang Bảo tồn */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.plan { background: #fff; border: 1px solid #dfe5df; border-radius: 6px; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.plan__tag { margin: 0; font: 600 12.5px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #a8843f; }
.plan__name { margin: 0; font: 500 clamp(24px, 2vw, 30px)/1.15 var(--font-serif, Georgia, serif); color: #072a1b; }
.plan__price { margin: 0; font: 400 18px/1.2 var(--font-sans); color: #5c6660; }
.plan__price s { opacity: .7; }
.plan__price b { font: 700 clamp(30px, 2.6vw, 38px)/1 var(--font-sans); color: #072a1b; margin-left: 4px; }
.plan__perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 9px; }
.plan__perks li { position: relative; padding-left: 26px; font: 400 clamp(15px, 1.15vw, 17px)/1.5 var(--font-sans); color: #17231d; }
.plan__perks li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 7px; border-left: 2px solid #a8843f; border-bottom: 2px solid #a8843f; transform: rotate(-45deg); }
.plan--hot { border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--nkhg-ang), rgba(201, 176, 122, .25) 0deg, #c9a227 40deg, rgba(201, 176, 122, .25) 90deg, rgba(201, 176, 122, .25) 360deg) border-box;
  animation: nkhg-border 7s linear infinite; box-shadow: 0 18px 40px -24px rgba(168, 132, 63, .6); }
.plans__fine { margin: 18px 0 0; font: 400 14px/1.5 var(--font-sans); color: #5c6660; }
@media (prefers-reduced-motion: reduce) { .plan--hot { animation: none; } }

/* Trang cảm ơn */
.ty { background: var(--forest, #072a1b); }
.ty__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.ty__letter { position: relative; background: #fbf7ec; color: #23331f; border-radius: 6px; padding: clamp(28px, 4vw, 52px);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); transform: rotate(-1.2deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 41px, rgba(11, 110, 35, .12) 41px 42px); }
.ty__letter p { margin: 0 0 14px; font: 500 clamp(21px, 1.9vw, 27px)/42px "Dancing Script", cursive; }
.ty__sign { margin-top: 22px !important; text-align: right; font-weight: 600 !important; color: #0b6e23; }
.ty__box { background: #fff; border: clamp(8px, .9vw, 13px) solid var(--champagne); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.ty__kicker { margin: 0; font: 300 clamp(24px, 2.4vw, 36px)/1.25 var(--font-sans); color: #a8843f; }
.ty__title { margin: 0; font: 400 clamp(30px, 3.2vw, 46px)/1.15 var(--font-sans); color: #072a1b; }
.ty__text { margin: 0; font: 400 clamp(16px, 1.25vw, 18px)/1.65 var(--font-sans); color: #3b4a40; max-width: 560px; }
.ty__call { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 16px 30px; border-radius: 6px; background: var(--champagne); color: #041c12; font: 600 clamp(18px, 1.6vw, 22px)/1 var(--font-sans); text-decoration: none; }
.ty__call:hover { background: var(--champagne-hover); }
.ty__contact { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font: 400 15.5px/1.5 var(--font-sans); color: #3b4a40; }
.ty__contact a { color: #0b6e23; font-weight: 600; }
.ty-gift__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ty-gift__img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .5); }
.ty-gift__tag { margin: 0 0 10px; font: 600 14px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #a8843f; }
.ty-gift__title { margin: 0 0 14px; font: 400 clamp(30px, 3.4vw, 50px)/1.15 var(--font-sans); color: #072a1b; }
.ty-gift__title s { color: #8a948e; }
.ty-gift__title b { color: #0b6e23; }
.ty-gift__text { margin: 0 0 24px; font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--font-sans); color: #3b4a40; }
.ty-gift__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ty__more { display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 6px; border: 1.5px solid #072a1b; color: #072a1b; font: 600 clamp(17px, 1.4vw, 20px)/1 var(--font-sans); text-decoration: none; }
.ty__more:hover { background: #072a1b; color: #fff; }
@media (max-width: 900px) { .ty__grid, .ty-gift__grid { grid-template-columns: 1fr; } .ty__letter { transform: none; } }

/* Quy trình 5 bước: ảnh nền tối để chữ dễ đọc */
body .proc .step { background-size: cover !important; background-position: center 30% !important; background-repeat: no-repeat !important; }
body .proc .step:nth-child(1) { background-image: linear-gradient(180deg, rgba(4, 28, 18, .35) 0%, rgba(4, 28, 18, .55) 40%, rgba(4, 28, 18, .96) 74%), url(/img/buoc-1.webp) !important; }
body .proc .step:nth-child(2) { background-image: linear-gradient(180deg, rgba(4, 28, 18, .35) 0%, rgba(4, 28, 18, .55) 40%, rgba(4, 28, 18, .96) 74%), url(/img/buoc-2.webp) !important; }
body .proc .step:nth-child(3) { background-image: linear-gradient(180deg, rgba(4, 28, 18, .35) 0%, rgba(4, 28, 18, .55) 40%, rgba(4, 28, 18, .96) 74%), url(/img/buoc-3.webp) !important; }
body .proc .step:nth-child(4) { background-image: linear-gradient(180deg, rgba(4, 28, 18, .35) 0%, rgba(4, 28, 18, .55) 40%, rgba(4, 28, 18, .96) 74%), url(/img/buoc-4.webp) !important; }
body .proc .step:nth-child(5) { background-image: linear-gradient(180deg, rgba(4, 28, 18, .35) 0%, rgba(4, 28, 18, .55) 40%, rgba(4, 28, 18, .96) 74%), url(/img/buoc-5.webp) !important; }
body .proc .step h3, body .proc .step p, body .proc .step__n { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
body .proc .step__n { color: var(--champagne-hover) !important; }

/* ===== v9: trang Bảo tồn dạng trang bán hàng ===== */
.mis-duo { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.mis-duo li { border-left: 3px solid var(--champagne); padding: 4px 0 4px 16px; }
.mis-duo b { display: block; font: 600 clamp(18px, 1.5vw, 22px)/1.3 var(--font-sans); color: var(--champagne-hover); }
.mis-duo span { font: 400 clamp(15px, 1.2vw, 17.5px)/1.5 var(--font-sans); color: rgba(255, 255, 255, .85); }

.chooser__head { text-align: center; margin-bottom: 36px; }
.chooser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.pick { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3vw, 44px); border-radius: 8px; text-decoration: none;
  background: linear-gradient(160deg, #0e3d28, #072a1b); color: #fff; border: 2px solid transparent; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pick:hover, .pick.is-active { transform: translateY(-4px); border-color: var(--champagne); box-shadow: 0 24px 50px -24px rgba(7, 42, 27, .8); }
.pick__tag { font: 600 13px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.pick__q { font: 400 clamp(21px, 2vw, 29px)/1.35 var(--font-sans); }
.pick__go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 13px 22px; border-radius: 6px; background: var(--champagne); color: #041c12; font: 600 16px/1 var(--font-sans); }
.pick__go::after { content: "→"; }
.pick.is-active .pick__go { background: #fff; }

.sol-head { max-width: 900px; margin-bottom: 36px; }
.pas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 40px; }
.pas__item { padding: 26px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 176, 122, .25); }
.pas__item p { margin: 10px 0 0; font: 400 clamp(16px, 1.25vw, 18.5px)/1.6 var(--font-sans); color: rgba(255, 255, 255, .88); }
.pas__item--sol { background: rgba(201, 176, 122, .12); border-color: var(--champagne); }
.pas__k { font: 600 13px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); }
.hab3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 40px; }
.hab3 div { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 18px 22px; border-radius: 8px; border: 1px solid rgba(201, 176, 122, .35); }
.hab3 b { grid-row: span 2; font: 500 54px/1 var(--font-serif, Georgia, serif); color: var(--champagne-hover); }
.hab3 span { font: 600 19px/1.2 var(--font-sans); color: #fff; }
.hab3 small { font: 400 14.5px/1.4 var(--font-sans); color: rgba(255, 255, 255, .75); }

.ladder-wrap { overflow-x: auto; }
.ladder { width: 100%; min-width: 620px; border-collapse: collapse; font: 400 clamp(15px, 1.2vw, 17.5px)/1.45 var(--font-sans); }
.ladder caption { text-align: left; padding-bottom: 14px; font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--font-sans); color: var(--champagne-hover); }
.ladder th, .ladder td { padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); text-align: center; color: rgba(255, 255, 255, .88); }
.ladder thead th { font: 600 14px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.ladder tbody th { text-align: left; color: #fff; font-weight: 500; }
.ladder .is-top { color: var(--champagne-hover); }
.ladder td:last-child { background: rgba(201, 176, 122, .1); color: #fff; font-weight: 600; }
.section--light .ladder caption { color: #a8843f; }
.section--light .ladder th, .section--light .ladder td { color: #17231d; border-bottom-color: #dfe5df; }
.section--light .ladder thead th { color: #5c6660; }
.section--light .ladder td:last-child { background: none; font-weight: 400; color: #5c6660; }
.section--light .ladder td.is-good { background: rgba(11, 110, 35, .07); color: #0b4a1d; font-weight: 500; }
.section--light .ladder thead th.is-top { color: #0b6e23; }
.ladder--cns td { text-align: left; }

.plan-group { margin-bottom: 36px; }
.plan-group__title { margin: 0 0 16px; font: 500 clamp(22px, 2vw, 28px)/1.2 var(--font-sans); color: #072a1b; }
.plan__renew { margin: -2px 0 6px; font: 500 14.5px/1.4 var(--font-sans); color: #a8843f; }
.plan__perks li.is-perk { color: #a8843f; font-weight: 500; }
.plan__price b { font-size: clamp(24px, 2.1vw, 32px) !important; }

.steps5 { margin-top: 12px; }
.steps5 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.steps5 li { counter-increment: s; padding: 22px 18px; border-radius: 8px; background: #fff; border: 1px solid #dfe5df; display: grid; gap: 8px; align-content: start; }
.steps5 li::before { content: "Bước " counter(s); font: 600 13px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #a8843f; }
.steps5 b { font: 600 17px/1.35 var(--font-sans); color: #072a1b; }
.steps5 span { font: 400 15px/1.5 var(--font-sans); color: #3b4a40; }
.switch { margin: 30px 0 0; text-align: center; }
.switch a { font: 600 16px/1.4 var(--font-sans); color: #0b6e23; }

.sol-text { margin: 0 0 18px; font: 400 clamp(16px, 1.3vw, 19px)/1.65 var(--font-sans); color: #3b4a40; }
.cns-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 40px 0; }
.cns-card { padding: 24px 22px; border-radius: 8px; background: #fff; border: 1px solid #dfe5df; }
.cns-card h3 { margin: 0 0 12px; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--font-sans); color: #072a1b; }
.cns-card .mis-points { margin: 0; }
.cns-card .mis-points li { font-size: 16px !important; color: #17231d; }
.cns-ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 400 16px/1.5 var(--font-sans); color: #17231d; }
.cns-plans { margin-top: 40px; }
.sol-cta { margin-top: 30px; display: flex; justify-content: center; }

@media (max-width: 1000px) {
  .chooser__grid, .pas, .hab3 { grid-template-columns: 1fr; }
  .cns-grid { grid-template-columns: 1fr 1fr; }
  .steps5 ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .cns-grid, .steps5 ol { grid-template-columns: 1fr; } }

/* Trang cảm ơn: báo còn quà bên dưới */
.ty { position: relative; padding-bottom: 130px !important; }
.ty__down { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--champagne-hover); text-decoration: none; font: 600 15px/1.2 var(--font-sans); text-align: center; white-space: nowrap; }
.ty__down i { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--champagne); position: relative; animation: ty-bounce 1.6s ease-in-out infinite; }
.ty__down i::after { content: ""; position: absolute; left: 50%; top: 42%; width: 12px; height: 12px; border-right: 2px solid var(--champagne-hover); border-bottom: 2px solid var(--champagne-hover); transform: translate(-50%, -50%) rotate(45deg); }
@keyframes ty-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ty__down i { animation: none; } }

/* ===== v10: nút video không che hình ===== */
.vp__sound, .vp__replay, .vp__bottom { transition: opacity .35s ease; }
/* Chưa tương tác: chỉ nút Bật tiếng + phát lại, chưa hiện thanh thời gian */
.vp:not(.is-touched) .vp__bottom { opacity: 0; pointer-events: none; }
/* Đã tương tác: bỏ nút Bật tiếng to (âm lượng nằm ở thanh dưới) */
.vp.is-touched .vp__sound { opacity: 0; pointer-events: none; }
/* Đang phát và không rê chuột: ẩn hết */
.vp.is-touched.is-idle:not(.is-paused) .vp__replay,
.vp.is-touched.is-idle:not(.is-paused) .vp__bottom { opacity: 0; pointer-events: none; }
.vp.is-touched.is-idle:not(.is-paused) video { cursor: none; }
.vp__sound { padding: 7px 12px; font-size: 13px; }
.vp__replay { width: 38px; height: 38px; }

/* v11: chừa chỗ cho mũi tên quà */
body .section.ty { padding-bottom: 150px !important; }

/* ===== v12: bảng so sánh gói có trị giá ===== */
.pt-wrap { overflow-x: auto; margin-bottom: 40px; -webkit-overflow-scrolling: touch; }
.pt { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #dfe5df; border-radius: 10px; overflow: hidden; font-family: var(--font-sans); }
.pt caption { caption-side: top; text-align: left; padding: 0 0 16px; font: 500 clamp(22px, 2vw, 28px)/1.3 var(--font-sans); color: #072a1b; }
.pt th, .pt td { padding: 16px 18px; border-bottom: 1px solid #eef1ee; vertical-align: middle; }
.pt thead th { background: #f7f5ef; vertical-align: bottom; }
.pt__corner { text-align: left; font: 600 13px/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #5c6660; width: 40%; }
.pt__plan { text-align: center; }
.pt__tag { display: block; font: 600 12px/1.3 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #a8843f; margin-bottom: 6px; }
.pt__name { display: block; font: 500 clamp(20px, 1.8vw, 26px)/1.2 var(--font-serif, Georgia, serif); color: #072a1b; }
.pt tbody th { text-align: left; font-weight: 400; }
.pt__item { display: block; font: 500 clamp(15.5px, 1.2vw, 17.5px)/1.4 var(--font-sans); color: #17231d; }
.pt__val { display: block; margin-top: 3px; font: 500 13.5px/1.3 var(--font-sans); color: #a8843f; }
.pt__yes, .pt__no { text-align: center; }
.pt__yes span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(11, 110, 35, .12); color: #0b6e23; font: 700 16px/1 var(--font-sans); }
.pt__no span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f1f1ef; color: #b5b8b3; font: 700 14px/1 var(--font-sans); }
.pt .is-hot { background: rgba(201, 162, 39, .07); }
.pt thead .is-hot { background: #072a1b; }
.pt thead .is-hot .pt__name { color: #fff; }
.pt thead .is-hot .pt__tag { color: var(--champagne-hover); }
.pt tfoot th { text-align: left; font: 600 14px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #5c6660; background: #fbfaf6; }
.pt__total { text-align: center; background: #fbfaf6; }
.pt__total s { font: 500 clamp(16px, 1.3vw, 19px)/1 var(--font-sans); color: #8a948e; text-decoration-color: #c0392b; text-decoration-thickness: 2px; }
.pt__price { text-align: center; padding-top: 20px !important; padding-bottom: 24px !important; }
.pt__price b { display: block; font: 700 clamp(30px, 2.8vw, 42px)/1 var(--font-sans); color: #072a1b; }
.pt__price small { display: block; margin-top: 4px; font: 500 14px/1.2 var(--font-sans); color: #5c6660; }
.pt__price em { display: block; margin: 8px 0 14px; font: 500 13.5px/1.3 var(--font-sans); font-style: normal; color: #a8843f; }
.pt__btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: 6px; background: #072a1b; color: #fff; font: 600 14.5px/1 var(--font-sans); text-decoration: none; }
.pt__btn:hover { background: #0b6e23; }
.pt .is-hot .pt__btn { background: var(--champagne); color: #041c12; }
.pt .is-hot .pt__btn:hover { background: var(--champagne-hover); }
.pt tbody tr:hover th, .pt tbody tr:hover td { background-color: rgba(11, 110, 35, .03); }
.plans--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
.plan .pt__btn { margin-top: auto; width: fit-content; }
@media (max-width: 760px) {
  .pt th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 190px; box-shadow: 2px 0 6px -4px rgba(0, 0, 0, .25); }
  .pt thead th:first-child, .pt tfoot th:first-child { background: #f7f5ef; }
}

/* v13: bảng giá vừa màn hình điện thoại, không phải vuốt ngang */
@media (max-width: 760px) {
  .pt { min-width: 0 !important; table-layout: fixed; }
  .pt th:first-child { position: static !important; box-shadow: none !important; min-width: 0 !important; width: 40% !important; }
  .pt th, .pt td { padding: 10px 5px !important; }
  .pt tbody th, .pt tfoot th { padding-left: 10px !important; }
  .pt caption { font-size: 19px !important; }
  .pt__corner { font-size: 10px !important; letter-spacing: .06em !important; }
  .pt__tag { font-size: 9px !important; letter-spacing: .04em !important; margin-bottom: 3px !important; }
  .pt__name { font-size: 14px !important; }
  .pt__item { font-size: 13px !important; }
  .pt__val { font-size: 11px !important; }
  .pt__yes span, .pt__no span { width: 24px !important; height: 24px !important; font-size: 13px !important; }
  .pt tfoot th { font-size: 10.5px !important; letter-spacing: .04em !important; }
  .pt__total s { font-size: 12px !important; }
  .pt__price b { font-size: 19px !important; }
  .pt__price small { font-size: 10.5px !important; }
  .pt__price em { font-size: 10px !important; margin: 4px 0 8px !important; }
  .pt__btn { padding: 8px 6px !important; font-size: 11.5px !important; }
}

/* v14: lưu ý ưu đãi + thẻ đánh giá kiểu Google */
.offer-note { margin: 14px 0 0; padding: 14px 18px; border-radius: 8px; background: #fff7e6; border: 1px solid #f0d9a6; border-left: 4px solid #c9a227; font: 400 clamp(14.5px, 1.1vw, 16px)/1.55 var(--font-sans); color: #5a4512; }
.offer-note b { color: #8a5a00; }
.rcard--real .rcard__who { position: relative; padding-right: 26px; }
.rcard__avatar--g { display: grid !important; place-items: center; width: 40px !important; height: 40px !important; border-radius: 50% !important; color: #fff !important; font: 500 18px/1 Roboto, Arial, sans-serif !important; }
.rcard__g { position: absolute; top: 2px; right: 0; width: 20px; height: 20px; }
.rcard__name b { font-family: Roboto, Arial, var(--font-sans) !important; }
.rcard__stars { color: #fbbc04 !important; }
.rcard__link { color: #1a73e8 !important; text-decoration: none; font-size: 13px !important; }
.rcard__link:hover { text-decoration: underline; }

/* v15: 10 đánh giá xếp đều 2 hàng */
@media (max-width: 1100px) { body .rev__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) { body .rev__list { grid-template-columns: 1fr !important; } }