/* ============================================================================
   Leon Dio — Trang SOT / Sign Of The Time (page-leon-dio-sot.php)
   ========================================================================== */

#sot-page {
    --sot-gold: #c5a059;
    --sot-gold-dark: #a8863f;
    --sot-dark: #1a1a1a;
    --sot-text: #222;
    --sot-muted: #6b6b6b;
    --sot-line: #ececec;
    --sot-soft: #faf8f4;
}

/* Nội dung luôn hiển thị — không phụ thuộc JS reveal của theme (flaky) */
#sot-page .reveal, #sot-page .reveal-left, #sot-page .reveal-right { opacity: 1 !important; transform: none !important; }

#sot-page .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
#sot-page .section-padding { padding: 90px 0; }
#sot-page .section-title { font-family: 'Playfair Display', serif; font-size: 42px; line-height: 1.15; font-weight: 700; color: var(--sot-dark); margin: 8px 0 16px; text-wrap: balance; }
#sot-page .section-title span { color: var(--sot-gold); font-style: italic; }
/* Cụm chữ vàng nghiêng giữ nguyên khối, không tách dòng giữa cụm */
#sot-page .sot-hl-nowrap { white-space: nowrap; }
#sot-page .section-title.center { text-align: center; }
#sot-page .section-title.light { color: #fff; }
.sot-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--sot-gold); font-weight: 600; }
.sot-eyebrow--dark { color: var(--sot-gold-dark); }
.sot-section-head { text-align: center; margin-bottom: 48px; }

/* Buttons */
.sot-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all .3s cubic-bezier(.165,.84,.44,1); }
.sot-btn--gold { background: linear-gradient(135deg, var(--sot-gold), var(--sot-gold-dark)); color: #fff; }
.sot-btn--gold:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(197,160,89,.4); color: #fff; }
.sot-btn--ghost { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.sot-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.sot-inline-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--sot-gold-dark); text-decoration: none; transition: gap .25s; }
.sot-inline-link:hover { gap: 15px; color: var(--sot-dark); }

/* ── ① Hero ─── dùng component .hero-split (slider) global từ style.css ──── */
/* H1 SEO ẩn (slider là ảnh, không có heading hiển thị) */
.sot-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* .sot-hero-cta giữ lại cho hàng nút ở section CTA cuối trang */
.sot-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero slider hiển thị TRỌN banner theo tỉ lệ chuẩn 1920×800 (2.4:1) — xử lý
   ở style.css global (.hero-split:has(.hero-slide-banner)); dùng chung với Homepage. */

/* ── ② Concept ──────────────────────────────────────────────────────────── */
.sot-concept { background: #fff; }
.sot-concept-inner { max-width: 780px; margin: 0 auto; text-align: center; }
/* Typography + margin-bottom lấy từ .sot-flag-desc (class đặt trong HTML) — chỉ set margin-top */
.sot-concept-inner p { margin-top: 18px; }
.sot-concept-inner strong { color: var(--sot-dark); }

/* ── ③ Flagships — FULL-WIDTH 50/50 như trang gốc ───────────────────────── */
/* Nửa ảnh = 50% viewport × 600px (màn 1920 → 960×600 = khớp ảnh gốc, không crop) */
.sot-flagships { background: #fff; }
.sot-flag { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; margin: 0; }
.sot-flag--rev .sot-flag-media { order: 2; }
.sot-flag-media { position: relative; min-height: 600px; overflow: hidden; background: var(--sot-soft); }

/* Slider ảnh từng cây bút (3 ảnh, giống Slides widget của gốc) */
.sot-pen-slider { position: absolute; inset: 0; }
.sot-pen-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity .8s ease; }
.sot-pen-slide.active { opacity: 1; }
.sot-pen-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
/* width tường minh — theme có rule global button{width:100%} */
#sot-page .sot-pen-dot { width: 9px; height: 9px; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(26,26,26,.3); cursor: pointer; transition: background .3s, transform .3s; }
#sot-page .sot-pen-dot.active { background: var(--sot-gold-dark); transform: scale(1.3); }

/* Nửa chữ */
.sot-flag-body { display: flex; align-items: center; background: #fff; padding: 60px 64px; }
.sot-flag-inner { max-width: 520px; }
/* Hàng đảo (ảnh bên phải) → dồn khối chữ sang phải cho sát hình */
@media (min-width: 1025px) {
    .sot-flag--rev .sot-flag-body { justify-content: flex-end; }
}
/* Text bút theo style MỚI (Playfair + lead vàng nghiêng), nội dung giữ nguyên gốc */
.sot-flag-name { font-family: 'Playfair Display', serif; font-size: 34px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sot-dark); line-height: 1.15; margin: 0 0 8px; }
.sot-flag-lead { font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; line-height: 1.5; color: var(--sot-gold); margin: 0 0 18px; }
/* Scope #sot-page để margin-bottom không bị theme ghi đè bởi p:last-child{margin-bottom:0} */
#sot-page .sot-flag-desc { font-size: 15.5px; line-height: 1.8; color: var(--sot-muted); margin: 0 0 22px; }
/* Giá gọn: giá gốc gạch nhỏ ngay trên giá ưu đãi lớn */
.sot-flag-pricebox { display: flex; flex-direction: column; gap: 1px; margin: 20px 0; }
.sot-flag-price-old { font-size: 14.5px; color: var(--sot-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.sot-flag-price-now { font-family: 'Playfair Display', serif; font-size: 31px; font-weight: 800; color: var(--sot-gold-dark); line-height: 1.1; }
.sot-flag-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.sot-btn--outline { border: 1px solid var(--sot-gold-dark); color: var(--sot-gold-dark); background: transparent; }
.sot-btn--outline:hover { background: var(--sot-gold-dark); color: #fff; }
.sot-btn--dark { background: var(--sot-dark); color: #fff; }
.sot-btn--dark:hover { background: #000; color: #fff; transform: translateY(-2px); }

/* Video 1 nằm trong section giới thiệu.
   Scope #sot-page để thắng .sot-video--wide{margin:0 auto} (cùng specificity, khai báo sau). */
#sot-page .sot-concept-video { margin-top: 44px; }

/* ── Sổ tay: chỉ 3 sản phẩm → 1 row 3 cột cho cân ───────────────────────── */
#sot-page .sot-notebooks .product-grid { grid-template-columns: repeat(3, 1fr); max-width: 1020px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) {
    #sot-page .sot-notebooks .product-grid { grid-template-columns: 1fr; }
}

/* ── Video (rải rác theo trang gốc: sau bút / cuối trang) ────────────────── */
.sot-videobox .sot-video-caption { text-align: center; max-width: 640px; margin: 0 auto 30px; font-size: 17px; line-height: 1.7; color: var(--sot-muted); }
.sot-video { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 18px 46px rgba(26,26,26,.14); }
.sot-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sot-video--wide { max-width: 880px; margin: 0 auto; }
.sot-video--short { max-width: 330px; margin: 0 auto; aspect-ratio: 9 / 16; }

/* ── ⑤ Features ─────────────────────────────────────────────────────────── */
.sot-features { background: var(--sot-dark); }
.sot-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.sot-feature { text-align: center; padding: 8px; }
.sot-feature-icon { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; color: var(--sot-gold); background: rgba(197,160,89,.14); border: 1px solid rgba(197,160,89,.3); }
.sot-feature h3 { font-family: 'Playfair Display', serif; font-size: 20px; color: #fff; margin: 0 0 10px; }
.sot-feature p { font-size: 14.5px; color: rgba(255,255,255,.62); line-height: 1.65; margin: 0; }

/* ── ⑤ Trọn bộ sưu tập: dùng .products của render_leon_dio_product_block ─── */

/* ── ⑥ Logo doanh nghiệp + Testimonials + ⑦ Báo chí ─── dùng style global ── */

/* ── ⑧ CTA ──────────────────────────────────────────────────────────────── */
.sot-cta { position: relative; background: radial-gradient(circle at 70% 30%, #2b2b2b 0%, var(--sot-dark) 60%); color: #fff; padding: 90px 0; text-align: center; overflow: hidden; }
.sot-cta-overlay { position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 20%, rgba(197,160,89,.16), transparent 40%); pointer-events: none; }
.sot-cta-inner { position: relative; max-width: 660px; margin: 0 auto; }
.sot-cta-inner h2 { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 700; margin: 0 0 14px; text-wrap: balance; }
.sot-cta-inner p { font-size: 17px; color: rgba(255,255,255,.72); margin: 0 0 28px; }
.sot-cta .sot-hero-cta { justify-content: center; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    #sot-page .section-title { font-size: 34px; }
    /* Xếp dọc: ảnh trên, chữ dưới */
    .sot-flag { grid-template-columns: 1fr; }
    .sot-flag--rev .sot-flag-media { order: 0; }
    .sot-flag-media { min-height: 0; aspect-ratio: 16 / 10; }
    .sot-flag-body { padding: 44px 28px; }
    .sot-flag-inner { max-width: none; }
    .sot-features-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
}
@media (max-width: 768px) {
    #sot-page .section-padding { padding: 60px 0; }
    #sot-page .section-title { font-size: 28px; }
    .sot-flag-name { font-size: 26px; }
    .sot-flag-lead { font-size: 16.5px; }
    .sot-flag-price-now { font-size: 28px; }
    .sot-flag-media { aspect-ratio: 4 / 3; }
    .sot-flag-body { padding: 36px 22px; }
    .sot-features-grid { grid-template-columns: 1fr; }
    .sot-cta-inner h2 { font-size: 28px; }
    .sot-cta .sot-hero-cta { flex-direction: column; }
    .sot-btn { justify-content: center; }
    /* 2 nút giữ trên CÙNG 1 hàng ở mobile */
    .sot-flag-cta { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 10px; }
    .sot-flag-cta .sot-btn { padding: 12px 16px; font-size: 13.5px; white-space: nowrap; }
}