/* === Global overflow guard (mobile) === */
html, body {
  max-width: 100%;
  overflow-x: clip;   /* modern */
}
/* fallback cho trình duyệt cũ */
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}


/* ========== Root & Reset (mobile-first) ========== */
html {
  color-scheme: light !important; /* ép trình duyệt coi như theme sáng */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #ffffff;
    --text: #1f2430;
    --card: #ffffff;
    --surface: #f6f7fb;
  }
  body {
    background: var(--bg);
    color: var(--text);
  }
}


:root{
  --bg:#ffffff;
  --text:#383e4a;
  --muted:#5d6472;
  --brand:#2c6e91;
  --brand-2:#8f6ee0;       /* hero purple */
  --brand-3:#f9c72c;       /* honey yellow */
  --surface:#f6f7fb;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
  --radius-sm:10px;
  --container:clamp(320px, 92vw, 1140px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:var(--bg); line-height:1.6;
}

/* Utility */
.container{width:var(--container); margin-inline:auto; padding-inline:clamp(12px,2vw,24px)}
.center{text-align:center}
.dim{color:var(--muted)}
.muted{color:var(--brand)}
.h1{font-size:clamp(28px, 5vw, 48px); line-height:1.1; letter-spacing:-.02em; margin:.4rem 0 1rem}
.h2{font-size:clamp(22px, 3.6vw, 32px); margin:0 0 1rem}
.overline{opacity:.9; font-weight:600}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.2rem; border-radius:999px; border:0; cursor:pointer;
  font-weight:700; transition:transform .08s ease, box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{ background:var(--brand-3); color:#382b00; box-shadow:0 6px 18px rgba(249,199,44,.35);}
.btn-ghost{ background:transparent; border:2px solid rgba(255,255,255,.7); color:#fff }
.btn-block{ width:100%; background:var(--brand); color:#fff }
.chip{display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .6rem; border-radius:999px; font-weight:700}
.chip-success{ background:#e7f8ea; color:#137a2a; }
.pill{display:inline-block; background:#eef3ff; color:#254080; padding:.2rem .6rem; border-radius:999px; font-weight:600}

/* Top bar */
.topbar{
  background:var(--brand-3);
  text-align:center; padding:.5rem 1rem; font-weight:600;
}

/* Header / Nav */
.site-header{ position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 0 0 rgba(0,0,0,0); transition: box-shadow .25s ease}
.site-header.has-shadow{ box-shadow:0 6px 24px rgba(0,0,0,.08)}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{ font-weight:900; color:var(--brand); font-size:1.35rem; letter-spacing:.2px; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem}
.brand-mark{ background:var(--brand-3); color:#533; width:28px; height:28px; display:grid; place-items:center; border-radius:50% }
.nav{ position:fixed; inset:60px 0 0 0; background:#fff; transform:translateY(-120%); transition:transform .25s ease; padding:1rem 1rem 2rem; display:flex; flex-direction:column; gap:.6rem }
.nav.open{ transform:translateY(0)}
.nav-link{ color:#2f3441; text-decoration:none; padding:.7rem 1rem; border-radius:10px }
.nav-link:active{ background:#f2f4f8}
.lang{ margin-top:.6rem; border-top:1px solid #eee; padding-top:.6rem }
.lang select{ width:100%; padding:.55rem .7rem; border-radius:10px; border:1px solid #d9dde7 }
.nav-toggle{ background:transparent; border:0; width:44px; height:44px; border-radius:8px; display:grid; place-items:center}
.hamburger,.hamburger:before,.hamburger:after{
  content:""; display:block; width:22px; height:2px; background:#232837; border-radius:2px; position:relative; transition:transform .25s ease, opacity .2s
}
.hamburger:before{ position:absolute; transform:translateY(-7px)}
.hamburger:after{ position:absolute; transform:translateY(7px)}
.nav-toggle[aria-expanded="true"] .hamburger{ background:transparent}
.nav-toggle[aria-expanded="true"] .hamburger:before{ transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger:after{ transform:rotate(-45deg)}

/* Desktop nav */
@media (min-width: 960px){
  .nav{ all:unset; display:flex; align-items:center; gap:.6rem }
  .nav-link{ padding:.5rem .75rem }
  .lang{ margin:0; border:0; padding:0 }
  .nav-toggle{ display:none }
}

/* Hero */
.hero {
  background: #fff;   /* nền trắng */
  color: var(--text);    /* chữ chuyển sang màu chữ mặc định (đen) */
  position: relative;      /* tạo containing block cho pseudo */
  overflow: hidden; 
}


.hero-grid{
  display:grid; gap:2rem; align-items:center;
  grid-template-columns: 1fr;
  padding-block: clamp(28px, 6vw, 72px);
}
.hero-copy .sub{ opacity:.92; margin:.6rem 0 1.2rem }
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap }
.hero-book{ position:relative; display:grid; place-items:center}
.hero-book img{
  width:min(85%, 420px); border-radius:18px; box-shadow:var(--shadow);
}
.badge{
  position:absolute; right:8%; bottom:-10px; background:#ff5a5a; color:#fff; font-weight:900;
  padding:.5rem .8rem; border-radius:999px; box-shadow:0 10px 18px rgba(0,0,0,.18)
}
.hero-decor::after{
  content:""; position:absolute; right:-12px; top:10%; width:180px; height:180px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0));
  filter: blur(10px); opacity:.4; pointer-events:none;
}
@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.15fr .85fr }
  .hero-book img{ width:min(100%, 520px) }
}

/* Testimonials carousel */
.testimonials{ background: #fff; padding: clamp(28px, 6vw, 64px) 0 }
.rating-head{ text-align:center }
.rating-sub{ color:#5c5d70; margin:.2rem 0 1.4rem }
.carousel{ position:relative }
.car-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
  overscroll-behavior-inline: contain;

  /* ✅ quan trọng: tắt smooth cố định, để JS bật/tắt khi cần */
  scroll-behavior: auto;

  /* ✅ dùng snap tự nhiên, không chống nhau */
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8px;
}

.car-track > .card {        /* mỗi review là 1 “snap” */
  scroll-snap-align: center;
}
.card.review{
  min-width: clamp(240px, 70vw, 320px);
  background:#fff; border-radius: var(--radius-sm); padding:1rem 1rem 1rem;
  box-shadow: var(--shadow);
}
.stars{ color:#f6b100; letter-spacing:2px; margin:.1rem 0 .4rem}
.author{ color:#61657a; font-size:.9rem }
.car-btn {
  position: absolute;
  bottom: -20px;   /* hoặc 10px nếu muốn sát hơn */
  top: auto;       /* bỏ canh giữa */
  transform: none; /* bỏ dịch translateY */
}
.car-btn.prev { left: 40%; }   /* canh giữa theo chiều ngang */
.car-btn.next { right: 40%; }
@media (max-width: 480px){
  .car-btn{ display:none }
}

/* Books grid */
.books{ padding: clamp(28px, 6vw, 64px) 0 }
.grid{ display:grid; gap: clamp(14px, 2vw, 24px) }
.books-grid{ grid-template-columns: 1fr; margin-top:1rem }
@media (min-width:680px){ .books-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (min-width:1024px){ .books-grid{ grid-template-columns: repeat(4, 1fr) } }

.book-card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; isolation:isolate;
}
.book-card .thumb{ position:relative; aspect-ratio: 4 / 3; overflow:hidden }
.book-card .thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .35s ease }
.book-card:hover .thumb img{ transform:scale(1.06) }
.avatar{
  position:absolute; left:12px; top:12px; width:64px; height:64px; border-radius:50%; padding:3px;
  background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2)
}
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit }
.card-body{ padding:1rem 1rem 1.2rem; display:grid; gap:.5rem }
.card-body h3{ margin:0; font-size:1.1rem }

/* Accent edges */
.accent-yellow{ outline: 6px solid #ffe89c3d }
.accent-purple{ outline: 6px solid #dad0ff52 }
.accent-green{ outline: 6px solid #dff8e64d }
.accent-gold{ outline: 6px solid #ffe0b84d }

/* Trust row */
.trust{ background:#fafafa; padding: clamp(28px, 6vw, 64px) 0 }
.trust-grid{ display:grid; gap:18px; grid-template-columns:1fr; text-align:center }
.trust-item{ background:#fff; border-radius:var(--radius-sm); padding:1rem; box-shadow:var(--shadow) }
.trust-ico{ font-size:26px; margin-bottom:.4rem }
@media (min-width: 820px){ .trust-grid{ grid-template-columns: repeat(3,1fr) } }

/* Accordion (FAQ) */
.faq{ background:#fff; padding: clamp(28px, 6vw, 72px) 0 }
.accordion{ max-width:900px; margin: 1rem auto 0; display:grid; gap:.6rem }
.acc{
  background:var(--surface); border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.acc > summary{
  cursor:pointer; padding:1rem 1.2rem; font-weight:700; list-style:none; position:relative;
}
.acc > summary::marker{ display:none }
.acc > summary::after{
  content:"+"; position:absolute; right:1rem; top:1.1rem; font-weight:900
}
.acc[open] > summary::after{ content:"–" }
.acc-body{ padding: 0 1.2rem 1.2rem }

/* Footer */
.site-footer{ background:var(--brand-3); color:#2b2600; }
.footer-grid{ display:grid; gap:18px; grid-template-columns:1fr; padding: clamp(22px, 4vw, 40px) 0 }
.foot-links{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:.25rem }
.foot-links a{ color:#2b2600; text-decoration:none }
.foot-copy{ text-align:center; padding:.8rem; background:#f6d767 }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .car-track{ scroll-behavior:auto }
  .btn{ transition:none }
}
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

.lang {
  position: relative;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .75rem;
  border: 1px solid #d9dde7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.lang-btn .flag {
  font-size: 1.2rem;
}

.lang-menu {
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid #d9dde7;
  border-radius: 10px;
  box-shadow: var(--shadow);
  list-style: none;
  padding: .4rem 0;
  margin: 0;
  display: none;
  min-width: 140px;
  z-index: 20;
}

.lang-menu li {
  padding: .45rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
}

.lang-menu li:hover {
  background: #f6f7fb;
}

.lang.open .lang-menu {
  display: block;
}

.trustpilot-badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .6rem 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin: 1rem auto;
}
.trustpilot-logo {
  width: 90px; /* dùng logo Trustpilot chữ + sao thì to hơn */
  height: auto;
}

.trustpilot-text {
  display: flex;
  flex-direction: column;
  font-size: .95rem;
}

.trustpilot-text .stars {
  color: #00b67a; /* màu xanh Trustpilot */
  letter-spacing: 2px;
  font-size: 1.1rem;
  margin: .1rem 0;
}

.trustpilot-text .score {
  color: var(--muted);
  font-size: .85rem;
}

.trustpilot-text strong {
  color: #00b67a; /* màu xanh thương hiệu Trustpilot */
  font-size: 1.05rem;
}

/* ===== Trustpilot-style strip ===== */
.tp-head{
  display:flex; align-items:center; justify-content:center;
  gap:18px; flex-wrap:wrap; color:#fff; margin-bottom:16px;
}
.tp-left{ opacity:.95; font-size:1.05rem }
.tp-excellent{ font-size:1.45rem }
.tp-score{ font-size:1.05rem; opacity:.95 }
.tp-brand{ display:inline-flex; align-items:center; gap:8px; font-weight:700 }
.tp-icon{ width:18px; height:18px }

/* 5 sao nền xanh dạng ô */
.tp-stars{
  display:inline-flex; gap:6px; padding:0; margin:0; list-style:none;
}
.tp-stars li{
  width:28px; height:28px; border-radius:4px; background:#00B67A;
  display:grid; place-items:center; color:#fff; font-weight:900; line-height:1;
  box-shadow:0 1px 0 rgba(0,0,0,.06) inset;
}

/* biến thể nhỏ cho trong card */
.tp-small{ gap:6px; margin:6px 0 10px }
.tp-small li{ width:24px; height:24px; font-size:.9rem }

/* dòng phụ dưới strip */
.tp-sub{
  color:#e9e7ff; text-align:center; margin:4px 0 22px; font-size:1rem;
}

/* tinh chỉnh card để hợp layout mẫu */
.card.review{ border-radius:12px } /* bạn đã có shadow rồi */
.card.review p{ color:#2f3441 }     /* chữ đậm hơn một chút cho dễ đọc */

/* sao dạng ảnh (strip) */
.tp-stars-img{ height:28px; vertical-align:middle; }
.tp-stars-img.small{ height:24px; }

/* Tiêu đề lớn trên cùng */
.tp-title{
  color:#fff;
  font-size:2rem;
  font-weight:800;
  text-align:center;
  margin:0 0 8px;
}

/* Strip đã có .tp-head – giữ nguyên */
.tp-head{ margin-bottom:10px; }

/* Footer trust dưới review */
.tp-foot{ text-align:center; margin-top:18px; }
.tp-sub{ color:#e9e7ff; margin:0 0 6px; font-size:1rem; }
.tp-foot-brand{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff; font-weight:700;
}

/* Đảo chiều mũi tên prev/next (trước bị ngược) */
.car-btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: solid #222;
  border-width: 0 2px 2px 0;
  margin: auto;
  transform: rotate(135deg); /* prev */
}
.car-btn.next::before {
  transform: rotate(-45deg); /* next */
}

/* Small, cute review title */
.rev-title,
.card.review h3.rev-title{
  font-weight: 800;
  font-size: 1rem;          /* nhỏ gọn */
  line-height: 1.2;
  margin: .5rem 0 .35rem;
  color: #1f2430;
  display: -webkit-box;     /* clamp 1 dòng + … */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* body giữ bình thường, chỉ thêm chút khoảng cách */
.card.review .rev-body{ margin: 0 0 .6rem; }


/* ---- FEATURE BOOK CARDS (90% giống mẫu) ---- */
.feature-grid{
  display:grid; gap: clamp(18px,2vw,28px);
  grid-template-columns: 1fr;
  margin-top: 18px;
}
@media (min-width: 960px){
  .feature-grid{ grid-template-columns: 1fr 1fr }
}

.feature-card{
  display:grid; grid-template-columns: 1.05fr 1fr; align-items:center;
  gap: clamp(18px,2.5vw,32px);
  padding: clamp(16px,3vw,28px);
  border-radius: 28px;
  color:#1f2430; box-shadow: var(--shadow);
  position:relative; overflow:hidden;
}

/* themes (nền to) */
.theme-yellow{ background:#F1C54B; }
.theme-plum  { background:#6F5B8F; color:#fff; }
.theme-olive { background:#A7C163; }
.theme-gold  { background:#F3C346; }

/* cột ảnh */
.f-thumb{ position:relative; border-radius:22px; overflow:hidden; background:#fff; }
.f-thumb img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 4 / 3; }
.f-avatar{
  position:absolute; left:12px; top:12px; width:72px; height:72px;
  border-radius:50%; padding:3px; background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.f-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:inherit }

/* cột nội dung */
.f-body h3{
  margin:0 0 .6rem;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height:1.15; font-weight:900;
  color: inherit;
}
.age-badge{
  display:inline-block; margin-bottom:.6rem;
  background:#fff3d6; color:#2b2410; font-weight:800;
  padding:.45rem .75rem; border-radius:12px; box-shadow:0 2px 0 #00000010;
}
.theme-plum .age-badge{ background:#E9E1FF; color:#2b2350 }

.kicker{ margin:.25rem 0 .3rem }
.desc{ margin:0 0 .9rem }

.btn-white{
  background:#fff; color:#111; border-radius:999px; padding:.9rem 1.2rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12); text-decoration:none; display:inline-flex;
}
.theme-plum .btn-white{ color:#1b1733 }

.quote{ font-style:italic; opacity:.85; margin:.7rem 0 0 }

/* bo góc “bánh bèo” giống mẫu */
.feature-card::after{
  content:""; position:absolute; inset:auto -40px -40px auto;
  width:160px; height:120px; border-radius: 38px;
  background: rgba(255,255,255,.12); filter: blur(4px);
  transform: rotate(8deg);
}

/* === Full-bleed image + swap === */
.feature-card{ align-items: stretch; }                 /* kéo 2 cột cao bằng nhau */
.f-thumb{
  position: relative;
  height: 100%;                /* ảnh tràn theo chiều cao card */
  border-radius: 24px;
  overflow: hidden;
  background: none;            /* bỏ nền trắng cũ */
}
.f-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;           /* luôn fill khung */
  aspect-ratio: 1 / 1;         /* vuông như mẫu; bỏ nếu bạn muốn 4:3 */
}

/* ảnh phụ (nếu có) sẽ nằm lên trên và mờ đi, hover thì hiện */
.f-thumb .img-alt{
  position:absolute; inset:0;
  opacity:0; transition:opacity .35s ease;
}
.feature-card:hover .f-thumb .img-alt{ opacity:1; }

/* click trên mobile cũng đổi ảnh */
@media (hover:none){
  .f-thumb:active .img-alt{ opacity:1; }
}

/* avatar to, viền trắng rõ hơn */
.f-avatar{ left:16px; top:16px; width:84px; height:84px; padding:4px; }


/* === FEATURE CARD: full-bleed giống mẫu === */

/* Card to, cân khung, cao tối thiểu như mock */
.feature-card{
  grid-template-columns: 1.2fr 1fr;         /* ảnh bên trái lớn hơn */
  min-height: clamp(420px, 46vw, 540px);    /* block to như mẫu */
  padding: clamp(18px, 2.6vw, 32px);
  border-radius: 32px;
}

/* Ảnh bám full chiều cao khối trái, tỉ lệ 4:3 giống mock */
.f-thumb{
  height: 100%;
  border-radius: 26px;
}
.f-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;        /* thay cho 1/1 hiện tại */
  object-position: center;    /* crop đẹp */
}

/* Avatar nổi bật hơn, giống ảnh mẫu */
.f-avatar{
  left: 18px; top: 18px;
  width: 92px; height: 92px; padding: 4px;
  outline: 3px solid #fff;    /* viền trắng rõ */
  box-shadow: 0 12px 22px rgba(0,0,0,.22);
}

/* Typography & badge khớp hơn */
.f-body h3{ font-size: clamp(26px, 2.8vw, 38px); }
.age-badge{ font-weight: 900; padding: .5rem .8rem; border-radius: 14px; }

/* Mobile: xếp 1 cột, ảnh nằm trên, giữ tỉ lệ 4:3 */
@media (max-width: 959.98px){
  .feature-card{ grid-template-columns: 1fr; }
  .f-thumb{ height: auto; }         /* để ảnh lấy theo tỉ lệ */
  .f-thumb img{ height: auto; }     /* 4:3 theo bề rộng */
}


/* ====== BOOK CARDS: fixed desktop size (660×458), image 300×300 ====== */
@media (min-width: 1280px){
  /* container riêng cho section này để đủ chỗ cho 2 block 660 + 24px gap */
  .books .container{
    width: clamp(320px, 96vw, 1368px); /* 660*2 + 24 gap = 1344; trừ hao  */
    padding-inline: 24px;
  }

  /* grid 2 cột, mỗi cột đúng 660px, gap 24px, căn giữa */
  .feature-grid{
    grid-template-columns: repeat(2, 660px);
    grid-auto-rows: 458px;
    justify-content: center;
    gap: 24px;
  }

  /* card đúng 660×458, chia 2 cột: ảnh 300 + nội dung co giãn */
  .feature-card{
    width: 660px;
    height: 458px;
    min-height: 458px;
    padding: 24px;
    border-radius: 28px;
    grid-template-columns: 300px 1fr;
    align-items: center;
  }

  /* ảnh vuông 300×300 bo góc, fill khung */
  .feature-card .f-thumb{
    width: 300px; height: 300px;
    border-radius: 20px; overflow: hidden;
  }
  .feature-card .f-thumb img{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    aspect-ratio: auto; /* bỏ ép tỉ lệ khác trước đó */
  }

  /* avatar vừa mắt trong khung 300×300 */
  .feature-card .f-avatar{
    left: 14px; top: 14px;
    width: 84px; height: 84px; padding: 4px;
    outline: 3px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,.2);
  }

  /* chữ & badge gọn để fit chiều cao 458 */
  .feature-card .f-body h3{ font-size: 30px; line-height: 1.15; margin: 0 0 10px; }
  .feature-card .age-badge{ padding: .45rem .75rem; border-radius: 12px; margin-bottom: .55rem; }
  .feature-card .desc{ margin: 0 0 .8rem; }
}


/* Đẩy quote xuống đáy, chữ gọn gàng */
.feature-card .f-body{ display:grid; gap:10px; align-content:start; }
.feature-card .quote{ margin-top:auto; font-style:italic; opacity:.85 }

/* Badge theo tông của từng block như mock */
.theme-olive .age-badge{ background:#eaf6d9; color:#233415 }
.theme-gold  .age-badge{ background:#fff0c9; color:#3a2a05 }

/* H3 hơi to với card vàng bên phải */
.theme-gold .f-body h3{ font-size: 30px; line-height:1.15 }


/* Hàng chon file + button selfie đã có trong trang, giữ lại: */
.file-row{
  display:flex; align-items:center; gap:12px; margin-top:8px;
}
.file-row input[type="file"]{
  flex:1 1 360px; max-width:420px;
}

/* Input camera giấu an toàn (để click được trên iOS/Android) */
.sr-only-file{
  position:absolute !important;
  left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;
}

/* Nút viền cùng vibe */
.btn-outline{
  background:#fff; border:2px solid var(--brand,#2c6e91); color:var(--brand,#2c6e91);
  padding:.55rem .9rem; border-radius:12px; font-weight:700;
}
.btn-outline:hover{ background:#f0f7fb; }

/* Tinh chỉnh pill ở preview (nhích lên chút cho thẳng) */
.preview-wrap .pill-row{ margin-top:-6px; }


.file-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.file-group{display:flex; align-items:center; gap:10px; flex:1}
.file-btn{white-space:nowrap}
.file-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted)}
.sr-only-file{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}

/* Modal camera */
.camera-modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:999}
.camera-modal.hidden{display:none}
.cam-sheet{background:#000; border-radius:16px; padding:12px; width:min(92vw,520px); box-shadow:var(--shadow)}
#camVideo{width:100%; border-radius:12px; background:#000}
.cam-actions{display:flex; justify-content:space-between; gap:12px; margin-top:10px}

/* Khung cố định tỉ lệ 4:3 */
.prev-frame{
  position: relative;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  overflow: hidden;
}
.prev-frame::before{       /* padding hack giữ 4:3 = 75% */
  content:"";
  display:block;
  padding-top: 75%;
}


/* Khung cố định 4:3, bo góc + shadow giữ nguyên */
/* Khung cố định 4:3, bo góc + shadow */
.prev-box{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;        /* khung luôn cố định tỉ lệ */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  background: #f6f7fb;        /* nền nhạt để thấy ảnh nhỏ ở giữa */
}


.prev-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* khác với cover: không cắt ảnh */
  object-position: center;    
  display: block;
}

/* Fallback nếu trình duyệt cực cũ chưa hỗ trợ aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .prev-box{ height: 0; padding-top: 75%; }
}


/* Nút zoom nổi ở góc khung */
.zoom-btn{
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 0;
  border-radius: 10px;
  padding: .5rem .7rem;
  font-weight: 800;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* Modal zoom */
.zoom-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:1000 }
.zoom-modal.hidden{ display:none }
.zoom-sheet{
  background:#000; border-radius:16px; padding:12px; width:min(94vw, 1000px); box-shadow:var(--shadow);
  display:grid; gap:12px; justify-items:center;
}
#zoomImg{
  max-width: 90vw; max-height: 80vh; display:block; border-radius:12px;
}

/* Ưu tiên cao hơn do selector cụ thể + !important */
/* .prev-box {
  position: relative;       
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  background: #f6f7fb;
}
.prev-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: center;
} */

/* .prev-box {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  background: #f6f7fb;
  display: inline-block;   
  aspect-ratio: auto;      
}

.prev-img {
  width: 100%;
  height: auto;         
  object-fit: cover;       
} */

.prev-box{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  background: #f6f7fb;
  display: inline-block;  /* khung co lại theo nội dung */
}

.prev-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* lấp đầy khung */
  object-position: center;
}



/* Nút Edit đặt cạnh nút Zoom (góc phải dưới) */
.edit-btn{ right: 58px; } /* đẩy sang trái một chút để không đè lên 🔍 */

/* Crop sheet dùng nền đen như zoom sheet nhưng to hơn chút */
.crop-sheet{
  background:#000; border-radius:16px; padding:12px; width:min(96vw, 1100px);
  box-shadow:var(--shadow); display:grid; gap:12px; justify-items:center;
}
#cropImg{ max-width: 92vw; max-height: 72vh; display:block; border-radius:12px }

/* Toolbar 3 cụm nút: tỉ lệ | zoom/rotate | cancel/apply */
.crop-toolbar{
  display:flex; flex-wrap:wrap; gap:10px; width:100%; justify-content:space-between; align-items:center;
}
.crop-toolbar .left, .crop-toolbar .mid, .crop-toolbar .right{ display:flex; gap:10px; align-items:center }

.zoom-btn,
.edit-btn {
  position: absolute;
  bottom: 10px;
  border: 0;
  border-radius: 10px;
  padding: .5rem .7rem;
  font-weight: 800;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}

/* Zoom nằm góc phải */
.zoom-btn { right: 10px; }

/* Edit nằm cạnh Zoom, lệch sang trái */
.edit-btn { right: 58px; }

/* Optional: danh sách trong modal hướng dẫn */
.guide-list { margin:.25rem 0 .6rem; padding-left:1.2rem; }
.guide-list li { margin:.2rem 0; }

.book-card, .feature-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.book-card:hover, .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.btn-primary {
  background: linear-gradient(135deg, #f9c72c, #ffae00);
  color: #2b2600;
}

/* === Guide modal: light theme riêng === */
#guideModal .zoom-sheet{
  background: #fff;            /* nền trắng */
  color: #1f2430;              /* chữ sậm dễ đọc */
  border-radius: 16px;
}

#guideModal h3{ color:#1f2430; }
#guideModal .guide-list li{ color:#2b2f3a; }           /* tăng tương phản */
#guideModal .guide-list li strong{ color:#111; }
#guideModal .guide-list li.good { color:#0f7a2a; }     /* nếu cần đánh dấu */
#guideModal .guide-list li.bad  { color:#b00020; }

/* Ẩn toàn bộ style liên quan chips & custom */
.chips, .custom-slot, .custom-field, #customChip, #typeCustom { display:none !important; }

/* Tinh gọn form khi chỉ còn 2 trường */
.creator .cardx form .field { margin: .9rem 0; }
.file-row { margin-top: .25rem; }

/* Progress panel */
.progress-wrap { 
  text-align:center; padding: 40px 16px; 
}
.progress-wrap.hidden { display:none; }
.progress-title { 
  font-size: clamp(22px, 3.2vw, 36px); 
  color: #0f3354; font-weight: 800; margin: 0 0 8px; 
}
.progress-sub { 
  color:#2a4a6a; font-weight:700; opacity:.9; margin:.25rem 0; 
}

/* Circular ring */
.progress-ring { display:grid; place-items:center; gap:12px; margin: 18px 0 10px; }
.ring { width: 140px; height: 140px; }
.ring-bg { fill:none; stroke:#e7efe9; stroke-width:12; }
.ring-fg { fill:none; stroke:#31a24c; stroke-width:12; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .3s ease; }
.ring-text { font: 700 22px/1.1 system-ui, sans-serif; fill:#2a2a2a; }

/* Note below ring */
.progress-note { color:#334; margin-top:6px; }

/* Quote card */
.quote-card { 
  width:min(640px, 92%); margin: 22px auto 0; 
  background: linear-gradient(180deg, #0a2b52, #0d3a6a); 
  color:#fff; border-radius:16px; padding:22px 20px; 
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.quote-card p { font-weight:700; font-style:italic; margin:0 0 12px; }
.quote-card footer { font-weight:800; text-align:center; }

.wait-form {
  margin-top: 1rem;
  text-align: center;
  background: var(--surface);
  padding: 1rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: opacity .3s ease;
}

.wait-form.hidden {
  display: none;
}

.input.invalid { border-color: #e74c3c; box-shadow: 0 0 0 2px #e74c3c22; }
.file-group.invalid .file-btn { border-color:#e74c3c; color:#e74c3c; }
.status { min-height:1.4em; color: var(--muted); }


/* ===== Flipbook – nền dễ thương cho trẻ em ===== */


/* khối chứa flipbook như “tấm bìa” bo góc + bóng */
#flipContainer{
  max-width: 1100px;
  height: min(72vh, 820px);
  margin: 8px auto 0;
  padding: clamp(10px, 1.4vw, 16px);
  background: #ffffffd9;
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(64,48,120,.22);
}

/* nút Back tròn trịa hơn, hợp trẻ em */
#flipClose.btn{
  background: #fff;
  color: #222;
  border: 2px solid #ffffffaa;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
#flipClose.btn:hover{ transform: translateY(-1px); }

/* page-flip: bỏ nền xám, trong suốt để thấy background */
.flip-book,
.flip-book .page,
.flip-book .page .page-content{
  background: transparent !important;
  box-shadow: none !important;
}

/* ảnh trang sách bo nhẹ + đổ bóng xinh xắn */
.flip-book .page .page-content img{
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* sao nhỏ lấp lánh rất nhẹ (pseudo element) */
.storybook-bg::after{
  content:"";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
     radial-gradient(#fff 1.2px, transparent 1.2px),
     radial-gradient(#fff 1px, transparent 1px);
  background-size: 120px 120px, 80px 80px;
  background-position: 20px 40px, 40px 10px;
  opacity:.25;
  animation: twinkle 6s linear infinite;
}
@keyframes twinkle{
  0%{opacity:.22; transform:translateY(0)}
  50%{opacity:.35; transform:translateY(-2px)}
  100%{opacity:.22; transform:translateY(0)}
}

/* —— Tùy chọn nhanh 3 theme, chỉ cần thêm lớp vào #flipWrap —— */
.storybook-bg.sunny{
  --sky-grad: radial-gradient(1200px 700px at 80% -10%, #ffffff9c, transparent 60%),
              linear-gradient(180deg, #fff6d8, #ffd86a 60%, #ffeaa3);
}
.storybook-bg.mint{
  --sky-grad: radial-gradient(1100px 650px at 75% -10%, #ffffffa0, transparent 60%),
              linear-gradient(180deg, #eafffb, #b9f2de 60%, #d7fff2);
}
.storybook-bg.plum{
  --sky-grad: radial-gradient(1100px 650px at 75% -10%, #ffffff80, transparent 60%),
              linear-gradient(180deg, #eae1ff, #bfa8ff 60%, #d8ccff);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.form-box {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.flip-preview {
  width: 100%;
  height: 70vh;
  margin: 0 auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  border-radius: 8px;
}

#flipbookContainer {
  width: 100%;
  height: 75vh;
  margin: 0 auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  border-radius: 12px;
  background: #fff;
}

.hidden { display: none !important; }
/* ===== Flipbook viewer layout ===== */
#flipWrap { 
  padding: clamp(8px, 2vw, 20px) 0;
  /* giữ background đẹp nếu bạn thích */
}

#flipWrap .container { width: min(100vw, 1100px); }

#flipContainer {
  height: min(92dvh, 820px);   /* to hết cỡ màn */
}

/* Mobile: cao hơn và buộc lib fit container */
@media (max-width: 600px){
  #flipContainer { height: 88dvh; }  /* hầu như full màn */
  .flip-book, .stf__wrapper, .stf__book {
    width: 100% !important;
    height: 100% !important;
  }
  .page .page-content img{
    width: 100%; height: 100%; object-fit: contain;
  }
}


/* ======== SPREAD VIEWER (hurrahelden-like) ======== */
.spread-bg{
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(255,255,255,.25), transparent 60%),
    var(--brand-2);
  padding: clamp(16px, 3vw, 28px) 0 28px;
  color:#fff;
}

.spread-wrap{
  position:relative;
  margin-inline:auto;
  width:min(100vw, 760px);
  padding-inline: clamp(8px, 3vw, 16px);
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:8px;
}

.sv-stage{
  position:relative;
  margin:0;
  background:#fff;
  border-radius:22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.sv-stage img{
  display:block;
  width:100%;
  height:auto;            /* giữ tỉ lệ */
  /* muốn cao tối đa 78vh để không vượt màn hình mobile */
  max-height:78vh;
  object-fit:contain;
  background:#fff;
}

.sv-caption{
  position:absolute; left:10px; bottom:10px;
  background: rgba(0,0,0,.45);
  color:#fff; font-weight:800; font-size:.9rem;
  padding:.25rem .5rem; border-radius:10px;
}

.sv-nav{
  width:44px; height:44px; border:0; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); cursor:pointer;
}
.sv-nav::before{
  content:""; display:block; width:10px; height:10px; margin:auto;
  border: solid #222; border-width:0 3px 3px 0; transform: rotate(135deg);
}
.sv-next::before{ transform: rotate(-45deg); }

/* chấm điều hướng */
.sv-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.sv-dots button{
  width:8px; height:8px; border-radius:50%; border:0; opacity:.35; background:#fff; cursor:pointer;
}
.sv-dots button[aria-current="true"]{ opacity:1 }

/* mobile tối đa chiều rộng */
@media (max-width: 480px){
  .spread-wrap{ width:100vw; padding-inline:10px; }
  .sv-nav{ display:none; }         /* để vuốt là chính; muốn hiện thì bỏ dòng này */
}

/* desktop: to hơn chút */
@media (min-width: 960px){
  .spread-wrap{ width:min(92vw, 980px); }
  .sv-stage img{ max-height:82vh; }
}







/* ======== SPREAD VIEWER (hurrahelden-like) ======== */
.spread-bg{
  background:
    radial-gradient(1200px 600px at 80% -20%, rgba(255,255,255,.25), transparent 60%),
    var(--brand-2);
  padding: clamp(16px, 3vw, 28px) 0 28px;
  color:#fff;
}

.spread-wrap{
  position:relative;
  margin-inline:auto;
  width:min(100vw, 760px);
  padding-inline: clamp(8px, 3vw, 16px);
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:8px;
}

.sv-stage{
  position:relative;
  margin:0;
  background:#fff;
  border-radius:22px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.sv-stage img{
  display:block;
  width:100%;
  height:auto;            /* giữ tỉ lệ */
  /* muốn cao tối đa 78vh để không vượt màn hình mobile */
  max-height:78vh;
  object-fit:contain;
  background:#fff;
}

.sv-caption{
  position:absolute; left:10px; bottom:10px;
  background: rgba(0,0,0,.45);
  color:#fff; font-weight:800; font-size:.9rem;
  padding:.25rem .5rem; border-radius:10px;
}

.sv-nav{
  width:44px; height:44px; border:0; border-radius:50%;
  background:#fff; box-shadow:var(--shadow); cursor:pointer;
}
.sv-nav::before{
  content:""; display:block; width:10px; height:10px; margin:auto;
  border: solid #222; border-width:0 3px 3px 0; transform: rotate(135deg);
}
.sv-next::before{ transform: rotate(-45deg); }

/* chấm điều hướng */
.sv-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.sv-dots button{
  width:8px; height:8px; border-radius:50%; border:0; opacity:.35; background:#fff; cursor:pointer;
}
.sv-dots button[aria-current="true"]{ opacity:1 }

/* mobile tối đa chiều rộng */
@media (max-width: 480px){
  .spread-wrap{ width:100vw; padding-inline:10px; }
  .sv-nav{ display:none; }         /* để vuốt là chính; muốn hiện thì bỏ dòng này */
}

/* desktop: to hơn chút */
@media (min-width: 960px){
  .spread-wrap{ width:min(92vw, 980px); }
  .sv-stage img{ max-height:82vh; }
}


/* ===== Book strip (mobile-first) ===== */
.hidden{ display:none !important; }

#bookStripSec{ padding: clamp(16px,4vw,28px) 0; }
.strip-head{ display:grid; grid-template-columns: 44px 1fr 44px; align-items:center; gap:8px; }
.strip-nav{
  width:44px; height:44px; border-radius:50%; border:0; background:#fff;
  box-shadow: var(--shadow); font-size:26px; line-height:1; cursor:pointer;
}
.strip-rail{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type: x mandatory;
  padding: 6px; border-radius: 14px; background: #fff; box-shadow: var(--shadow);
}
.page-card{
  flex: 0 0 88vw;                /* to trên mobile */
  max-width: 880px;              /* desktop co lại */
  aspect-ratio: 4 / 3;
  border-radius: 18px; overflow: hidden;
  background:#fff; scroll-snap-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.page-card img{ width:100%; height:100%; object-fit: cover; display:block; }
.strip-hint{ text-align:center; color: var(--muted); margin:.6rem 0 0; }

@media (min-width: 960px){
  .page-card{ flex-basis: 640px; } /* desktop to hơn */
}


.gallery {
  position: relative;
  display: flex;
  align-items: center;
}
.gallery-track {
  display: flex;
  overflow-x: auto;
  /* ĐỔI: đừng smooth cố định, để JS bật khi bấm nút */
  scroll-behavior: auto;
  gap: 12px;
  padding: 10px 0;
  /* Thêm 2 dòng dưới để tránh bounce & mượt trên iOS */
  touch-action: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}


.gallery-img {
  height: 300px;
  border-radius: 14px;
  flex-shrink: 0;
}
.gallery-prev, .gallery-next {
  border: none;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
}


/* ===== Book viewer (desktop flip / mobile strip) ===== */
.viewer { background:#fff; padding: clamp(12px,3vw,24px) 0; }
.hidden { display:none !important; }

/* Flip (desktop) */
#flipWrap { display:grid; place-items:center; }
#flipContainer { width:min(1200px, 96vw); height: min(80vh, 820px); }

/* Strip (mobile) */
#stripWrap { max-width: var(--container); margin-inline:auto; }
.strip-head { overflow:hidden; }
.strip-rail {
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding: 6px 8px 10px; scroll-behavior:smooth;
}
.page-card { flex: 0 0 100%; scroll-snap-align:center; }
.page-card img {
  width:100%; height:auto; display:block; object-fit:contain; border-radius:12px;
  box-shadow: var(--shadow);
}

/* 3 nút điều hướng dưới */
.pdf-nav{
  display:flex; gap:12px; justify-content:center; align-items:center;
  padding:10px 0 2px;
}
.nav-icon{
  width:42px; height:42px; border-radius:50%; border:0; background:#fff;
  box-shadow: var(--shadow); font-size:18px; font-weight:900; cursor:pointer;
}

/* Chọn chế độ theo kích thước/thiết bị */
@media (min-width: 960px){
  #stripWrap{ display:none !important; }
}
@media (max-width: 959.98px){
  #flipWrap{ display:none !important; }
}


/* Mặc định ẩn trên desktop (>=960px) */
@media (min-width: 960px) {
  .strip-head .strip-nav,
  .gallery-prev,
  .gallery-next {
    display: none !important;
  }
}

/* Mobile (<960px) thì hiện bình thường */
@media (max-width: 959px) {
  .strip-head .strip-nav,
  .gallery-prev,
  .gallery-next {
    display: inline-flex; /* hoặc block tuỳ layout */
  }
}


/* ——— Move 2 nút gallery xuống dưới, căn giữa ——— */
.gallery {
  position: relative;
  display: block;          /* tách khỏi layout ngang mặc định */
  padding-bottom: 36px;    /* chừa chỗ cho 2 nút bên dưới */
}

.gallery-prev,
.gallery-next {
  position: absolute;
  bottom: 0;               /* nằm dưới khung ảnh */
  left: 50%;               /* lấy giữa làm mốc */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;           /* fix icon bị lệch */
  align-items: center;
  justify-content: center;
  line-height: 1;          /* tránh nhảy chữ */
  box-shadow: var(--shadow);
  background: #fff;
}

/* đặt prev lệch trái tâm một chút, next lệch phải */
.gallery-prev  { transform: translateX(-56px); }
.gallery-next  { transform: translateX(12px);  }

/* Ẩn 2 nút này trên desktop (>=960px) */
@media (min-width: 960px){
  .gallery-prev, .gallery-next { display: none !important; }
}

/* Mobile: chuyển layout .strip-head thành 2 hàng: rail ở trên, 2 nút ở dưới */
@media (max-width: 959px){
  .strip-head{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px;
  }
  .strip-head .strip-rail { grid-column: 1 / -1; grid-row: 1; }
  #stripPrev { grid-column: 1; grid-row: 2; justify-self: end; }
  #stripNext { grid-column: 2; grid-row: 2; justify-self: start; }
}


/* Căn icon mũi tên đúng tâm nút */
.gallery-prev,
.gallery-next {
  display: flex !important;          /* dùng flex để căn giữa */
  align-items: center !important;
  justify-content: center !important;
}

/* Vẽ lại mũi tên bằng border, giữ đúng tâm */
.gallery-prev::before,
.gallery-next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: solid #222;
  border-width: 0 2px 2px 0;
}

/* Trái */
.gallery-prev::before {
  transform: rotate(135deg);
}

/* Phải */
.gallery-next::before {
  transform: rotate(-45deg);
}


/* Căn icon đúng giữa vòng tròn gallery */
.gallery-prev,
.gallery-next {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;      /* tạo khung để ::before căn */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow);
}

.gallery-prev::before,
.gallery-next::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: solid #222;
  border-width: 0 2px 2px 0;
}

/* Trái */
.gallery-prev::before {
  transform: rotate(135deg);
}

/* Phải */
.gallery-next::before {
  transform: rotate(-45deg);
}


#previewImg {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* hoặc contain nếu muốn không crop */
  border-radius: 0;    /* bo góc đã do .prev-box lo rồi */
  box-shadow: none;    /* optional, giữ hay bỏ tuỳ */
}


#flipContainer {
  max-height: 450px;    /* Giới hạn tối đa */
  margin: 0 auto;
}

/* === Swipe gallery cho .feature-card === */
.f-thumb.swipe {
  overflow: hidden;               /* ẩn tràn, không hiện rail */
}

.f-thumb.swipe .f-strip{
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  touch-action: auto;             /* QUAN TRỌNG: cho vuốt ngang mượt */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;            /* để JS bật smooth đúng lúc thả tay */
  overscroll-behavior-inline: contain;
  scroll-snap-stop: always;
}


@media (pointer: fine){
  .f-thumb.swipe .f-strip{ cursor: grab; }
  .f-thumb.swipe .f-strip:active{ cursor: grabbing; }
}

/* Ẩn thanh cuộn */
.f-thumb.swipe .f-strip::-webkit-scrollbar { display: none; }

/* Mỗi ảnh là một slide full-width */
.f-thumb.swipe .f-strip > img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;           /* hoặc giữ tỉ lệ bạn đang dùng cho card */
  scroll-snap-align: center;
  user-select: none;
  -webkit-user-drag: none;
    pointer-events: none; 
}


.car-track, .gallery-track { touch-action: auto; -webkit-overflow-scrolling: touch; }
/* .car-track, .gallery-track, .f-thumb.swipe .f-strip { will-change: scroll-position; } */

.car-track.dragging,
.gallery-track.dragging,
.f-thumb.swipe .f-strip.dragging {
  scroll-snap-type: none !important;
}



/* ===== Gallery badge ===== */
.gallery { padding-top: 6px; }
.gallery-head{
  width: var(--container);
  margin: 0 auto 10px;
  padding: 0 clamp(12px,2vw,24px);
}
.media-pill{
  display:inline-flex; align-items:center; gap:10px;
  background: #8f6ee0;      /* xanh site */
  color:#fff; font-weight:900; letter-spacing:.2px;
  padding:.6rem 1rem; border-radius:9999px;
  box-shadow:0 8px 22px rgba(44,110,145,.28);
}
.media-pill .ico{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.6);
  line-height:1; font-size:16px;
}
@media (max-width: 480px){
  .media-pill{ padding:.5rem .8rem; font-size:.95rem }
  .media-pill .ico{ width:24px; height:24px; font-size:14px }
}


/* ===== Gallery badge (mobile center, desktop đẹp) ===== */
.gallery { padding-top: 6px; }
.gallery-head{
  width: var(--container);
  margin: 0 auto 10px;
  padding: 0 clamp(12px,2vw,24px);

  /* mobile: canh giữa */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* desktop: căn trái để thẳng hàng với track/thumbnail -> UX gọn mắt */
@media (min-width: 960px){
  .gallery-head{ justify-content: flex-start; }
}

/* pill giữ style hiện có, nhẹ nhàng hơn */
.media-pill{
  display:inline-flex; align-items:center; gap:10px;
background: #8f6ee0;          /* xanh thương hiệu */
  color:#fff; font-weight:900; letter-spacing:.2px;
  padding:.6rem 1rem; border-radius:9999px;
  box-shadow:0 8px 22px rgba(44,110,145,.22);
}
.media-pill .ico{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.6);
  line-height:1; font-size:16px;
}
@media (max-width: 480px){
  .media-pill{ padding:.5rem .85rem; font-size:.95rem }
  .media-pill .ico{ width:24px; height:24px; font-size:14px }
}

/* ===== Book blurb (below media carousel) ===== */
.book-note{
  padding: clamp(16px, 4vw, 28px) 0 clamp(28px, 6vw, 44px);
}
.book-note .container{ width: var(--container); } /* dùng hệ thống container sẵn có */
.book-note .cardx{
  max-width: 860px;             /* độ rộng đọc thoải mái */
  margin: 0 auto;               /* căn giữa block */
  text-align: left;             /* nội dung canh trái */
}
.book-note .cardx p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
  opacity: .9;
  margin: .5rem 0;
}
@media (min-width: 960px){
  .book-note .cardx{ padding: clamp(18px, 2vw, 28px); }
}


/* ===== Specs strip (match desktop/mobile like sample) ===== */
.specs-block { margin-top: 8px; }

.sp-line {
  border: 0;
  border-top: 1px solid #e8ecf4;
  margin: 14px 0;
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr;      /* mobile: 1 cột */
  gap: 16px 28px;
  padding: 4px 0;
  text-align: left;                /* mobile: canh trái */
}

.sp-item {
  font-size: clamp(16px, 2.6vw, 20px);
  color: #3a4252;
  font-weight: 800;                /* đậm như mẫu */
}
.sp-item span { font-weight: 700; } /* value đậm vừa phải */

.sp-price {
  text-align: center;
  color: #2b3345;
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 800;
  letter-spacing: .2px;
}
.sp-price .label { opacity: .8; margin-right: 6px; }
.sp-price .from  { color: var(--muted); margin: 0 6px 0 2px; }
.sp-price .amount { font-weight: 900; }

/* Desktop: 2 cột, mọi thứ nhìn “ở giữa” như hình 1 */
@media (min-width: 960px){
  .sp-grid {
    grid-template-columns: 1fr 1fr;  /* 2 cột */
    text-align: center;               /* căn giữa từng item */
  }
  .sp-item { justify-self: center; }  /* nằm giữa cột */
  .sp-price { text-align: center; }
}




/* css cuoi
/* === HERO: tím + chữ trắng === */
.hero{
  /* tím nhẹ → tím đậm, bạn có thể đổi mã màu nếu muốn */
  background: linear-gradient(180deg, #a488eb 80%, #6646cf 100%);
  color: #fff; /* mặc định chữ bên trong là trắng */
}

/* Đảm bảo các text chính trong hero đều trắng */
.hero .overline,
.hero .h1,
.hero .sub{
  color: #fff;
}

/* Nếu .sub hơi mờ quá thì tăng độ tương phản 1 chút */
/* .hero .sub{ opacity: .95; } */

/* Badge “Only 2 MINS…” giữ nguyên, nhưng nếu muốn rõ hơn trên nền tím: */
.hero .badge{
  background: #ff4d4f;
  color: #fff;
}

/* (tuỳ chọn) làm nhẹ phần decor nếu nó làm chữ khó đọc */
.hero-decor{ opacity: .15; }


/* review css
/* === Testimonials on purple === */
.testimonials{
  background: #6646cf;                  /* tím theo yêu cầu */
  color: #fff;                           /* mặc định text trắng */
  padding-block: clamp(36px, 6vw, 72px); /* thoáng hơn chút */
}

/* tiêu đề + dải sao/điểm */
.testimonials .tp-title{ color:#fff; }
.testimonials .tp-head{ color:#ffffffcc; } /* 80% opacity cho chữ nhỏ */
.testimonials .tp-head .tp-score,
.testimonials .tp-foot .tp-sub{ color:#ffffffcc; }

/* logo Trustpilot ở tiêu đề/foot – giữ màu brand gốc, chỉ làm chữ bên cạnh nhạt */
.testimonials .tp-brand{ color:#ffffffcc; }
.testimonials .tp-brand .tp-icon path{ fill:#00B67A; }

/* track & card vẫn trắng để nổi trên nền tím */
.testimonials .car-track{ gap: 18px; }
.testimonials .card.review{
  background:#fff;
  color:#111;                 /* text đen trong card */
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  border-radius: 16px;
}

/* chấm trang trí giữa track (nếu có) chuyển sang trắng nhạt */
.testimonials .car-track::after,
.testimonials .car-track::before{ background:#ffffff40; }

/* thanh “rail” dưới cùng nếu bạn có (đang là pseudo-rail) */
.testimonials .carousel::after{
  background: linear-gradient(90deg, #ffffff00, #ffffff60, #ffffff00);
}




.legal p,.legal li{line-height:1.7}
.legal .overline{opacity:.75}
.legal a{text-decoration:underline}