/* Tới Rồi — bản B (đường dẫn /b/): nền xanh đêm, điểm nhấn vàng gold, tiêu đề Playfair, kiểu Xưởng Ảnh AI.
   Nạp sau style.css (máy chủ chèn vào trang). Dùng chung HTML/JS với bản A; màu ghi thẳng trong HTML/JS được ép lại bằng !important.
   Bản C (/c/) nạp file này rồi nạp thêm theme-c.css chỉ để đổi bảng màu, nên mọi màu bên dưới :root đều đi qua biến. */

:root {
  --ground: #0A0F2C;
  --outside: #070B22;
  --ink: #FFFFFF;
  --ink-2: rgba(var(--on-base-rgb), 0.84);
  --muted: rgba(var(--on-base-rgb), 0.66);
  --line: rgba(var(--on-base-rgb), 0.13);
  --teal: #E2A84B;
  --sky: #F3C77E;
  --sky-line: rgba(var(--accent-rgb), 0.55);
  --sky-text: #F3C77E;
  --danger: #FF8A80;

  --accent: #E2A84B;
  --accent-2: #C98F35;
  --accent-text: #F3C77E;
  --on-accent: #241503;
  --accent-soft: rgba(var(--accent-rgb), 0.14);
  --accent-edge: rgba(var(--accent-rgb), 0.45);
  --card: #121A3D;
  --glass: rgba(var(--on-base-rgb), 0.06);
  --glass-edge: rgba(var(--on-base-rgb), 0.14);
  --accent-grad: linear-gradient(180deg, #E8B35C, #C98F35);
  --accent-glow: 0 12px 26px -10px rgba(var(--accent-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --lift: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
  /* Kênh màu dùng chung cho bản B và C (bản C đổi các giá trị này) */
  --accent-rgb: 226, 168, 75;
  --accent2-rgb: 92, 108, 255;
  --base-rgb: 10, 15, 44;
  --on-base: #FFFFFF;
  --on-base-rgb: 255, 255, 255;
  --pic-bg: #0D1433;
  --photo-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.75);
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

body {
  background:
    radial-gradient(900px 520px at 0% -8%, rgba(var(--accent-rgb), 0.20), transparent 62%),
    radial-gradient(800px 480px at 100% 0%, rgba(var(--accent2-rgb), 0.16), transparent 60%),
    var(--outside);
  color: var(--ink);
}
.app { background: transparent; }
@media (min-width: 600px) {
  .app { background: rgba(var(--base-rgb), 0.55); border-color: var(--line); }
}
::selection { background: rgba(var(--accent-rgb), 0.35); }
:focus-visible { outline-color: var(--accent); }

/* Thanh trên / dưới: kính mờ tối */
.topbar, .bottom-bar, .bottom-nav, .desk-nav {
  background: rgba(var(--base-rgb), 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.page > .col-b > .bottom-bar { background: rgba(var(--base-rgb), 0.86); background-clip: padding-box; }
.bottom-nav { border-top-color: var(--line); }
.bottom-nav a { color: var(--muted); }
.bottom-nav a[aria-current="page"], .bottom-nav a.gift { color: var(--accent-text); }

.icon-btn { background: var(--glass); border-color: var(--glass-edge); color: var(--ink); }
.brand-mark { background: var(--accent-grad); border: 0; color: var(--on-accent); box-shadow: var(--accent-glow); }
.skill-mark, .skill-mark.sky { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }
.demo-tag { border-color: var(--accent-edge); color: var(--accent-text); }
.gift-pill { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }

/* Chữ: tiêu đề Playfair, số và chữ nhấn vàng nghiêng */
.h1, .h2, .topbar-title strong, .gift-hero h1, .success .h1 { font-family: var(--serif); font-weight: 700; letter-spacing: 0.005em; }
.topbar-title span { color: var(--muted); }
.step i { background: var(--line); }
.step.done i { background: var(--accent); }
.step.now i { background: var(--accent-text); }
.step.now { color: var(--accent-text); }
.link-strong { color: var(--accent-text); }

/* Nút: vàng phát sáng cho nút chính, kính mờ cho nút phụ */
.btn { border-color: transparent; }
.btn-primary, .btn-buy, .btn-gift, .btn-mint {
  background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--accent-glow);
}
.btn-primary:hover, .btn-buy:hover, .btn-gift:hover { box-shadow: var(--accent-glow), 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.btn-sky, .btn-sun, .btn-outline, .btn-ghost {
  background: var(--glass); color: var(--ink); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-edge);
}
.btn-sky:hover, .btn-outline:hover, .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent-edge); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--glass); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.btn-note { color: var(--accent-text); }

/* Banner quà */
.gift-banner {
  background: linear-gradient(115deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.06) 60%, rgba(var(--accent2-rgb), 0.10));
  border: 1px solid var(--accent-edge); box-shadow: var(--lift);
}
.gift-banner .icon-box { background: var(--accent-grad); border: 0; color: var(--on-accent); box-shadow: var(--accent-glow); }
.gift-banner strong { color: var(--accent-text); }
.gift-banner .small { color: var(--muted); }
.gift-banner .cta { background: var(--accent-grad); border: 0; color: var(--on-accent); box-shadow: var(--accent-glow); }

/* Thẻ skill */
.tile { background: var(--card); border: 1px solid var(--glass-edge); box-shadow: var(--lift); --tile-t: var(--accent-text); }
.tile:hover { box-shadow: var(--lift), inset 0 0 0 1px var(--accent-edge); }
.tile span.sub { color: var(--muted); }
.tile .pic { background: var(--pic-bg); }
.hot-tag { background: var(--accent-grad); border: 0; color: var(--on-accent); }
.tile-mint svg circle { fill: var(--accent); }

/* Lọc + tìm */
.chip { background: var(--glass); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.search { background: rgba(var(--on-base-rgb), 0.05); border-color: var(--glass-edge); }
.search:focus-within { border-color: var(--accent-edge); }
.search input { color: var(--ink); }
.search input::placeholder { color: rgba(var(--on-base-rgb), 0.5); }
.search svg { color: var(--muted); }

/* Thẻ concept: ảnh dọc trên nền thẻ tối */
.concept { --accent: var(--glass-edge) !important; background: var(--card); border-width: 1px; box-shadow: var(--lift); }
.concept:hover { box-shadow: var(--lift), 0 0 0 1px var(--accent-edge); }
.concept .meta strong { color: var(--ink); }
.concept .meta span { color: var(--muted); }
.badge-people { background: rgba(var(--base-rgb), 0.78); color: var(--on-base); border-color: rgba(var(--on-base-rgb), 0.22); }
.badge-free { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }

/* Xem mẫu */
.showcase { border: 0; box-shadow: var(--lift), 0 0 0 1px var(--accent-edge); }
.showcase .count, .photo-box .tag, .stop .pic span, .label-ai {
  background: rgba(var(--base-rgb), 0.78); color: var(--on-base); border-color: rgba(var(--on-base-rgb), 0.22);
}
.thumbs button { border-color: var(--glass-edge); }
.thumbs button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.info-chips span { background: var(--glass); }
.c1, .c3 { border-color: var(--accent-edge); color: var(--accent-text); }
.c2, .c4 { border-color: var(--glass-edge); color: var(--ink-2); }
.box { background: var(--card); border-color: var(--glass-edge); }
.equation img, .equation svg { border-color: var(--glass-edge); }
.equation .is-result { border-color: var(--accent); }
.equation .op { color: var(--accent-text); }
.you-badge { background: var(--ground); border-color: var(--accent); color: var(--accent-text); }

/* Ghép thử */
.picked { background: var(--card); border: 1px solid var(--accent-edge); }
.slot { background: var(--card); border-color: var(--glass-edge); }
.slot .face { --slot-color: var(--accent-edge) !important; --slot-dark: var(--accent-text) !important; background: rgba(var(--on-base-rgb), 0.03); }
.slot.filled .face { --slot-color: var(--accent) !important; }
.slot .ok { background: var(--ground); }
.pick-btns .pick-teal { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); box-shadow: var(--accent-glow); }
.pick-btns .pick-sky { background: var(--glass); border-color: var(--glass-edge); color: var(--ink); }
.guide .g svg { border-color: var(--glass-edge); }
.guide .mark { background: var(--ground); }
.consent input, .plan input { accent-color: var(--accent); }
.note-line { color: var(--muted); }

/* Đang tạo */
.preview { border: 0; box-shadow: var(--lift), 0 0 0 1px var(--accent-edge); }
.preview .veil { background: rgba(var(--base-rgb), 0.35); }
.ring { background: rgba(var(--base-rgb), 0.9); border-color: var(--accent) !important; box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.35); }
.ring strong { font-family: var(--serif); font-style: italic; color: var(--accent-text); }
.checklist { background: var(--card); border-color: var(--glass-edge); }
.checklist li { --c: var(--accent) !important; }
.pill-note { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }

/* Kết quả */
.result { border: 0; box-shadow: var(--lift), 0 0 0 1px var(--accent-edge); }
.label-logo { background: rgba(var(--base-rgb), 0.78); color: var(--accent-text); border-color: var(--accent-edge); }
.like { background: rgba(var(--base-rgb), 0.7); border-color: rgba(var(--on-base-rgb), 0.22); color: var(--on-base); }
.like[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.like[aria-pressed="true"] svg { fill: var(--accent); }
.actions .circle, .actions .circle.sky { background: var(--glass); border-color: var(--accent-edge); color: var(--accent-text); }
.fixes button { background: var(--glass); border-color: var(--glass-edge); color: var(--ink-2); }
.fixes button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.locked span { border-color: var(--glass-edge); }
.locked i { background: rgba(var(--base-rgb), 0.5); color: var(--accent-text); }
.upsell { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), var(--card)); border: 1px solid var(--accent-edge); }
.sent img { border-color: var(--accent); }
.demo-note { border-color: var(--glass-edge); color: var(--muted); background: rgba(var(--on-base-rgb), 0.025); }

/* Quà tặng */
.gift-hero { background: radial-gradient(420px 260px at 85% 20%, rgba(var(--accent-rgb), 0.22), transparent 70%); }
.gift-hero .photo, .gift-hero .photo.sky { border-color: var(--accent); box-shadow: var(--lift); }
.gift-hero .kicker { color: var(--accent-text); }
.gift-hero h1 { color: var(--on-base); font-style: italic; }
.gift-hero p { color: var(--ink-2); }
.gift-hero .gift-icon { color: var(--accent); }
.gift-card { background: var(--card); border: 1px solid var(--accent-edge); box-shadow: var(--lift); }
.field input { background: rgba(var(--on-base-rgb), 0.05); border-color: var(--glass-edge); color: var(--ink); }
.field input::placeholder { color: rgba(var(--on-base-rgb), 0.45); }
.field input:focus { border-color: var(--accent-edge); }
.tokens img, .tokens img:nth-child(2) { border-color: var(--accent); }
.more { background: var(--card); border-color: var(--glass-edge); }
.more .plus, .more .plus.sky { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }
.more .go { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); }
.more .go.sky { background: var(--glass); border-color: var(--glass-edge); color: var(--ink); }

/* Lấy cả bộ */
.thumbs5 img { border-color: var(--glass-edge); }
.plan { background: var(--card); border-color: var(--glass-edge); }
.plan:has(input:checked) { border-color: var(--accent); background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.14), var(--card)); }
.plan .txt span { color: var(--muted); }
.plan .price { color: var(--accent-text); }
.plan .best { background: var(--accent-grad); color: var(--on-accent); border-color: transparent; }
.pays button { background: var(--card); border-color: var(--glass-edge); color: var(--ink-2); }
.pays button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.success .stack img, .success .stack img:nth-child(2) { border-color: var(--accent); box-shadow: var(--lift); }

/* Ảnh Đẹp */
.seg button { background: var(--glass); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.photo-box { border: 0; box-shadow: var(--lift), 0 0 0 1px var(--accent-edge); }
.photo-box .tag { color: var(--accent-text); }
.tools button { background: var(--glass); border-color: var(--glass-edge); color: var(--ink-2); }
.tools button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent-text); }
.tools button i { border-color: var(--glass-edge); }
.tools button[aria-pressed="true"] i { border-color: var(--accent); color: var(--accent); }
.albums div { background: var(--card); border-color: var(--glass-edge); }
.albums p span { color: var(--muted); }
.try-own { border-color: var(--accent-edge); color: var(--accent-text); background: rgba(var(--accent-rgb), 0.05); }

/* Sổ tem */
.count-big strong { font-family: var(--serif); font-style: italic; color: var(--accent-text); }
.count-big span { color: var(--muted); }
.bar { border-color: var(--glass-edge); background: rgba(var(--on-base-rgb), 0.04); }
.bar i { background: var(--accent-grad); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); }
.stamp .got { --frame-c: var(--accent-edge) !important; background: var(--card); }
.stamp .got span { color: var(--accent-text); }
.stamp .empty { border-color: var(--glass-edge); color: var(--muted); background: rgba(var(--on-base-rgb), 0.02); }

/* Lộ trình */
.trip-chips span { background: var(--glass); border-color: var(--glass-edge); color: var(--ink-2); }
.days button { background: var(--glass); border-color: transparent; box-shadow: inset 0 0 0 1px var(--glass-edge); color: var(--ink-2); }
.days button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.timeline li { --pc: var(--accent-text) !important; --dot: var(--accent) !important; }
.timeline .when b { font-family: var(--serif); font-style: italic; font-size: 15px; }
.timeline .when i { background: var(--ground); }
.timeline .when em { background: var(--glass-edge); }
.stop { background: var(--card); border-color: var(--glass-edge); }
.round-go { border-color: var(--accent-edge); color: var(--accent-text); }

/* Nguồn ảnh */
.credits li { background: var(--card); border-color: var(--glass-edge); }
.credits a, .text-link, .footer-links a { color: var(--accent-text); }
.footer-links { color: var(--muted); }

/* Màu ghi thẳng trong HTML (style="…") của bản A */
[style*="color: #0B6E7F"], [style*="color: #0B6E9A"] { color: var(--accent-text) !important; }
[style*="border-color: #0B6E7F"] { border-color: var(--accent-edge) !important; }
[style*="color: #2C3E4C"] { color: var(--ink-2) !important; }
[style*="color: #B42318"] { color: var(--danger) !important; }

/* ---------- Khối riêng bản B ở trang chủ ---------- */
.only-a { display: none !important; }

body[data-page="home"] .page { gap: 22px; }
body[data-page="home"] .h2 { font-size: 23px; }
.hero-b { order: 1; display: flex; flex-direction: column; gap: 22px; padding-top: 4px; }
.gift-banner { order: 2; }
.gallery-b { order: 3; display: flex; flex-direction: column; gap: 12px; }
.trip-title { order: 4; display: block; margin-top: 6px; }
.tiles { order: 5; }
.faq-b { order: 6; display: flex; flex-direction: column; gap: 14px; }
body[data-page="home"] .footer-links { order: 7; }

.hero-pics { position: relative; height: 236px; }
.hp {
  position: absolute; margin: 0; border-radius: 14px; overflow: hidden; background: var(--card);
  box-shadow: var(--photo-shadow), 0 0 0 1px var(--accent-edge);
}
.hp img { width: 100%; height: 100%; object-fit: cover; }
.hp figcaption {
  position: absolute; left: 8px; bottom: 8px; padding: 2px 9px; border-radius: 8px; font-size: 12px; font-weight: 700;
  background: rgba(var(--base-rgb), 0.8); color: var(--on-base); box-shadow: inset 0 0 0 1px var(--accent-edge); white-space: nowrap;
}
.hp-1 { left: 2%; top: 22px; width: 40%; height: 184px; transform: rotate(-7deg); }
.hp-2 { right: 2%; top: 0; width: 44%; height: 204px; transform: rotate(5deg); }
.hp-3 { left: 20%; top: 80px; width: 40%; height: 152px; transform: rotate(-1.5deg); z-index: 2; }
@media (max-width: 1023px) { .hp figcaption { font-size: 11px; padding: 2px 7px; } }
/* Nhãn đặt ở góc không bị ảnh phía trước che */
.hp-1 figcaption { top: 8px; bottom: auto; }
.hp-2 figcaption { left: auto; right: 8px; }

.hero-text { display: flex; flex-direction: column; gap: 14px; }
.kicker-b {
  align-self: flex-start; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--accent-edge);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft);
}
.hero-title { margin: 0; font-family: var(--serif); font-size: 34px; line-height: 1.12; font-weight: 700; color: var(--on-base); }
.hero-title em { font-style: italic; font-weight: 600; color: var(--accent); }
.hero-sub { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.hero-ctas { display: flex; flex-direction: column; gap: 10px; }
.hero-steps {
  list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--ink-2);
}
.hero-steps li { display: flex; align-items: baseline; gap: 6px; }
.hero-steps b { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--accent); }

.faq-list { margin: 0; display: grid; gap: 10px; }
.faq-list div { background: var(--card); border: 1px solid var(--glass-edge); border-radius: 16px; padding: 14px 16px; }
.faq-list dt { font-weight: 800; color: var(--on-base); }
.faq-list dd { margin: 4px 0 0; font-size: 14.5px; color: var(--muted); }

/* ---------- Máy tính ---------- */
@media (min-width: 1024px) {
  body { background:
    radial-gradient(1100px 620px at 8% -6%, rgba(var(--accent-rgb), 0.20), transparent 62%),
    radial-gradient(900px 560px at 100% 0%, rgba(var(--accent2-rgb), 0.16), transparent 60%),
    var(--outside); }
  .app { background: transparent; }
  .desk-nav { border-bottom-color: var(--line); }
  .desk-links a { color: var(--muted); }
  .desk-links a:hover { color: var(--accent-text); }
  .desk-links a[aria-current="page"] { color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-edge); }
  .two-col > .col-b > .bottom-bar, .topbar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body[data-page="home"] .h2 { font-size: 30px; }
  .gift-hero { border-color: var(--accent-edge); }

  body[data-page="home"] .page { gap: 40px; padding-top: 40px; }
  .hero-b { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: 56px; align-items: center; padding: 8px 0 16px; }
  .hero-text { grid-column: 1; grid-row: 1; gap: 20px; }
  .hero-pics { grid-column: 2; grid-row: 1; height: 470px; }
  .hp-1 { left: 0; top: 50px; width: 46%; height: 300px; }
  .hp-2 { right: 0; top: 0; width: 50%; height: 340px; }
  .hp-3 { left: 26%; top: 190px; width: 42%; height: 262px; }
  .hp figcaption { font-size: 13px; }
  .hp-1 figcaption { left: 12px; top: 12px; }
  .hp-2 figcaption { right: 12px; bottom: 12px; }
  .hp-3 figcaption { left: 12px; bottom: 12px; }
  .hero-title { font-size: clamp(44px, 4.6vw, 62px); line-height: 1.08; }
  .hero-sub { font-size: 17.5px; max-width: 520px; }
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { width: auto; }
  .hero-steps { gap: 10px 28px; font-size: 15px; padding-top: 18px; }
  .hero-steps b { font-size: 24px; }

  .gallery-b .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-b .concept .pic img { height: clamp(260px, 22vw, 330px); }
  .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
.eq-faces { border-color: var(--glass-edge); }