/* =========================================================
   ftruyện — stylesheet dùng chung cho toàn bộ website
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root{
  --bg:#FFFBFA;
  --bg-alt:#FCF1F5;
  --surface:#FFFFFF;
  --border:#F3DCE3;
  --text:#3B2A35;
  --text-2:#8C7480;
  --text-3:#C3AEBA;

  --pink:#EA7B96;
  --pink-dark:#D6597B;
  --purple:#B6A0E8;
  --purple-dark:#9578D9;
  --grad: linear-gradient(135deg,#F6A8C2 0%,#C6A6EE 100%);

  --free-bg:#E3F7EC;
  --free-text:#1F7A4D;
  --free-ic:#2FAE6C;

  --vip-bg:#FCEBC0;
  --vip-text:#8A5A06;
  --vip-ic:#E3A008;

  --ongoing-bg:#EEE6FC;
  --ongoing-text:#7B5FC4;

  --done-bg:#FCE6EC;
  --done-text:#C4436B;

  --danger:#E4586B;
  --shadow: 0 0.625rem 1.875rem -0.875rem rgba(197,80,120,.35);

  --r-lg:1.375rem;
  --r-md:1rem;
  --r-sm:0.75rem;
  --r-pill:62.4375rem;

  --container: 80rem;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:0.9375rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.disp{ font-family:'Baloo 2', system-ui, sans-serif; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:var(--pink-dark); text-decoration:none; }
a:hover{ color:var(--pink); }
button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; }
img{ max-width:100%; display:block; }

/* ---------- layout ---------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 2.5rem; }
.container-narrow{ max-width:61.25rem; margin:0 auto; padding:0 2.5rem; }
.container-tight{ max-width:40rem; margin:0 auto; padding:0 2.5rem; }

.icon{
  width:1.25rem; height:1.25rem; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:block;
}
.icon-sm{ width:0.9375rem; height:0.9375rem; }
.icon-xs{ width:0.75rem; height:0.75rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  border-radius:var(--r-pill); font-weight:700; font-size:0.90625rem;
  padding:0.875rem 1.625rem; white-space:nowrap; transition:transform .12s, box-shadow .12s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ color:#fff; }
.btn-ghost{ background:#fff; color:var(--text); border:1.5px solid var(--border); }
.btn-ghost:hover{ color:var(--text); border-color:var(--pink); }
.btn-dark{ background:var(--text); color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:0.625rem 1.125rem; font-size:0.8125rem; }

.icon-btn{
  width:2.625rem; height:2.625rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text-2); background:var(--bg-alt); flex-shrink:0; position:relative;
}
.icon-btn.on{ background:var(--grad); color:#fff; }
.badge-count{
  position:absolute; top:-2px; right:-2px; background:var(--pink-dark); color:#fff;
  font-size:0.625rem; font-weight:700; width:1.0625rem; height:1.0625rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- pills / badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:0.3125rem; padding:0.3125rem 0.75rem;
  border-radius:var(--r-pill); font-size:0.78125rem; font-weight:700; white-space:nowrap;
}
.pill-free{ background:var(--free-bg); color:var(--free-text); }
.pill-vip{ background:var(--vip-bg); color:var(--vip-text); }
.pill-ongoing{ background:var(--ongoing-bg); color:var(--ongoing-text); }
.pill-done{ background:var(--done-bg); color:var(--done-text); }
.pill-brand{ background:var(--bg-alt); color:var(--pink-dark); }

/* ---------- card ---------- */
.card{ background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--border); overflow:hidden; }

/* ---------- chip filter ---------- */
.chip{
  padding:0.625rem 1.25rem; border-radius:var(--r-pill); font-weight:600; font-size:0.84375rem;
  border:1.5px solid var(--border); background:#fff; color:var(--text-2); flex-shrink:0;
}
.chip.active{ background:var(--grad); color:#fff; border-color:transparent; font-weight:700; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:200; background:rgba(255,251,250,.92);
  backdrop-filter:blur(0.625rem); border-bottom:1px solid var(--border);
  transition:box-shadow .2s;
}
.site-header.scrolled{ box-shadow:0 0.375rem 1.25rem -0.875rem rgba(59,42,53,.25); }
.site-header .container{ display:flex; align-items:center; gap:2.25rem; padding-top:1rem; padding-bottom:1rem; }

.brand{ display:flex; align-items:center; gap:0.5625rem; flex-shrink:0; }
.brand-mark{
  width:2.375rem; height:2.375rem; border-radius:0.75rem; background:var(--grad);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-family:'Baloo 2'; font-weight:800; font-size:1.25rem;
}
.brand-name{ font-family:'Baloo 2'; font-weight:700; font-size:1.375rem; color:var(--text); }

.nav-links{ display:flex; gap:1.75rem; flex-grow:1; }
.nav-links a{ font-weight:500; color:var(--text-2); }
.nav-links a.active{ font-weight:700; color:var(--pink-dark); }

.header-actions{ display:flex; align-items:center; gap:0.625rem; }
.user-chip{
  display:flex; align-items:center; gap:0.5625rem; padding:0.375rem 0.875rem 0.375rem 0.375rem;
  border-radius:var(--r-pill); background:var(--bg-alt); font-weight:600; font-size:0.875rem;
}
.user-avatar{
  width:1.875rem; height:1.875rem; border-radius:50%; background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.nav-toggle{
  display:none; width:2.625rem; height:2.625rem; border-radius:50%; background:var(--bg-alt);
  align-items:center; justify-content:center; color:var(--text);
}

/* mobile nav drawer */
.nav-drawer-overlay{ display:none; position:fixed; inset:0; background:rgba(43,30,40,.5); z-index:300; }
.nav-drawer{
  display:none; position:fixed; top:0; right:0; bottom:0; width:78%; max-width:20rem;
  background:#fff; z-index:301; padding:1.25rem; box-shadow:-0.625rem 0 1.875rem rgba(0,0,0,.15);
  overflow-y:auto;
}
.nav-drawer.open, .nav-drawer-overlay.open{ display:block; }
.nav-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.375rem; }
.nav-drawer .btn-primary{ width:100%; margin-bottom:1.25rem; }
.nav-drawer-links a{
  display:flex; align-items:center; gap:0.75rem; padding:0.875rem 0.25rem; font-weight:600;
  font-size:0.90625rem; color:var(--text); border-bottom:1px solid var(--border);
}
.nav-drawer-links a:last-child{ border-bottom:none; }
.nav-drawer-links a svg{ color:var(--pink-dark); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:#2B1E28; color:#EADCE3; padding:3.5rem 0 1.5rem; }
.site-footer .brand-name{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.footer-col h4{ color:#fff; font-weight:700; font-size:0.875rem; margin-bottom:0.875rem; }
.footer-col a{ display:block; color:#C9AFBC; font-size:0.84375rem; margin-bottom:0.625rem; }
.footer-col a:hover{ color:#fff; }
.footer-desc{ margin-top:0.875rem; font-size:0.84375rem; color:#C9AFBC; line-height:1.7; max-width:17.5rem; }
.newsletter{ display:flex; gap:0.5rem; }
.newsletter input{
  flex-grow:1; background:rgba(255,255,255,.08); border:none; border-radius:0.75rem;
  padding:0.6875rem 0.875rem; font-size:0.8125rem; color:#fff;
}
.newsletter input::placeholder{ color:#C9AFBC; }
.newsletter button{ background:var(--grad); color:#fff; border-radius:0.75rem; padding:0 1rem; font-weight:700; font-size:0.8125rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:2.25rem; padding-top:1.25rem;
  display:flex; justify-content:space-between; font-size:0.78125rem; color:#A88C99;
}
.footer-simple{ background:#2B1E28; color:#A88C99; padding:2rem 0; font-size:0.78125rem; }
.footer-simple .container{ display:flex; justify-content:space-between; }

/* =========================================================
   HERO (trang chủ)
   ========================================================= */
.hero{ padding:4rem 0 4.75rem; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
.hero h1{ font-size:3.25rem; line-height:1.12; font-weight:800; color:var(--text); letter-spacing:-0.03125rem; }
.hero h1 .accent{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ margin-top:1.25rem; font-size:1.0625rem; color:var(--text-2); line-height:1.6; max-width:28.75rem; }
.hero-search{
  margin-top:2rem; display:flex; align-items:center; gap:0.5rem; background:#fff;
  border:1.5px solid var(--border); border-radius:var(--r-pill); padding:0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow:var(--shadow); max-width:28.75rem;
}
.hero-search input{ border:none; outline:none; flex-grow:1; font-size:0.90625rem; background:transparent; }
.hero-stats{ display:flex; gap:2.25rem; margin-top:2.5rem; }
.hero-stats .num{ font-size:1.625rem; font-weight:800; }
.hero-stats .label{ font-size:0.8125rem; color:var(--text-2); margin-top:2px; }

.hero-media{ position:relative; }
.hero-media-inner{ border-radius:2rem; overflow:hidden; position:relative; box-shadow:var(--shadow); }
.hero-media-inner img{ width:100%; height:27.5rem; object-fit:cover; filter:saturate(.85); }
.hero-media-overlay{ position:absolute; inset:0; background:linear-gradient(160deg,rgba(246,168,194,.55),rgba(150,110,210,.55)); }
.hero-media-shade{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(43,30,40,.45),transparent 50%); }
.hero-quote{ position:absolute; left:1.75rem; right:1.75rem; bottom:1.75rem; color:#fff; font-family:'Baloo 2'; font-size:1.375rem; font-weight:700; line-height:1.3; }
.hero-float-card{
  position:absolute; left:-1.75rem; bottom:-1.75rem; padding:1rem 1.25rem; display:flex; align-items:center; gap:0.75rem;
  box-shadow:var(--shadow); width:14.375rem;
}
.hero-float-card img{ width:2.875rem; height:4rem; object-fit:cover; border-radius:0.5rem; }

/* section heading row */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.375rem; }
.section-head h2{ font-size:1.5rem; font-weight:700; }
.section-link{ font-weight:600; font-size:0.875rem; display:flex; align-items:center; gap:0.25rem; }

/* genre chip row */
.chip-row{ display:flex; gap:0.75rem; flex-wrap:wrap; }

/* story grid */
.story-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.story-card .cover{ position:relative; }
.story-card .cover img{ width:100%; height:13.75rem; object-fit:cover; }
.story-card .cover::after{
  content:''; position:absolute; inset:0; background:linear-gradient(200deg,rgba(246,168,194,.28),rgba(150,110,210,.28));
}
.story-card .status-pill{ position:absolute; top:0.625rem; left:0.625rem; z-index:1; }
.story-card .body{ padding:1rem; }
.story-card .title{ font-weight:700; font-size:0.9375rem; line-height:1.3; }
.story-card .meta{ font-size:0.78125rem; color:var(--text-2); margin-top:0.25rem; }
.story-card .rating{ display:flex; align-items:center; gap:0.25rem; margin-top:0.5rem; color:var(--vip-ic); font-size:0.75rem; }
.story-card .rating span{ color:var(--text-2); }
.story-card .chapters{ display:flex; gap:0.375rem; margin-top:0.625rem; flex-wrap:wrap; }

.hot-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.hot-card{ display:flex; gap:0; }
.hot-card img{ width:6.875rem; height:auto; object-fit:cover; flex-shrink:0; }
.hot-card .body{ padding:1rem; }
.hot-card .title{ font-weight:700; font-size:0.90625rem; line-height:1.3; }

/* banners */
.banner-free{
  border-radius:1.75rem; background:linear-gradient(120deg,#EAFBF1,#F2FCE9); border:1px solid #D8F2E2;
  padding:2.25rem 2.5rem; display:flex; align-items:center; gap:2.5rem;
}
.banner-icon{ flex-shrink:0; width:4rem; height:4rem; border-radius:1.25rem; background:var(--free-ic); display:flex; align-items:center; justify-content:center; }
.banner-free h3{ font-size:1.3125rem; font-weight:700; color:var(--free-text); }
.banner-free p{ color:var(--text-2); margin-top:0.25rem; font-size:0.90625rem; }

.banner-guide{
  border-radius:1.75rem; background:var(--grad); padding:2.75rem 3rem; display:grid;
  grid-template-columns:1.1fr 1fr; gap:2rem; align-items:center; color:#fff; position:relative; overflow:hidden;
}
.banner-guide::before{ content:''; position:absolute; width:17.5rem; height:17.5rem; border-radius:50%; background:rgba(255,255,255,.12); top:-7.5rem; right:-3.75rem; }
.banner-guide h3{ font-size:1.625rem; font-weight:800; }
.banner-guide p{ margin-top:0.625rem; font-size:0.90625rem; opacity:.95; line-height:1.6; }
.guide-steps{ display:flex; flex-direction:column; gap:0.75rem; }
.guide-step{ background:rgba(255,255,255,.16); border-radius:1rem; padding:0.875rem 1.125rem; display:flex; align-items:center; gap:0.75rem; }
.guide-step .num{
  width:1.875rem; height:1.875rem; border-radius:50%; background:#fff; color:var(--pink-dark);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8125rem; flex-shrink:0;
}

/* =========================================================
   PAGE HEADER (tiêu đề trang)
   ========================================================= */
.page-head{ padding:2.25rem 0 0; }
.page-head h1{ font-size:2rem; font-weight:800; }
.page-head p{ color:var(--text-2); margin-top:0.375rem; font-size:0.90625rem; }
.breadcrumb{ padding:1.25rem 0 0; font-size:0.8125rem; color:var(--text-2); display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap; }
.breadcrumb .current{ color:var(--text); font-weight:600; }

/* =========================================================
   TABS
   ========================================================= */
.tabs{ display:flex; gap:2rem; border-bottom:1.5px solid var(--border); }
.tab{ padding:0.875rem 0.375rem; font-weight:700; font-size:0.9375rem; color:var(--text-2); border-bottom:0.1875rem solid transparent; }
.tab.active{ color:var(--pink-dark); border-bottom-color:var(--pink-dark); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* =========================================================
   STORY DETAIL
   ========================================================= */
.detail-head{ padding:1.5rem 0 2.5rem; display:grid; grid-template-columns:16.25rem 1fr; gap:2.25rem; }
.detail-cover{ position:relative; }
.detail-cover img{ width:100%; height:22.5rem; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); }
.detail-cover .status-pill{ position:absolute; top:0.75rem; left:0.75rem; }
.detail-info h1{ font-size:2rem; font-weight:800; }
.detail-info .author{ margin-top:0.5rem; color:var(--text-2); font-size:0.90625rem; }
.detail-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.875rem; }
.detail-stats{ display:flex; gap:1.75rem; margin-top:1.25rem; flex-wrap:wrap; }
.detail-stats .stat{ display:flex; align-items:center; gap:0.375rem; color:var(--text-2); }
.detail-stats .stat.rating{ color:var(--vip-ic); }
.detail-stats .stat.rating b{ color:var(--text); font-size:0.90625rem; }
.detail-desc{ margin-top:1.25rem; color:var(--text-2); font-size:0.90625rem; line-height:1.7; max-width:40rem; }
.detail-actions{ display:flex; gap:0.75rem; margin-top:1.625rem; flex-wrap:wrap; align-items:center; }
.icon-round{ width:3rem; height:3rem; border-radius:50%; border:1.5px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--pink-dark); flex-shrink:0; }
.report-link{ display:inline-flex; align-items:center; gap:0.375rem; margin-top:1.125rem; font-size:0.8125rem; color:var(--text-3); font-weight:600; }

.intro-grid{ padding:1.75rem 0 1.25rem; display:grid; grid-template-columns:2fr 1fr; gap:2.25rem; }
.intro-grid h3{ font-size:1.125rem; font-weight:700; }
.intro-grid p{ margin-top:0.75rem; color:var(--text-2); font-size:0.90625rem; line-height:1.8; }
.info-box{ padding:1.25rem; }
.info-box .row{ display:flex; justify-content:space-between; font-size:0.84375rem; padding:0.375rem 0; }
.info-box .row span:first-child{ color:var(--text-2); }
.info-box .row span:last-child{ font-weight:600; }

.unlock-banner{
  border-radius:var(--r-lg); background:linear-gradient(120deg,#FCEBC0,#FCE0F0); padding:1.25rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1.375rem; gap:1rem; flex-wrap:wrap;
}
.unlock-banner .left{ display:flex; align-items:center; gap:0.875rem; }
.unlock-banner .icon-badge{ width:2.75rem; height:2.75rem; border-radius:0.875rem; background:var(--vip-ic); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.chapter-list .chapter-row{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 1.375rem; border-bottom:1px solid var(--border);
}
.chapter-list .chapter-row:last-child{ border-bottom:none; }
.chapter-list .chapter-row.paid{ background:#FFFBF2; }
.chapter-row .left{ display:flex; align-items:center; gap:0.875rem; }
.chapter-row .dot{ width:1.875rem; height:1.875rem; border-radius:0.5625rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chapter-row .dot.free{ background:var(--free-bg); color:var(--free-text); }
.chapter-row .dot.paid{ background:var(--vip-bg); color:var(--vip-text); }
.chapter-row .num{ font-weight:600; font-size:0.875rem; }
.chapter-row .date{ font-size:0.75rem; color:var(--text-3); margin-top:2px; }

.related-section{ background:var(--bg-alt); padding:3.25rem 0; margin-top:1.25rem; }
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.375rem; }
.related-grid .card img{ width:100%; height:10.625rem; object-fit:cover; }
.related-grid .card .body{ padding:0.875rem; }
.related-grid .card .title{ font-weight:700; font-size:0.84375rem; }
.related-grid .card .meta{ font-size:0.75rem; color:var(--text-2); margin-top:0.1875rem; }

/* =========================================================
   SEARCH / DANH SÁCH
   ========================================================= */
.list-layout{ padding:2rem 0 4rem; display:grid; grid-template-columns:16.25rem 1fr; gap:2.25rem; align-items:start; }
.filter-box{ padding:1.375rem; position:sticky; top:6rem; }
.filter-box h4{ font-weight:700; font-size:0.9375rem; margin-bottom:0.875rem; }
.filter-box .divider{ height:1px; background:var(--border); margin:1.125rem 0; }
.opt{ display:flex; align-items:center; gap:0.625rem; font-size:0.84375rem; color:var(--text-2); font-weight:500; cursor:pointer; padding:0.3125rem 0; }
.opt input{ width:1.0625rem; height:1.0625rem; accent-color:var(--pink-dark); }

.search-bar{
  margin-top:1.25rem; display:flex; align-items:center; gap:0.5rem; background:#fff; border:1.5px solid var(--border);
  border-radius:var(--r-pill); padding:0.5rem 0.5rem 0.5rem 1.375rem; box-shadow:var(--shadow); max-width:40rem;
}
.search-bar input{ border:none; outline:none; flex-grow:1; font-size:0.9375rem; background:transparent; font-weight:600; }

.results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.375rem; }
.suggest-box{
  margin-top:2rem; padding:1.375rem 1.625rem; display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-alt); border:1px dashed var(--border); flex-wrap:wrap; gap:0.875rem;
}

.pagination{ display:flex; justify-content:center; gap:0.5rem; margin-top:2.75rem; }
.pagination button, .pagination span.dots{
  width:2.375rem; height:2.375rem; border-radius:50%; background:#fff; border:1.5px solid var(--border);
  color:var(--text-2); font-weight:700; font-size:0.84375rem; display:flex; align-items:center; justify-content:center;
}
.pagination button.active{ background:var(--grad); color:#fff; border-color:transparent; }
.pagination span.dots{ border:none; background:none; color:var(--text-3); }

/* =========================================================
   FORMS
   ========================================================= */
.field{
  width:100%; border:1.5px solid var(--border); border-radius:var(--r-sm); padding:0.8125rem 1rem;
  font-family:inherit; font-size:0.875rem; color:var(--text); outline:none; background:#fff;
}
.field:focus{ border-color:var(--pink); }
.field-label{ font-size:0.8125rem; font-weight:700; color:var(--text); margin-bottom:0.4375rem; display:block; }
.field-icon-wrap{ position:relative; }
.field-icon-wrap svg{ position:absolute; left:0.875rem; top:0.875rem; color:var(--text-3); width:1.125rem; height:1.125rem; }
.field-icon-wrap input{ padding-left:2.625rem; }
.field-icon-wrap .toggle-pw{ position:absolute; right:0.875rem; top:0.875rem; color:var(--text-3); width:1.125rem; height:1.125rem; cursor:pointer; }

.checkbox-row{ display:flex; align-items:flex-start; gap:0.5rem; font-size:0.78125rem; color:var(--text-2); line-height:1.5; }
.checkbox-row input{ width:1rem; height:1rem; margin-top:2px; accent-color:var(--pink-dark); flex-shrink:0; }

/* =========================================================
   LOGIN / REGISTER
   ========================================================= */
.auth-wrap{ min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; }
.auth-brand{
  background:var(--grad); position:relative; overflow:hidden; padding:3.5rem;
  display:flex; flex-direction:column; justify-content:space-between; color:#fff; min-height:40rem;
}
.auth-brand::before{ content:''; position:absolute; width:21.25rem; height:21.25rem; border-radius:50%; background:rgba(255,255,255,.12); top:-8.75rem; left:-6.25rem; }
.auth-brand::after{ content:''; position:absolute; width:13.75rem; height:13.75rem; border-radius:50%; background:rgba(255,255,255,.1); bottom:-5rem; right:-3.75rem; }
.auth-brand > *{ position:relative; }
.auth-brand h1{ font-size:2.125rem; font-weight:800; line-height:1.2; }
.auth-brand p{ margin-top:0.875rem; font-size:0.90625rem; opacity:.95; max-width:23.75rem; line-height:1.7; }
.auth-feature{ display:flex; align-items:center; gap:0.75rem; background:rgba(255,255,255,.16); border-radius:1rem; padding:0.875rem 1.125rem; }
.auth-features{ margin-top:2rem; display:flex; flex-direction:column; gap:0.875rem; }

.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:3.5rem; }
.auth-form{ width:100%; max-width:23.75rem; }
.auth-tabs{ display:flex; background:var(--bg-alt); border-radius:var(--r-pill); padding:0.3125rem; margin-bottom:2rem; }
.auth-tabs button{ flex:1; padding:0.8125rem; border-radius:var(--r-pill); font-weight:700; font-size:0.90625rem; color:var(--text-2); text-align:center; }
.auth-tabs button.active{ background:#fff; color:var(--pink-dark); box-shadow:0 0.25rem 0.875rem -0.375rem rgba(197,80,120,.3); }

.social-btn{
  display:flex; align-items:center; justify-content:center; gap:0.625rem; border:1.5px solid var(--border);
  border-radius:var(--r-pill); padding:0.8125rem; font-weight:600; font-size:0.875rem; color:var(--text); background:#fff; width:100%;
}
.social-list{ display:flex; flex-direction:column; gap:0.625rem; }
.or-divider{ display:flex; align-items:center; gap:0.875rem; margin:1.5rem 0; }
.or-divider .line{ flex-grow:1; height:1px; background:var(--border); }
.or-divider span{ font-size:0.78125rem; color:var(--text-3); font-weight:600; }
.form-field{ margin-bottom:1rem; }
.form-row-between{ display:flex; align-items:center; justify-content:space-between; margin-top:0.875rem; }
.auth-switch{ text-align:center; font-size:0.8125rem; color:var(--text-2); margin-top:1.25rem; }
.auth-switch button{ color:var(--pink-dark); font-weight:700; }

/* =========================================================
   HƯỚNG DẪN MỞ KHÓA
   ========================================================= */
.guide-hero{ padding:3rem 0 0.5rem; text-align:center; }
.guide-badge{ display:inline-block; padding:0.375rem 1rem; border-radius:var(--r-pill); background:var(--bg-alt); color:var(--pink-dark); font-weight:700; font-size:0.8125rem; }
.guide-hero h1{ font-size:2.125rem; font-weight:800; margin-top:0.875rem; }
.guide-hero p{ color:var(--text-2); margin-top:0.625rem; font-size:0.9375rem; max-width:35rem; margin-left:auto; margin-right:auto; }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; padding:2.75rem 0; }
.step-card{ padding:1.5rem 1.25rem; }
.step-num{ width:2.625rem; height:2.625rem; border-radius:0.8125rem; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Baloo 2'; font-size:1.125rem; }
.step-card .icon{ margin-top:0.875rem; color:var(--pink-dark); }
.step-card .step-title{ font-weight:700; font-size:0.90625rem; margin-top:0.625rem; }
.step-card .step-desc{ font-size:0.8125rem; color:var(--text-2); margin-top:0.375rem; line-height:1.6; }

.bank-card{ padding:2rem; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; margin-bottom:2.75rem; }
.bank-rows{ display:flex; flex-direction:column; gap:0.75rem; }
.bank-row{ display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background:var(--bg-alt); border-radius:0.75rem; font-size:0.8125rem; }
.bank-row.highlight{ background:var(--vip-bg); color:var(--vip-text); }
.bank-row span:last-child{ font-weight:700; font-size:0.84375rem; }
.bank-row.highlight span:last-child{ font-weight:800; color:var(--vip-text); }

.qr-box{ text-align:center; }
.qr-grid{
  width:9.375rem; height:9.375rem; border-radius:1rem; border:1.5px solid var(--border);
  display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr); gap:2px; padding:0.625rem; background:#fff;
}
.qr-grid div{ background:transparent; }
.qr-grid .on{ background:#3B2A35; border-radius:2px; }
.qr-caption{ font-size:0.71875rem; color:var(--text-3); margin-top:0.5rem; }

.note-box{ border-radius:var(--r-lg); background:#FFF6E9; border:1px solid #F5E1BB; padding:1.375rem 1.625rem; display:flex; gap:1rem; margin-bottom:2.75rem; }
.note-box .icon{ color:var(--vip-ic); flex-shrink:0; margin-top:2px; }
.note-box h4{ font-weight:700; font-size:0.90625rem; color:var(--vip-text); }
.note-box ul{ margin:0.5rem 0 0; padding-left:1.125rem; list-style:disc; font-size:0.84375rem; color:var(--text-2); line-height:1.9; }

.faq-list{ display:flex; flex-direction:column; gap:0.75rem; padding-bottom:4rem; }
.faq-item .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; text-align:left; }
.faq-item .faq-q svg{ color:var(--text-3); flex-shrink:0; transition:transform .15s; }
.faq-item.open .faq-q svg{ transform:rotate(180deg); }
.faq-item .faq-a{ display:none; padding:0 1.5rem 1.25rem; font-size:0.84375rem; color:var(--text-2); line-height:1.8; }
.faq-item.open .faq-a{ display:block; }

/* =========================================================
   LIÊN HỆ
   ========================================================= */
.contact-layout{ padding:2rem 0 4.5rem; display:grid; grid-template-columns:1fr 21.25rem; gap:2rem; align-items:start; }
.contact-form{ padding:2rem; }
.form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; }
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; }
.select-wrap svg{ position:absolute; right:0.875rem; top:0.8125rem; color:var(--text-3); pointer-events:none; }
.contact-info-card{ padding:1.375rem; }
.contact-info-row{ display:flex; align-items:center; gap:0.75rem; margin-bottom:0.875rem; }
.contact-info-row:last-child{ margin-bottom:0; }
.contact-info-icon{ width:2.375rem; height:2.375rem; border-radius:0.6875rem; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--pink-dark); flex-shrink:0; }
.contact-info-row .k{ font-size:0.75rem; color:var(--text-2); }
.contact-info-row .v{ font-weight:600; font-size:0.84375rem; }
.response-card{ padding:1.375rem; background:var(--bg-alt); border:none; }
.response-card .head{ display:flex; align-items:center; gap:0.5rem; color:var(--pink-dark); font-weight:700; font-size:0.84375rem; }

/* =========================================================
   GIỎ HÀNG
   ========================================================= */
.cart-layout{ padding:1.75rem 0 4.5rem; display:grid; grid-template-columns:1fr 21.25rem; gap:2rem; align-items:start; }
.cart-items{ display:flex; flex-direction:column; gap:1rem; }
.cart-item{ padding:1.125rem; display:flex; gap:1rem; align-items:center; }
.cart-item img{ width:3.75rem; height:5.25rem; object-fit:cover; border-radius:0.625rem; flex-shrink:0; }
.cart-item .info{ flex-grow:1; }
.cart-item .title{ font-weight:700; font-size:0.9375rem; }
.cart-item .desc{ display:flex; align-items:center; gap:0.375rem; margin-top:0.375rem; color:var(--vip-text); font-size:0.8125rem; }
.cart-item .price-col{ text-align:right; flex-shrink:0; }
.cart-item .price{ font-weight:800; font-size:1rem; color:var(--pink-dark); }
.cart-item .original{ font-size:0.75rem; color:var(--text-3); text-decoration:line-through; }
.cart-item .remove-btn{
  width:2.25rem; height:2.25rem; border-radius:50%; background:#FCEEF1; color:var(--danger);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cart-empty{ padding:3.75rem 1.25rem; text-align:center; }
.cart-empty svg{ width:2.75rem; height:2.75rem; color:var(--text-3); margin:0 auto; }
.cart-empty .title{ font-weight:700; font-size:1rem; margin-top:1rem; }
.cart-empty p{ color:var(--text-2); font-size:0.84375rem; margin-top:0.375rem; }

.summary-card{ padding:1.5rem; position:sticky; top:6rem; }
.summary-card h4{ font-weight:700; font-size:0.9375rem; margin-bottom:1rem; }
.coupon-row{ display:flex; gap:0.5rem; margin-bottom:1.125rem; }
.coupon-row .field{ padding:0.75rem 0.875rem; font-size:0.84375rem; }
.coupon-row button{ background:var(--bg-alt); border-radius:var(--r-sm); padding:0 1rem; font-weight:700; font-size:0.8125rem; color:var(--pink-dark); white-space:nowrap; }
.summary-row{ display:flex; justify-content:space-between; font-size:0.84375rem; color:var(--text-2); margin-bottom:0.625rem; }
.summary-row b{ color:var(--text); font-weight:600; }
.summary-row .save{ color:#2FAE6C; font-weight:600; }
.summary-total{ display:flex; justify-content:space-between; align-items:center; margin:0.875rem 0 1.25rem; }
.summary-total span:first-child{ font-weight:700; font-size:0.9375rem; }
.summary-total span:last-child{ font-family:'Baloo 2'; font-weight:800; font-size:1.375rem; color:var(--pink-dark); }
.secure-note{ display:flex; align-items:center; gap:0.5rem; margin-top:1rem; color:var(--text-3); font-size:0.75rem; }

/* =========================================================
   THANH TOÁN
   ========================================================= */
.checkout-steps{ display:flex; justify-content:center; gap:2.25rem; padding:1.75rem 0 0; }
.checkout-step{ display:flex; align-items:center; gap:0.5rem; font-size:0.78125rem; font-weight:700; color:var(--text-3); }
.checkout-step .dot{ width:1.5rem; height:1.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.6875rem; background:var(--bg-alt); color:var(--text-3); }
.checkout-step.active{ color:var(--pink-dark); }
.checkout-step.active .dot{ background:var(--grad); color:#fff; }
.checkout-title{ text-align:center; padding-top:1.75rem; }
.checkout-title h1{ font-size:1.75rem; font-weight:800; }
.checkout-title p{ color:var(--text-2); font-size:0.84375rem; margin-top:0.375rem; }
.checkout-layout{ display:grid; grid-template-columns:1fr 21.25rem; gap:2rem; margin-top:2rem; align-items:start; padding-bottom:4.5rem; }
.bank-panel{ padding:2rem; }
.bank-panel .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; flex-wrap:wrap; gap:0.625rem; }
.timer-pill{ display:flex; align-items:center; gap:0.375rem; background:#FFF6E9; color:var(--vip-text); padding:0.375rem 0.75rem; border-radius:var(--r-pill); font-size:0.75rem; font-weight:700; }
.qr-row{ display:grid; grid-template-columns:9.375rem 1fr; gap:1.5rem; align-items:center; }
.order-summary-item{ display:flex; gap:0.75rem; margin-bottom:0.875rem; }
.order-summary-item img{ width:2.75rem; height:3.75rem; object-fit:cover; border-radius:0.5rem; }
.order-summary-item .info{ flex-grow:1; }
.order-summary-item .title{ font-weight:600; font-size:0.8125rem; }
.order-summary-item .desc{ font-size:0.71875rem; color:var(--text-2); margin-top:2px; }
.order-summary-item .price{ font-weight:700; font-size:0.8125rem; }

/* =========================================================
   CẢM ƠN THANH TOÁN
   ========================================================= */
.thankyou-wrap{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:4rem 1.25rem; text-align:center; }
.thankyou-icon{ width:5.5rem; height:5.5rem; border-radius:50%; background:var(--free-bg); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.thankyou-icon .inner{ width:4rem; height:4rem; border-radius:50%; background:var(--free-ic); display:flex; align-items:center; justify-content:center; }
.thankyou-wrap h1{ font-size:1.875rem; font-weight:800; margin-top:1.5rem; }
.thankyou-wrap > .container-tight > p{ color:var(--text-2); margin-top:0.625rem; font-size:0.90625rem; line-height:1.7; }
.pending-card{ text-align:left; padding:1.5rem; margin-top:1.75rem; display:flex; align-items:center; gap:0.875rem; background:#FFF6E9; border:none; }
.pending-card .title{ font-weight:700; font-size:0.875rem; color:var(--vip-text); }
.pending-card .sub{ font-size:0.78125rem; color:var(--text-2); margin-top:2px; }
.unlock-items-card{ text-align:left; padding:1.5rem; margin-top:1rem; }
.unlock-items-card h4{ font-weight:700; font-size:0.875rem; margin-bottom:0.875rem; }
.unlock-item-row{ display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
.unlock-item-row:last-child{ margin-bottom:0; }
.unlock-item-row img{ width:2.375rem; height:3.25rem; object-fit:cover; border-radius:0.4375rem; }
.unlock-item-row .name{ flex-grow:1; font-size:0.8125rem; font-weight:600; }
.thankyou-actions{ display:flex; gap:0.75rem; margin-top:1.75rem; }
.thankyou-actions .btn{ flex:1; }
.thankyou-help{ font-size:0.78125rem; color:var(--text-3); margin-top:1.5rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .story-grid{ grid-template-columns:repeat(3,1fr); }
  .hot-list{ grid-template-columns:repeat(2,1fr); }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
  .results-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .list-layout, .contact-layout, .cart-layout, .checkout-layout{ grid-template-columns:1fr; }
  .filter-box, .summary-card{ position:static; }
}

@media (max-width: 900px){
  .nav-links, .header-actions .user-chip, .header-actions .icon-btn.search-only{ display:none; }
  .nav-toggle{ display:flex; }
  .container, .container-narrow, .container-tight{ padding:0 1.25rem; }

  .hero .container{ grid-template-columns:1fr; gap:2rem; }
  .hero h1{ font-size:2.125rem; }
  .hero-media-inner img{ height:13.75rem; }
  .hero-float-card{ display:none; }

  .story-grid{ grid-template-columns:repeat(2,1fr); gap:0.875rem; }
  .hot-list{ grid-template-columns:1fr 1fr; }
  .related-grid{ grid-template-columns:1fr 1fr; }
  .results-grid{ grid-template-columns:1fr 1fr; }

  .banner-guide{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .footer-bottom, .footer-simple .container{ flex-direction:column; gap:0.375rem; }

  .detail-head{ grid-template-columns:6.875rem 1fr; gap:1rem; }
  .detail-cover img{ height:9.625rem; border-radius:1rem; }
  .detail-info h1{ font-size:1.3125rem; }
  .detail-desc{ font-size:0.8125rem; }
  .intro-grid{ grid-template-columns:1fr; }

  .auth-wrap{ grid-template-columns:1fr; }
  .auth-brand{ min-height:0; padding:2rem 1.5rem; }
  .auth-form-wrap{ padding:2rem 1.5rem; }

  .steps-grid{ grid-template-columns:1fr 1fr; }
  .bank-card, .qr-row{ grid-template-columns:1fr; }
  .qr-box{ order:-1; }

  .form-grid-2{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .story-grid, .hot-list, .related-grid, .results-grid, .steps-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:1.75rem; }
  .page-head h1{ font-size:1.625rem; }
  .thankyou-actions{ flex-direction:column; }
}