/* ============================================================
   SÁNG KIẾN SỐ - Giao diện chuyên nghiệp (index + chi tiết)
   Font: Be Vietnam Pro (local)
   ============================================================ */

/* --- FONT LOCAL --- */
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('../fonts/BeVietnamPro-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }

/* --- BIẾN & RESET --- */
:root {
    --brand:        #166534;
    --brand-dark:   #14532d;
    --brand-deep:   #0d3b1e;
    --gold:         #d4a843;
    --gold-soft:    #f6ead0;
    --ink:          #1f2937;
    --muted:        #6b7280;
    --line:         #e5e7eb;
    --bg:           #f5f6f8;
    --card:         #ffffff;
    --danger:       #dc2626;
    --radius:       16px;
    --shadow:       0 4px 16px rgba(16, 58, 33, .08);
    --shadow-lg:    0 18px 45px rgba(16, 58, 33, .16);
    --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.7; font-size:16px; }
section[id], div[id] { scroll-margin-top:86px; }
img { max-width:100%; display:block; }
a { color:var(--brand); text-decoration:none; }
ul { list-style:none; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.text-muted { color:var(--muted); }

/* ============================================================
   THANH ĐIỀU HƯỚNG (NAV) + THANH ĐỊA CHỈ TRÊN CÙNG
   ============================================================ */
.topbar {
    background:var(--brand-deep); color:#d1e7d8; font-size:.8rem;
    padding:6px 0; letter-spacing:.2px;
}
.topbar .container { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.topbar a { color:#eaf6ee; font-weight:600; }
.topbar a:hover { color:var(--gold); }
.topbar .topbar-left { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.topbar .topbar-right a { opacity:.75; }
.topbar .topbar-right a:hover { opacity:1; }

.site-nav {
    position:sticky; top:0; z-index:900;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; color:var(--ink); letter-spacing:.5px; }
.brand .brand-badge {
    width:40px; height:40px; border-radius:11px; flex:0 0 auto;
    background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
    box-shadow:0 4px 10px rgba(22,101,52,.35);
}
.brand small { display:block; font-size:.62rem; font-weight:600; color:var(--gold); letter-spacing:1.2px; text-transform:uppercase; margin-top:-2px; }
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a { color:#374151; font-weight:600; font-size:.95rem; position:relative; padding:6px 0; }
.nav-links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--brand); transition:width .25s; border-radius:2px; }
.nav-links a:hover { color:var(--brand); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a.active { color:var(--brand); }
.nav-hotline { display:flex; align-items:center; gap:10px; background:var(--gold-soft); border:1px solid #ecd9ad; padding:8px 14px; border-radius:50px; font-size:.85rem; font-weight:700; color:var(--brand-dark); }
.nav-hotline i { color:var(--gold); }
.nav-burger { display:none; background:none; border:none; font-size:1.4rem; color:var(--ink); cursor:pointer; padding:6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position:relative; color:#fff; text-align:center;
    background:linear-gradient(rgba(10,40,22,.78), rgba(13,59,30,.85)), url('../images/hero-background.jpg') center/cover no-repeat;
    padding:90px 0 110px;
}
.hero::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:60px; background:var(--bg); clip-path:ellipse(120% 100% at 50% 100%); }
.hero-kicker { display:inline-block; background:rgba(212,168,67,.18); border:1px solid rgba(212,168,67,.5); color:var(--gold); font-size:.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:7px 18px; border-radius:50px; margin-bottom:18px; }
.hero h1 { font-size:clamp(2rem, 5vw, 3.4rem); font-weight:800; letter-spacing:1px; text-shadow:0 3px 18px rgba(0,0,0,.35); }
.hero h1 span { color:var(--gold); }
.hero p { font-size:clamp(.95rem, 2vw, 1.15rem); opacity:.92; max-width:720px; margin:14px auto 0; }
.hero-search {
    margin:34px auto 0; max-width:620px; position:relative; z-index:2;
    background:#fff; border-radius:60px; padding:7px; display:flex; align-items:center;
    box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.hero-search i { color:var(--muted); margin:0 14px; font-size:1.05rem; }
.hero-search input { flex:1; border:none; outline:none; font-family:inherit; font-size:1rem; padding:9px 0; background:transparent; min-width:0; }
.hero-search button {
    background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border:none;
    border-radius:50px; padding:12px 26px; font-weight:700; font-family:inherit; cursor:pointer;
    transition:.25s; font-size:.95rem; white-space:nowrap;
}
.hero-search button:hover { filter:brightness(1.1); transform:translateY(-1px); }
.hero-stats { display:flex; justify-content:center; gap:44px; margin-top:36px; flex-wrap:wrap; position:relative; z-index:2; }
.hero-stat b { display:block; font-size:1.7rem; font-weight:800; color:#fff; }
.hero-stat span { font-size:.8rem; opacity:.8; }

/* ============================================================
   THANH ĐỊA CHỈ / PHÂN LOẠI (category + giá)
   ============================================================ */
.catbar-wrap { position:relative; z-index:5; margin-top:-58px; }
.catbar {
    background:var(--card); border-radius:18px; box-shadow:var(--shadow-lg);
    padding:16px; border:1px solid var(--line);
}
.catbar-label { font-size:.72rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); margin:6px 0 10px; display:flex; align-items:center; gap:8px; }
.catbar-label i { color:var(--gold); }
.chips { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.chip {
    flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:#4b5563;
    padding:9px 18px; border-radius:50px; font-weight:600; font-size:.88rem; cursor:pointer;
    transition:.2s; font-family:inherit;
}
.chip:hover { border-color:var(--brand); color:var(--brand); }
.chip.active { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; border-color:var(--brand-dark); box-shadow:0 5px 14px rgba(22,101,52,.3); }
.chip .chip-count { opacity:.65; font-weight:600; margin-left:5px; font-size:.8rem; }
.catbar-row2 { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; flex-wrap:wrap; }
.price-chips { display:flex; gap:8px; flex-wrap:wrap; }
.price-chips .chip { padding:7px 14px; font-size:.8rem; }
.filter-right { display:flex; align-items:center; gap:10px; }
.result-count { font-size:.82rem; color:var(--muted); font-weight:600; }
.sort-select {
    font-family:inherit; font-size:.85rem; font-weight:600; color:#374151; cursor:pointer;
    border:1.5px solid var(--line); border-radius:50px; padding:8px 12px; background:#fff; outline:none;
}
.sort-select:focus { border-color:var(--brand); }

/* ============================================================
   LƯỚI SẢN PHẨM
   ============================================================ */
.section-title { display:flex; align-items:center; gap:14px; margin:46px 0 26px; }
.section-title h2 { font-size:1.5rem; font-weight:800; color:var(--ink); }
.section-title h2 small { display:block; font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:1.5px; }
.section-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); }

.sk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }

.sk-card {
    background:var(--card); border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--line); box-shadow:var(--shadow);
    display:flex; flex-direction:column;
    transition:transform .3s, box-shadow .3s;
    position:relative;
}
.sk-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.sk-card-media { position:relative; aspect-ratio:4/3; background:#eef1f4; overflow:hidden; display:block; }
.sk-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.sk-card:hover .sk-card-media img { transform:scale(1.06); }
.sk-card-badges { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; z-index:2; }
.sk-badge-cat { background:rgba(13,59,30,.85); backdrop-filter:blur(4px); color:#fff; font-size:.72rem; font-weight:700; padding:5px 12px; border-radius:50px; letter-spacing:.3px; }
.sk-badge-hot { background:linear-gradient(135deg,#f59e0b,#dc2626); color:#fff; font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:50px; box-shadow:0 4px 10px rgba(220,38,38,.4); }
.sk-card-media .sk-zoom-hint { position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.9); color:var(--ink); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; opacity:0; transition:.3s; box-shadow:0 4px 10px rgba(0,0,0,.15); }
.sk-card:hover .sk-zoom-hint { opacity:1; }

.sk-card-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.sk-card-body h3 { font-size:1.06rem; font-weight:700; line-height:1.45; margin-bottom:6px; }
.sk-card-body h3 a { color:var(--ink); }
.sk-card-body h3 a:hover { color:var(--brand); }
.sk-card-tagline { font-size:.83rem; color:var(--brand); font-weight:600; margin-bottom:8px; }
.sk-card-desc { font-size:.86rem; color:var(--muted); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; }
.sk-card-foot { margin-top:auto; padding-top:14px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sk-price { font-size:1.25rem; font-weight:800; color:var(--danger); }
.sk-currency { font-size:.9rem; }
.sk-price-contact { font-size:1rem; font-weight:800; color:var(--brand); background:var(--gold-soft); padding:5px 12px; border-radius:50px; border:1px dashed #d4a843; }
.sk-card-actions { display:flex; gap:8px; }
.btn { display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:.85rem; border-radius:10px; padding:10px 16px; transition:.2s; }
.btn-sm { padding:8px 13px; font-size:.8rem; }
.btn-primary { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; box-shadow:0 5px 14px rgba(22,101,52,.3); }
.btn-primary:hover { filter:brightness(1.1); transform:translateY(-2px); }
.btn-buy { background:linear-gradient(135deg,#e11d48,#be123c); color:#fff; box-shadow:0 5px 14px rgba(225,29,72,.3); }
.btn-buy:hover { filter:brightness(1.08); transform:translateY(-2px); }
.btn-outline { background:#fff; color:#374151; border:1.5px solid var(--line); }
.btn-outline:hover { border-color:var(--brand); color:var(--brand); }
.btn-gold { background:linear-gradient(135deg,#e0b54a,#b8891f); color:#fff; }
.btn-gold:hover { filter:brightness(1.08); transform:translateY(-2px); }
.btn-block { width:100%; justify-content:center; }

/* Không tìm thấy */
.sk-empty { text-align:center; padding:70px 20px; color:var(--muted); display:none; }
.sk-empty i { font-size:3rem; color:#d1d5db; margin-bottom:14px; }
.sk-empty.show { display:block; }

/* ============================================================
   KHU VỰC TÁC GIẢ (trang chủ)
   ============================================================ */
.author-section { margin:56px 0; background:var(--card); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
.author-head { background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#fff; padding:26px 34px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.author-head .ah-icon { width:52px; height:52px; border-radius:14px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--gold); }
.author-head h3 { font-size:1.25rem; font-weight:800; }
.author-head p { font-size:.85rem; opacity:.85; margin:0; }
.author-body { display:grid; grid-template-columns:220px 1fr; gap:0; }
.author-photo { position:relative; }
.author-photo img { width:100%; height:100%; object-fit:cover; min-height:280px; }
.author-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(13,59,30,.25)); }
.author-info { padding:30px 34px; }
.author-info .a-name { font-size:1.4rem; font-weight:800; color:var(--ink); }
.author-info .a-rank { display:inline-block; margin-top:6px; background:var(--gold-soft); color:#8a6a1f; font-size:.75rem; font-weight:700; padding:4px 12px; border-radius:50px; }
.author-info .a-bio { margin:14px 0 18px; color:#4b5563; font-size:.94rem; }
.a-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px; }
.a-box { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:18px; }
.a-box h4 { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; color:var(--brand); margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.a-award { font-size:.84rem; color:#374151; padding:6px 0 6px 22px; position:relative; border-bottom:1px dashed var(--line); }
.a-award:last-child { border-bottom:none; }
.a-award::before { content:"\f091"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--gold); font-size:.85rem; }
.a-press { font-size:.85rem; padding:7px 0 7px 24px; position:relative; }
.a-press::before { content:"\f15c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; color:var(--brand); }
.a-press a { color:#374151; font-weight:600; }
.a-press a:hover { color:var(--brand); }
.a-press .a-source { display:block; font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.author-contact { margin-top:22px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.sk-social { width:42px; height:42px; border-radius:12px; background:#f3f4f6; color:#374151; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; transition:.25s; }
.sk-social:hover { background:var(--brand); color:#fff; transform:translateY(-3px); }

/* ============================================================
   TRANG CHI TIẾT
   ============================================================ */
.page-top { background:linear-gradient(135deg,var(--brand-deep),var(--brand)); color:#fff; padding:44px 0 60px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.83rem; color:#cbe6d4; flex-wrap:wrap; margin-bottom:14px; }
.breadcrumb a { color:#eaf6ee; font-weight:600; }
.breadcrumb a:hover { color:var(--gold); }
.breadcrumb i { font-size:.7rem; opacity:.7; }
.breadcrumb .current { color:var(--gold); font-weight:600; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-top h1 { font-size:clamp(1.5rem,3.4vw,2.3rem); font-weight:800; line-height:1.35; }
.page-top .p-tagline { color:#dcefe3; font-style:italic; font-size:1rem; margin-top:8px; max-width:760px; }
.page-top .p-meta { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.p-meta .meta-chip { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:.8rem; font-weight:600; padding:6px 14px; border-radius:50px; display:inline-flex; align-items:center; gap:7px; }
.p-meta .meta-chip i { color:var(--gold); }

.detail-wrap { position:relative; z-index:2; margin-top:-34px; }
.detail-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:start; }

/* Gallery */
.gallery { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.gallery-main { position:relative; border-radius:12px; overflow:hidden; background:#101418; aspect-ratio:4/3; cursor:zoom-in; }
.gallery-main img { width:100%; height:100%; object-fit:contain; }
.gallery-main .g-zoom-hint { position:absolute; right:14px; bottom:14px; background:rgba(255,255,255,.92); color:var(--ink); border-radius:50px; padding:8px 14px; font-size:.78rem; font-weight:700; display:flex; align-items:center; gap:7px; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.gallery-thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:10px; margin-top:12px; padding-bottom:4px; }
.g-thumb { width:100%; height:57px; border-radius:9px; overflow:hidden; border:2px solid transparent; cursor:pointer; opacity:.72; transition:.2s; padding:0; background:none; }
.g-thumb img { width:100%; height:100%; object-fit:cover; }
.g-thumb:hover { opacity:1; }
.g-thumb.active { border-color:var(--brand); opacity:1; box-shadow:0 3px 10px rgba(22,101,52,.3); }

/* Panel thông tin */
.detail-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px; }
.dp-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:13px 0; border-bottom:1px dashed var(--line); }
.dp-row:last-child { border-bottom:none; }
.dp-label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.dp-label i { color:var(--gold); }
.dp-value { font-weight:700; color:var(--ink); font-size:.95rem; text-align:right; }
.dp-value a { color:var(--brand); }
.dp-price { font-size:1.9rem; font-weight:800; color:var(--danger); }
.dp-price-contact { font-size:1.2rem; font-weight:800; color:var(--brand); background:var(--gold-soft); border:1px dashed #d4a843; padding:8px 16px; border-radius:50px; }
.detail-actions { display:grid; gap:10px; margin-top:8px; }
.detail-actions .btn { justify-content:center; padding:13px; font-size:.95rem; }

/* Tiểu sử tác giả (sidebar chi tiết) */
.mini-author { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; text-align:center; margin-top:28px; }
.mini-author img { width:86px; height:86px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--gold-soft); box-shadow:0 6px 16px rgba(0,0,0,.12); }
.mini-author .ma-name { font-weight:800; color:var(--ink); }
.mini-author .ma-title { font-size:.8rem; color:var(--muted); margin-bottom:14px; }
.mini-author .ma-socials { display:flex; justify-content:center; gap:8px; }

/* Nội dung thuyết minh */
.content-box { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:34px; margin-top:28px; }
.content-box h2 { font-size:1.3rem; font-weight:800; color:var(--ink); padding-bottom:14px; border-bottom:2px solid var(--brand); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.content-box h2 i { color:var(--gold); }
.sk-content-h { font-size:1.05rem; font-weight:800; color:var(--brand-dark); margin:22px 0 10px; display:flex; align-items:center; gap:9px; }
.sk-content-h::before { content:""; width:6px; height:20px; background:linear-gradient(180deg,var(--gold),var(--brand)); border-radius:3px; flex:0 0 auto; }
.content-box p { margin-bottom:12px; color:#374151; }
.sk-content-ul, .sk-content-ol { margin:10px 0 16px; padding-left:6px; }
.sk-content-ul li, .sk-content-ol li { position:relative; padding:5px 0 5px 30px; color:#374151; font-size:.95rem; }
.sk-content-ul li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:4px; color:var(--brand); font-size:.85rem; top:8px; }
.sk-content-ol { counter-reset:sk; }
.sk-content-ol li { counter-increment:sk; padding-left:34px; }
.sk-content-ol li::before { content:counter(sk); position:absolute; left:0; top:7px; width:22px; height:22px; background:var(--brand); color:#fff; border-radius:50%; font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* Sáng kiến liên quan */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; margin-top:20px; }
.related-grid .sk-card-media { aspect-ratio:16/10; }

/* ============================================================
   LIGHTBOX - PHÓNG TO ẢNH
   ============================================================ */
.lightbox {
    position:fixed; inset:0; z-index:2000; display:none;
    background:rgba(8,12,10,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    user-select:none; touch-action:none;
}
.lightbox.open { display:block; }
.lb-toolbar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; z-index:5; background:linear-gradient(180deg,rgba(0,0,0,.45),transparent); }
.lb-toolbar .lb-title { color:#fff; font-size:.85rem; font-weight:600; opacity:.9; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-controls { display:flex; gap:8px; }
.lb-btn { width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); color:#fff; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
.lb-btn:hover { background:rgba(255,255,255,.25); }
.lb-btn.close { background:rgba(220,38,38,.75); border-color:transparent; }
.lb-btn.close:hover { background:#dc2626; }
.lb-stage { position:absolute; inset:0; overflow:hidden; }
.lb-img {
    position:absolute; top:50%; left:50%; max-width:92vw; max-height:88vh;
    transform:translate(-50%,-50%); cursor:grab; transition:transform .2s ease;
    box-shadow:0 20px 60px rgba(0,0,0,.5); background:#101418;
    will-change:transform;
}
.lb-img.dragging { cursor:grabbing; transition:none; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:64px; border-radius:14px; border:none; background:rgba(255,255,255,.1); color:#fff; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; z-index:4; }
.lb-nav:hover { background:var(--brand); }
.lb-nav.prev { left:16px; }
.lb-nav.next { right:16px; }
.lb-counter { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:.85rem; font-weight:700; background:rgba(0,0,0,.5); padding:7px 16px; border-radius:50px; z-index:4; }
.lb-zoom-legend { position:absolute; bottom:18px; right:20px; color:rgba(255,255,255,.6); font-size:.72rem; z-index:4; display:none; }
.lb-zoom-legend.show { display:block; }

/* ============================================================
   FOOTER + NÚT NỔI + MODAL
   ============================================================ */
.site-footer { background:var(--brand-deep); color:#bcd8c5; margin-top:60px; }
.footer-top { padding:46px 0 30px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.footer-top h4 { color:#fff; font-size:1rem; font-weight:800; margin-bottom:16px; position:relative; padding-bottom:10px; }
.footer-top h4::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--gold); border-radius:2px; }
.footer-about p { font-size:.88rem; margin-top:12px; }
.footer-links a { display:block; color:#bcd8c5; font-size:.9rem; padding:4px 0; transition:.2s; }
.footer-links a:hover { color:var(--gold); padding-left:6px; }
.footer-contact li { display:flex; gap:10px; align-items:flex-start; font-size:.9rem; margin-bottom:10px; }
.footer-contact i { color:var(--gold); margin-top:5px; width:16px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:.8rem; text-align:center; }
.footer-bottom a { color:#eaf6ee; font-weight:600; }

.floating-contact { position:fixed; bottom:22px; right:22px; z-index:1000; display:flex; flex-direction:column; gap:10px; }
.contact-icon { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.35rem; box-shadow:0 6px 16px rgba(0,0,0,.25); transition:.3s; }
.icon-zalo { background:#0068ff; } .icon-phone { background:#0ca678; }
.contact-icon:hover { transform:scale(1.12); }

/* Modal thanh toán */
.modal-overlay { position:fixed; inset:0; z-index:1500; background:rgba(10,12,10,.65); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:20px; max-width:440px; width:100%; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.35); max-height:94vh; overflow-y:auto; }
.modal-head { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; }
.modal-head h5 { font-size:1.05rem; font-weight:800; }
.modal-close { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; }
.modal-body { padding:22px; text-align:center; }
.modal-body .qr-frame { display:inline-block; background:#fff; padding:10px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); margin:6px 0 14px; }
.modal-body .qr-frame img { max-height:250px; border-radius:8px; }
.transfer-row { display:flex; gap:8px; margin-bottom:12px; }
.transfer-row input { flex:1; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-weight:700; color:var(--danger); font-size:.9rem; outline:none; }
.transfer-row button { border:none; background:#f3f4f6; border-radius:10px; padding:0 14px; cursor:pointer; color:var(--ink); }
.bank-info { margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); text-align:left; font-size:.82rem; color:var(--muted); line-height:1.9; }

/* ============================================================
   HIỆU ỨNG + RESPONSIVE
   ============================================================ */
.animate-on-scroll { opacity:0; transform:translateY(26px); transition:opacity .6s ease-out, transform .6s ease-out; }
.animate-on-scroll.visible { opacity:1; transform:translateY(0); }

@media (max-width:1024px) {
    .detail-grid { grid-template-columns:1fr; }
    .gallery { position:static; }
    .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
    .nav-links { display:none; }
    .nav-burger { display:block; }
    .nav-links.open { display:flex; position:absolute; top:66px; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:10px 0; border-bottom:1px solid var(--line); box-shadow:0 16px 30px rgba(0,0,0,.1); }
    .nav-links.open a { padding:13px 24px; width:100%; }
    .nav-links.open a::after { display:none; }
    .nav-hotline span.nav-hl-text { display:none; }
    .nav-hotline { padding:9px 12px; }
    .hero { padding:70px 0 96px; }
    .hero-stats { gap:26px; }
    .catbar-wrap { margin-top:-46px; }
    .sk-grid { grid-template-columns:1fr; }
    .author-body { grid-template-columns:1fr; }
    .author-photo img { min-height:200px; max-height:260px; }
    .author-info { padding:24px 22px; }
    .footer-top { grid-template-columns:1fr; gap:26px; }
    .detail-panel { padding:20px; }
    .content-box { padding:22px; }
    .lb-nav { width:42px; height:52px; }
    .lb-nav.prev { left:8px; } .lb-nav.next { right:8px; }
    .lb-zoom-legend { display:none; }
}
@media (max-width:420px) {
    .brand small { display:none; }
    .hero-search button span { display:none; }
    .hero-search button { padding:12px 16px; }
    .sk-card-foot { flex-direction:column; align-items:stretch; }
    .sk-card-actions .btn { flex:1; justify-content:center; }
}