/* Coupon Book Studio · giao diện mới (Candy Pop): sidebar, Dashboard, My account, Help, đăng nhập.
   Nạp sau app.css nên ghi đè được các kiểu cũ. */

:root {
  --sidebar-w: 268px;
  --shadow: 0 1px 2px rgba(45,27,78,.06), 0 8px 24px rgba(45,27,78,.06);
  --grad: linear-gradient(135deg, #2D1B4E 0%, #6B2A6E 55%, #D6304B 100%);
}
/* Màu từng gói: icon, viền, nền nhạt */
.tone-rose   { --tone: #C42A45; --tone-bg: #FDE6EA; }
.tone-sky    { --tone: #1D64A8; --tone-bg: #E2EEFA; }
.tone-amber  { --tone: #A3480A; --tone-bg: #FEF0DA; }
.tone-plum   { --tone: #6D28D9; --tone-bg: #EEE6FC; }
.tone-teal   { --tone: #0F6E66; --tone-bg: #DDF3EF; }
.tone-indigo { --tone: #3443B8; --tone-bg: #E4E7FB; }

.card { border-color: var(--border); box-shadow: var(--shadow); }
.btn { border-radius: 12px; transition: background .15s, border-color .15s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-large { min-height: 52px; padding: 0 24px; font-size: 1.05rem; }
.btn-light { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-light:hover { background: rgba(255,255,255,.26); }

/* ---- Khung: sidebar + nội dung ---- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.shell-main { min-width: 0; }
.app-main { max-width: 1240px; padding: 28px 32px 64px; }
.mobile-bar { display: none; }

.sidebar {
  --focus: #FFC93C;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px; background: var(--topbar); color: #fff;
}
.sidebar-brand { padding: 4px 8px; }
.brand-mark {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--accent); color: #fff;
}
.side-nav { display: grid; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 12px;
  border-radius: 12px; color: #E9E3F5; text-decoration: none; font-weight: 500;
}
.side-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-nav a.is-active { background: var(--step-active-bg); color: var(--topbar); font-weight: 600; }

.side-packages h2 {
  font-family: var(--font-body); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: #C9BFDD; margin: 0 8px 10px;
}
.side-packages ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.side-pkg {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 52px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.04);
  color: #fff; font: inherit; text-align: left; cursor: pointer;
}
.side-pkg:hover { background: rgba(255,255,255,.1); }
.side-pkg .pkg-icon { width: 34px; height: 34px; border-radius: 10px; }
.side-pkg.is-locked .pkg-icon { background: rgba(255,255,255,.12); color: #C9BFDD; }
.side-pkg-text { flex: 1; display: grid; min-width: 0; }
.side-pkg-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-pkg-state { font-size: .78rem; color: #C9BFDD; }
.side-pkg.is-owned .side-pkg-state { color: #9BE3B9; }
.side-pkg-status { display: inline-flex; color: #C9BFDD; }
.side-pkg.is-owned .side-pkg-status { color: #6EDC9E; }
.side-pkg-status .icon { width: 18px; height: 18px; }
.side-hint { display: flex; gap: 8px; align-items: flex-start; margin: 12px 8px 0; font-size: .82rem; color: #E9E3F5; }
.side-hint .icon { width: 16px; height: 16px; color: var(--step-active-bg); margin-top: 2px; }
.side-user { margin-top: auto; display: grid; gap: 8px; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.side-email { font-size: .85rem; color: #C9BFDD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .btn { justify-self: start; }

@media (max-width: 900px) {
  .shell { display: block; }
  .mobile-bar {
    --focus: #FFC93C;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 20; min-height: 56px; padding: 6px 16px; background: var(--topbar); color: #fff;
  }
  .mobile-bar .btn-icon { color: #fff; }
  .mobile-bar .btn-icon:hover { background: rgba(255,255,255,.1); }
  .sidebar {
    position: fixed; z-index: 30; top: 56px; left: 0; bottom: 0; height: auto; width: min(300px, 86vw);
    transform: translateX(-105%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.3);
  }
  .sidebar.is-open { transform: none; }
  .sidebar-brand { display: none; }
  .app-main { padding: 20px 14px 48px; }
}

/* Icon vuông bo góc có màu theo gói */
.pkg-icon {
  display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px;
  background: var(--tone-bg, var(--error-bg)); color: var(--tone, var(--accent));
}

/* ---- Banner chào mừng ---- */
.hero {
  --focus: #FFC93C;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 32px; margin-bottom: 24px; border-radius: 24px; background: var(--grad); color: #fff;
  box-shadow: 0 12px 32px rgba(107,42,110,.25);
}
.hero-text { max-width: 620px; }
.hero h1 { font-size: 2.1rem; margin-bottom: 10px; }
.hero p { color: #F6EEF7; font-size: 1.05rem; }
.hero .hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); font-size: .85rem; font-weight: 600;
}
.hero-kicker .icon { width: 16px; height: 16px; color: var(--step-active-bg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hero .btn-primary { background: var(--step-active-bg); color: var(--topbar); }
.hero .btn-primary:hover { background: #FFD666; }
.hero-stats { display: flex; gap: 12px; margin: 0; }
.hero-stats div { min-width: 120px; padding: 14px 18px; border-radius: 16px; background: rgba(255,255,255,.14); }
.hero-stats dt { font-size: .82rem; color: #F6EEF7; }
.hero-stats dd { margin: 0; font-family: var(--font-title); font-size: 1.8rem; font-weight: 600; }
@media (max-width: 600px) { .hero { padding: 22px; } .hero h1 { font-size: 1.6rem; } }

/* ---- Checklist bắt đầu ---- */
.checklist-head { display: flex; justify-content: space-between; gap: 12px; }
.checklist-head p { margin: 0; }
.progress { height: 8px; border-radius: 999px; background: var(--info-bg); margin: 14px 0 18px; overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #F0803C); }
.checklist-items {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.checklist-items li { display: flex; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border); }
.checklist-items li > div { display: grid; gap: 2px; font-size: .92rem; align-content: start; }
.checklist-items .check-mark { color: #9A8FA8; }
.checklist-items li.is-done { background: var(--ok-bg); border-color: #B9E3C9; }
.checklist-items li.is-done .check-mark { color: var(--ok); }

/* ---- My books ---- */
.book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.book-row { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; flex-wrap: wrap; }
.book-row:hover { background: #FFFCFA; }
.book-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 4px; }
.book-link { font-family: var(--font-title); font-size: 1.1rem; color: var(--text); }
.book-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.step-meter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.step-meter span { width: 22px; height: 6px; border-radius: 999px; background: #EADFE4; }
.step-meter span.on { background: var(--accent); }
.step-meter em { font-style: normal; margin-left: 8px; min-height: 26px; font-size: .78rem; }

/* ---- Thẻ category ---- */
.group-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--tone-bg); color: var(--tone); font-weight: 600; font-size: .9rem; text-decoration: none;
}
.chip-link .icon { width: 16px; height: 16px; }
.chip-link:hover { text-decoration: underline; }
.cat-group { margin-top: 28px; scroll-margin-top: 80px; }
.cat-group-head .pkg-icon { width: 38px; height: 38px; }
.cat-card {
  position: relative; min-height: 112px; justify-content: flex-start; border-radius: 18px;
  border-top: 4px solid var(--tone, var(--accent)); transition: transform .12s, box-shadow .12s;
}
.cat-card:not(.is-locked):hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45,27,78,.12); border-color: var(--tone); }
.cat-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--tone); font-weight: 600; font-size: .85rem; }
.cat-cta .icon { width: 16px; height: 16px; }
.cat-card.is-locked { border-top-color: #DCD3E3; background: #FBF8FA; }
.badge-locked { background: var(--tone-bg); color: var(--tone); }
.badge-locked:hover { border-color: var(--tone); }

/* ---- Trang My account ---- */
.pkg-cards {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.pkg-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; border: 1px solid var(--border); border-top: 4px solid var(--tone); }
.pkg-card.is-locked { background: #FBF8FA; border-top-color: #DCD3E3; }
.pkg-card.is-locked .pkg-icon { background: #EFE9F1; color: #6F6380; }
.pkg-card-head { display: flex; gap: 12px; align-items: flex-start; }
.pkg-card-head h3 { margin: 0 0 2px; }
.pkg-card-head p { margin: 0; }
.pkg-card .check-list .icon { width: 16px; height: 16px; }
.pkg-card.is-locked .check-list .icon { color: #7A6F88; }
.pkg-card-foot { margin-top: auto; }
.narrow { max-width: 560px; }

/* Modal gói */
.pkg-modal { border-top: 6px solid var(--tone); }
.pkg-modal-title { display: flex; align-items: center; gap: 12px; }
.pkg-modal-title h2 { margin: 0; }

/* ---- Hộp mẹo từng bước ---- */
.tip {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 18px;
  border-radius: 16px; background: #FFF1C9; border: 1px solid #F0CF6A;
}
.tip-icon {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--step-active-bg); color: var(--topbar);
}
.tip-body { flex: 1; }
.tip-body ol { margin: 4px 0 0; padding-left: 20px; }
.tip-body li { margin: 2px 0; }

/* ---- Trang Help ---- */
.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-toc { position: sticky; top: 16px; }
.help-toc ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 2px; }
.help-toc a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.help-toc a:hover { background: var(--bg); }
.help-content section { scroll-margin-top: 80px; }
.numbered { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.help-steps { display: grid; gap: 14px; }
.help-step { display: flex; gap: 14px; }
.help-step .step-num { flex: none; width: 34px; height: 34px; color: var(--accent-text); background: var(--error-bg); border: 0; font-weight: 700; }
.help-step h3 { margin: 4px 0; }
.help-step p { margin: 0; }
.faq { display: grid; gap: 8px; margin-bottom: 16px; }
.faq details { border: 1px solid var(--border); border-radius: 14px; padding: 0 16px; }
.faq summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; font-weight: 600; }
.faq details p { margin: 0 0 14px; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* ---- Trang đăng nhập ---- */
.auth-wrap {
  width: 100%; max-width: 960px; display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(45,27,78,.18);
}
.auth-aside { --focus: #FFC93C; padding: 40px; background: var(--grad); color: #fff; display: flex; flex-direction: column; gap: 22px; }
.auth-aside h2 { font-size: 1.9rem; margin: 16px 0 0; }
.auth-aside .brand-mark { background: var(--step-active-bg); color: var(--topbar); }
.auth-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-benefits li { display: flex; gap: 12px; align-items: center; }
.auth-benefits .pkg-icon { background: rgba(255,255,255,.16); color: #fff; }
.auth-wrap .auth-card { max-width: none; border: 0; box-shadow: none; border-radius: 0; padding: 40px; margin: 0; }
.auth-wrap .auth-brand { display: none; }
@media (max-width: 800px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .auth-wrap .auth-brand { display: flex; }
  .auth-wrap .auth-card { padding: 28px 22px; }
}

/* ---- Thanh bước ---- */
.stepbar { --focus: #FFC93C; }
.stepbar ol { border-radius: 16px; }
.auth-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.auth-col > .notice { margin: 24px 40px 0; }
@media (max-width: 800px) { .auth-col > .notice { margin: 20px 22px 0; } }

/* ---- Trang đăng nhập: nền hiệu ứng + coupon bay + coupon mẫu ---- */
.page-auth { position: relative; overflow-x: hidden; }
.auth-main { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; align-content: center; padding: 32px 16px; }
.auth-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-bg .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.auth-bg .b1 { width: 460px; height: 460px; background: #FF8FA3; top: -140px; left: -120px; animation: drift 18s ease-in-out infinite alternate; }
.auth-bg .b2 { width: 420px; height: 420px; background: #FFD36E; bottom: -160px; right: -100px; animation: drift 22s ease-in-out infinite alternate-reverse; }
.auth-bg .b3 { width: 360px; height: 360px; background: #B79BF2; top: 40%; left: 55%; animation: drift 26s ease-in-out infinite alternate; }

/* Tấm coupon nhỏ bay lơ lửng */
.float-ticket {
  position: absolute; width: 118px; height: 62px; border-radius: 12px; background: #fff;
  box-shadow: 0 10px 24px rgba(45,27,78,.12); padding: 7px;
  animation: float 9s ease-in-out infinite;
}
.float-ticket > span { display: block; height: 100%; border: 2px dashed var(--c, #D6304B); border-radius: 8px; opacity: .7; }
.float-ticket::before, .float-ticket::after {
  content: ''; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--bg);
}
.float-ticket::before { left: -8px; }
.float-ticket::after { right: -8px; }
.float-ticket.f1 { top: 8%;  left: 6%;  --c: #D6304B; --r: -14deg; animation-delay: 0s; }
.float-ticket.f2 { top: 70%; left: 4%;  --c: #6D28D9; --r: 10deg;  animation-delay: -2s; width: 96px; height: 52px; }
.float-ticket.f3 { top: 12%; right: 7%; --c: #E0A800; --r: 12deg;  animation-delay: -4s; }
.float-ticket.f4 { top: 78%; right: 9%; --c: #1D64A8; --r: -8deg;  animation-delay: -6s; width: 104px; }
.float-ticket.f5 { top: 44%; left: 1%;  --c: #0F6E66; --r: 6deg;   animation-delay: -3s; width: 84px; height: 46px; }
.float-ticket.f6 { top: 40%; right: 2%; --c: #D6304B; --r: -16deg; animation-delay: -5s; width: 90px; height: 48px; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--r, 0deg) + 4deg)); }
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.08); }
}
@media (max-width: 1100px) { .float-ticket.f5, .float-ticket.f6 { display: none; } }
@media (max-width: 800px)  { .float-ticket { opacity: .55; } .float-ticket.f2, .float-ticket.f4 { display: none; } }

/* Thẻ đăng nhập hiện ra nhẹ nhàng */
.auth-wrap { animation: rise .5s ease-out both; position: relative; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Hai tấm coupon mẫu ở cột trái */
.coupon-preview { position: relative; height: 190px; margin-top: auto; }
.coupon-sample {
  position: absolute; left: 0; width: min(330px, 100%); display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--topbar);
  box-shadow: 0 16px 30px rgba(0,0,0,.25); outline: 2px dashed rgba(214,48,75,.45); outline-offset: -8px;
}
.coupon-sample.s1 { top: 6px; transform: rotate(-4deg); z-index: 2; animation: float 10s ease-in-out infinite; --r: -4deg; }
.coupon-sample.s2 { top: 92px; left: 46px; transform: rotate(3deg); animation: float 12s ease-in-out infinite; animation-delay: -4s; --r: 3deg; }
.cs-art { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: #FDE6EA; color: #C42A45; }
.coupon-sample.s2 .cs-art { background: #FFF1C9; color: #8A5A00; }
.cs-text { display: grid; gap: 1px; }
.cs-kicker { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.cs-title { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; }
.cs-line { font-size: .75rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .auth-bg .blob, .float-ticket, .coupon-sample, .auth-wrap { animation: none; }
  .coupon-sample.s1 { transform: rotate(-4deg); }
  .coupon-sample.s2 { transform: rotate(3deg); }
  .float-ticket { transform: rotate(var(--r, 0deg)); }
}

/* ---- Thẻ quảng cáo gói chưa mở (Dashboard) ---- */
.upsell-grid {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
}
.upsell-card {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px;
  background: linear-gradient(180deg, var(--tone-bg) 0%, #fff 70%);
  border: 1px solid var(--border); border-top: 4px solid var(--tone);
  transition: transform .12s, box-shadow .12s;
}
.upsell-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(45,27,78,.12); }
.upsell-head { display: flex; gap: 12px; align-items: flex-start; }
.upsell-head > div { flex: 1; min-width: 0; }
.upsell-head h3 { margin: 2px 0; }
.upsell-head p { margin: 0; }
.upsell-head .pkg-icon { background: #fff; }
.upsell-price {
  flex: none; padding: 4px 10px; border-radius: 999px; background: var(--tone); color: #fff;
  font-weight: 700; font-size: .9rem;
}
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list li { padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: .82rem; font-weight: 500; }
.tag-list .tag-more { background: var(--tone-bg); border-color: transparent; color: var(--tone); font-weight: 600; }
.upsell-btn { margin-top: auto; color: var(--tone); border-color: var(--tone); }
.upsell-btn:hover { background: var(--tone-bg); border-color: var(--tone); }
.side-hint a { color: inherit; }