/* ============================================================================
   Leon Dio — BST Âu Lạc (page-bst-au-lac.php) — code THUẦN, thay Elementor.
   Design system: gold #c5a059 · dark #1a1a1a · Playfair Display / SF Pro Display.
   Prefix .al-page cho section CUSTOM. Section tái dùng (press/partners/giftsets)
   render bằng class GỐC của style.css — KHÔNG style lại ở đây.
   ========================================================================== */

.al-page {
    --al-gold: #c5a059;
    --al-gold-light: #d4b882;
    --al-gold-dark: #a8863f;
    --al-dark: #1a1a1a;
    --al-text: #222222;
    --al-muted: #666666;
    --al-line: #ececec;
    --al-paper: #f9f9f9;
    --al-band: #f4f1ea;
    --al-soft: #faf8f4;
    --al-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    --al-shadow-hover: 0 20px 40px rgba(0, 0, 0, .1);
    font-family: 'SFProDisplay', 'SF Pro Display', system-ui, -apple-system, sans-serif;
    color: var(--al-text);
    background: #fff;
}

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

.al-page .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.al-page .section-padding { padding: 88px 0; }

/* Section header — eyebrow + tiêu đề Playfair canh giữa */
.al-page .section-title { font-family: 'Playfair Display', serif; font-size: 40px; line-height: 1.18;
    font-weight: 700; color: var(--al-dark); margin: 8px 0 0; text-wrap: balance; }
.al-page .section-title.center { text-align: center; }
.al-page .section-title.light { color: #fff; }
.al-page .section-title span { color: var(--al-gold-dark); font-style: italic; }
.al-page .section-title.light span { color: var(--al-gold); }
.al-page .al-eyebrow { display: inline-block; font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase;
    font-weight: 700; color: var(--al-gold-dark); }
.al-page .al-eyebrow--dark { color: var(--al-gold-dark); }
.al-page .al-eyebrow--light { color: var(--al-gold-light); }
.al-page .al-section-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.al-page .al-section-sub { font-size: 16.5px; line-height: 1.8; color: var(--al-muted); margin: 14px 0 0; }
.al-page .al-section-sub.light { color: rgba(255, 255, 255, .72); }

/* Video responsive 16:9 */
.al-page .al-video { position: relative; width: 100%; max-width: 900px; margin: 0 auto; aspect-ratio: 16 / 9;
    border-radius: 16px; overflow: hidden; background: #000;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .28); border: 1px solid rgba(197, 160, 89, .22); }
.al-page .al-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── ① HERO SLIDER — CHỈ ẢNH (full-width, fade, không cắt ảnh) ───────────── */
.al-hero-slider { position: relative; width: 100%; max-height: 100vh; overflow: hidden;
    background: #14110c; line-height: 0; }
.al-hero-track { display: grid; }
/* Mọi slide chồng lên cùng 1 ô grid → chiều cao = ảnh (không crop), fade bằng opacity */
.al-hero-slide { grid-column: 1; grid-row: 1; display: block; width: 100%; height: auto;
    opacity: 0; transition: opacity .9s ease; }
.al-hero-slide.is-active { opacity: 1; }
.al-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 28px;
    color: #fff; background: rgba(20, 17, 12, .38); border: 1px solid rgba(255, 255, 255, .35);
    display: flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s; }
.al-hero-nav:hover { background: rgba(197, 160, 89, .85); border-color: transparent; }
.al-hero-prev { left: 22px; } .al-hero-next { right: 22px; }
.al-hero-dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; line-height: 0;
    display: flex; gap: 10px; justify-content: center; }
.al-hero-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .45); border: 1px solid rgba(255, 255, 255, .7); transition: background .25s, transform .25s; }
.al-hero-dot.is-active { background: var(--al-gold); border-color: var(--al-gold); transform: scale(1.15); }

/* ── ② Hành trình (video, nền trắng) ────────────────────────────────────── */
.al-journey { background: #fff; }

/* ── ③ Bản hùng ca — story 2 cột ────────────────────────────────────────── */
.al-story { background: var(--al-band); }
.al-story-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.al-story-media { border-radius: 16px; overflow: hidden; box-shadow: 0 26px 56px rgba(26, 26, 26, .16); background: #fff; }
.al-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .6s ease; }
.al-story-media:hover img { transform: scale(1.04); }
.al-story-body .section-title { margin-bottom: 18px; }
.al-story-body p { font-size: 16px; line-height: 1.85; color: var(--al-muted); margin: 0 0 16px; }
.al-story-body p:last-child { margin-bottom: 0; }

/* ── ④ 9 tuyệt phẩm — lưới ảnh thiết kế lớn ─────────────────────────────── */
.al-products { background: #fff; }
.al-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.al-card { background: #fff; border: 1px solid var(--al-line); border-radius: 16px; overflow: hidden;
    display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.165, .84, .44, 1), box-shadow .35s, border-color .35s; }
.al-card:hover { transform: translateY(-6px); box-shadow: var(--al-shadow-hover); border-color: rgba(197, 160, 89, .4); }
.al-card-media { display: flex; align-items: center; justify-content: center; background: var(--al-soft);
    aspect-ratio: 1 / 1; overflow: hidden; padding: 20px; }
.al-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .55s ease; }
.al-card:hover .al-card-media img { transform: scale(1.06); }
.al-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.al-card-name { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 700; margin: 0; }
.al-card-name a { color: var(--al-dark); text-decoration: none; }
.al-card-name a:hover { color: var(--al-gold-dark); }
.al-card-price { font-size: 16px; font-weight: 700; color: var(--al-gold-dark); }
.al-card-price del { color: var(--al-muted); font-weight: 400; font-size: 14px; margin-right: 6px; }
.al-card-price ins { text-decoration: none; }
.al-card-link { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; color: var(--al-gold-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.al-card-link i { transition: transform .25s; }
.al-card-link:hover i { transform: translateX(4px); }

/* ── ⑤ Câu chuyện — video trên nền tối ──────────────────────────────────── */
.al-tale { position: relative; background: radial-gradient(circle at 50% 0%, #2e2e33 0%, var(--al-dark) 62%); overflow: hidden; }

/* ── ⑥ Nghệ thuật & Thẩm mỹ — gallery (3 cột) + video ───────────────────── */
.al-craft { background: var(--al-paper); }
.al-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.al-gal-item { position: relative; display: block; border-radius: 14px; overflow: hidden; cursor: zoom-in;
    aspect-ratio: 1 / 1; background: var(--al-soft); box-shadow: var(--al-shadow); }
.al-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.al-gal-item:hover img { transform: scale(1.07); }
.al-gal-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #fff; background: rgba(26, 26, 26, 0); opacity: 0; transition: opacity .3s, background .3s; }
.al-gal-item:hover .al-gal-zoom { opacity: 1; background: rgba(26, 26, 26, .32); }

/* ── ⑩ Showroom ─────────────────────────────────────────────────────────── */
.al-stores { background: var(--al-band); }
.al-stores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.al-store { background: #fff; border: 1px solid var(--al-line); border-radius: 14px; padding: 26px;
    transition: transform .3s, box-shadow .3s, border-color .3s; }
.al-store:hover { transform: translateY(-4px); box-shadow: var(--al-shadow); border-color: rgba(197, 160, 89, .35); }
.al-store-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: var(--al-dark); margin: 0 0 10px; }
.al-store-addr { font-size: 14.5px; color: var(--al-text); margin: 0 0 6px; line-height: 1.6; }
.al-store-addr i, .al-store-link i { color: var(--al-gold-dark); margin-right: 6px; }
.al-store-note { font-size: 13px; color: var(--al-muted); font-style: italic; margin: 0 0 10px; }
.al-store-link { font-size: 13.5px; font-weight: 700; color: var(--al-gold-dark); text-decoration: none; }
.al-store-link:hover { text-decoration: underline; }

/* ── Lightbox vanilla ───────────────────────────────────────────────────── */
.al-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(17, 15, 10, .94);
    display: flex; align-items: center; justify-content: center; padding: 30px; }
.al-lightbox[hidden] { display: none; }
.al-lb-img { max-width: 88vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.al-lb-close, .al-lb-nav { position: absolute; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    transition: background .2s, opacity .2s; }
.al-lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
.al-lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; line-height: 1; }
.al-lb-prev { left: 22px; } .al-lb-next { right: 22px; }
.al-lb-close:hover, .al-lb-nav:hover { background: rgba(197, 160, 89, .85); border-color: transparent; }
.al-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: #fff; font-size: 13px; letter-spacing: 1px; opacity: .85; font-variant-numeric: tabular-nums; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .al-page .section-title { font-size: 33px; }
    .al-story-grid { grid-template-columns: 1fr; gap: 34px; }
    .al-story-media { max-width: 560px; margin: 0 auto; }
    .al-story-media img { aspect-ratio: 16 / 10; }
    .al-grid { grid-template-columns: repeat(2, 1fr); }
    .al-stores-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .al-page .section-padding { padding: 60px 0; }
    .al-page .section-title { font-size: 27px; }
    .al-page .al-section-head { margin-bottom: 34px; }
    .al-hero-nav { width: 40px; height: 40px; font-size: 24px; }
    .al-hero-prev { left: 12px; } .al-hero-next { right: 12px; }
    .al-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .al-stores-grid { grid-template-columns: 1fr; }
    .al-lb-nav { width: 42px; height: 42px; font-size: 26px; }
    .al-lb-prev { left: 10px; } .al-lb-next { right: 10px; }
}
@media (max-width: 520px) {
    .al-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .al-card-media { padding: 12px; }
    .al-card-body { padding: 14px 15px 18px; }
    .al-card-name { font-size: 17px; }
}