/**
 * About page — Editorial Luxury redesign (2026-08-11)
 * Giữ class .ab2-* (page-about.php không đổi). Bảng màu brand: đỏ / mực / trắng + nhấn vàng.
 * Serif display = system serif (Windows/Mac) cho cảm giác tạp chí cao cấp.
 */

.hp-main--about{--ab-display:"Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;--ab-cream:#faf8f4;/* off-white ấm cho nền tiết diện */ --ab-hair:color-mix(in srgb, var(--ink) 9%, transparent);--ab-soft:0 34px 70px -38px rgba(15,20,25,.24);--ab-soft-red:0 30px 60px -30px color-mix(in srgb, var(--red) 34%, transparent);--ab-ease:cubic-bezier(.32,.72,0,1);padding:10px 0 80px;}
[data-theme="dark"] .hp-main--about{--ab-cream:var(--bg-2);}
/* ==== HERO — magazine cover ==== */
.ab2-hero{position:relative;margin:0 0 clamp(36px, 4vw, 60px);border-radius:26px;overflow:hidden;min-height:560px;display:flex;align-items:flex-end;background:radial-gradient(120% 140% at 15% 0%, #16181d 0%, #0a0b0e 60%, #050506 100%);color:#fff;box-shadow:var(--ab-soft);}
.ab2-hero-bg{position:absolute;inset:0;z-index:1;opacity:.42;}
.ab2-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 28%;filter:grayscale(.15) saturate(1.02) contrast(1.02);}
/* vignette + màn tối gradient để chữ nổi + chất điện ảnh */
.ab2-hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg, rgba(5,6,8,.92) 2%, rgba(5,6,8,.35) 46%, transparent 78%), radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.55), transparent 60%);}
/* hairline vàng mảnh ở mép trên — chi tiết luxury */
.ab2-hero::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 85%, #fff) 45%, var(--red) 70%, transparent);opacity:.4;}
.ab2-hero-content{position:relative;z-index:3;padding:clamp(32px, 5vw, 68px);max-width:820px;}
.ab2-hero-meta{display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:26px;padding:7px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:100px;backdrop-filter:blur(10px);}
.ab2-issue{color:var(--red-ink);}
.ab2-dot{opacity:.45;}
.ab2-hero-title{font-family:var(--ab-display);font-size:clamp(40px, 6.4vw, 76px);font-weight:600;line-height:1.04;letter-spacing:-.015em;margin:0 0 24px;color:#fff;}
.ab2-hero-title em{font-style:italic;color:var(--red-ink);font-weight:600;}
.ab2-hero-sub{font-size:clamp(15px, 1.4vw, 18px);line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 34px;max-width:600px;}
.ab2-hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.ab2-hero-cta .btn{padding:14px 28px;font-size:14.5px;border-radius:100px;transition:transform .5s var(--ab-ease), box-shadow .5s var(--ab-ease), background .3s ease;}
.ab2-hero-cta .btn:active{transform:scale(.98);}
.ab2-hero-cta .btn:not(.ghost):hover{box-shadow:0 16px 34px -12px color-mix(in srgb, var(--red) 70%, transparent);transform:translateY(-2px);}
.ab2-hero-cta .btn.ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.28);}
.ab2-hero-cta .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);transform:translateY(-2px);}
/* ==== STATS — hairline strip, serif numbers ==== */
.ab2-stats{display:grid;grid-template-columns:repeat(4, 1fr);gap:0;margin:0 0 clamp(38px, 4vw, 64px);background:var(--bg);border:1px solid var(--ab-hair);border-radius:20px;overflow:hidden;box-shadow:var(--ab-soft);}
[data-theme="dark"] .ab2-stats{background:var(--bg-2);}
.ab2-stat{padding:clamp(28px, 4vw, 46px) 24px;text-align:center;position:relative;}
.ab2-stat + .ab2-stat::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:var(--ab-hair);}
.ab2-stat-n{font-family:var(--ab-display);font-size:clamp(38px, 4.6vw, 56px);font-weight:600;color:var(--red-ink);line-height:1;letter-spacing:-.02em;margin-bottom:10px;}
.ab2-stat-l{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.16em;text-transform:uppercase;}
/* ==== SECTION HEAD ==== */
.ab2-section-head{margin:0 0 clamp(32px, 4.4vw, 52px);max-width:720px;}
.ab2-kicker{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--red-ink);letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;}
.ab2-kicker::before{content:"";display:inline-block;width:26px;height:1.5px;border-radius:2px;background:linear-gradient(90deg, var(--red), color-mix(in srgb, var(--red) 80%, var(--red)));vertical-align:middle;margin-right:11px;}
.ab2-section-head h2, .ab2-story-left h2{font-family:var(--ab-display);font-size:clamp(28px, 3.8vw, 46px);font-weight:600;line-height:1.12;letter-spacing:-.012em;margin:0;color:var(--ink);}
.ab2-section-head h2 em, .ab2-story-left h2 em, .ab2-cta h2 em{font-style:italic;color:var(--red-ink);}
/* ==== STORY ==== */
.ab2-story{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(36px, 5vw, 72px);margin:0 0 clamp(38px, 4vw, 64px);padding:0 0 clamp(34px, 4vw, 52px);border-bottom:1px solid var(--ab-hair);}
.ab2-story-left{padding-top:6px;}
.ab2-story-right p{font-size:16px;line-height:1.85;color:var(--ink-2);margin:0 0 20px;}
.ab2-story-right p strong{color:var(--ink);font-weight:700;}
.ab2-lead{font-family:var(--ab-display) !important;font-size:clamp(19px, 2vw, 24px) !important;line-height:1.5 !important;color:var(--ink) !important;font-weight:500;font-style:italic;}
/* ==== VALUES — double-bezel cards ==== */
.ab2-values{margin:0 0 clamp(38px, 4vw, 64px);}
.ab2-values-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px;}
.ab2-value{position:relative;isolation:isolate;background:linear-gradient(180deg, var(--bg), var(--ab-cream));border:1px solid var(--ab-hair);border-radius:22px;padding:30px 26px 26px;overflow:hidden;box-shadow:0 22px 46px -32px rgba(15,20,25,.22);transition:transform .6s var(--ab-ease), box-shadow .6s var(--ab-ease), border-color .6s var(--ab-ease);}
[data-theme="dark"] .ab2-value{background:linear-gradient(180deg, var(--bg-2), var(--bg-3));}
/* vầng sáng màu ở góc */
.ab2-value::before{content:"";position:absolute;top:-34px;right:-34px;width:132px;height:132px;border-radius:50%;background:var(--vc, var(--red));opacity:.09;transition:opacity .6s var(--ab-ease), transform .6s var(--ab-ease);z-index:-1;}
.ab2-value:hover{transform:translateY(-8px);border-color:color-mix(in srgb, var(--vc, var(--red)) 40%, var(--ab-hair));box-shadow:0 32px 62px -30px color-mix(in srgb, var(--vc, var(--red)) 42%, transparent);}
.ab2-value:hover::before{opacity:.16;transform:scale(1.2);}
.ab2-v-icon{width:60px;height:60px;border-radius:17px;background:linear-gradient(140deg, var(--vc, var(--red)), color-mix(in srgb, var(--vc, var(--red)) 58%, #000));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:23px;box-shadow:0 14px 28px -10px color-mix(in srgb, var(--vc, var(--red)) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.25);margin-bottom:20px;transition:transform .6s var(--ab-ease);}
.ab2-value:hover .ab2-v-icon{transform:translateY(-2px) scale(1.05) rotate(-4deg);}
.ab2-v-num{position:absolute;top:26px;right:26px;font-family:var(--ab-display);font-size:34px;font-weight:600;color:var(--vc, var(--red));opacity:.18;line-height:1;}
.ab2-value h3{font-size:19px;font-weight:700;margin:0 0 8px;color:var(--ink);letter-spacing:-.01em;}
.ab2-value p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6;}
/* ==== MISSIONS ==== */
.ab2-missions{margin:0 0 clamp(38px, 4vw, 64px);}
.ab2-mission{display:grid;grid-template-columns:380px 1fr;gap:clamp(36px, 5vw, 64px);align-items:center;margin-bottom:clamp(34px, 4vw, 52px);padding-bottom:clamp(34px, 4vw, 52px);border-bottom:1px solid var(--ab-hair);}
.ab2-mission:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0;}
.ab2-mission.reverse{grid-template-columns:1fr 380px;}
.ab2-mission.reverse .ab2-m-img{order:2;}
.ab2-mission.reverse .ab2-m-body{order:1;}
.ab2-m-img{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(140deg, var(--ab-cream), var(--bg));aspect-ratio:1/1;padding:10px;/* khung double-bezel */ border:1px solid var(--ab-hair);box-shadow:var(--ab-soft);}
.ab2-m-img img{width:100%;height:100%;object-fit:cover;border-radius:16px;transition:transform .8s var(--ab-ease);}
.ab2-mission:hover .ab2-m-img img{transform:scale(1.03);}
.ab2-m-num{position:absolute;top:20px;left:20px;font-family:var(--ab-display);font-size:17px;font-weight:600;color:#fff;background:linear-gradient(135deg, var(--red), #a5121a);padding:8px 17px;border-radius:100px;line-height:1;letter-spacing:.04em;z-index:2;box-shadow:0 12px 24px -8px color-mix(in srgb, var(--red) 60%, transparent);}
.ab2-m-body h3{font-family:var(--ab-display);font-size:clamp(24px, 2.8vw, 32px);font-weight:600;margin:0 0 16px;color:var(--ink);letter-spacing:-.01em;line-height:1.15;}
.ab2-m-lead{font-size:17px;line-height:1.62;color:var(--ink);font-weight:500;margin:0 0 16px;}
.ab2-m-text{font-size:14.5px;line-height:1.8;color:var(--ink-2);margin:0 0 24px;}
.ab2-m-tags{display:flex;flex-wrap:wrap;gap:8px;}
.ab2-m-tag{font-size:12px;font-weight:600;padding:6px 14px;background:color-mix(in srgb, var(--red) 8%, var(--bg));color:var(--red-ink);border:1px solid color-mix(in srgb, var(--red) 16%, transparent);border-radius:100px;transition:background .4s var(--ab-ease), color .4s var(--ab-ease);}
.ab2-m-tag:hover{background:var(--red);color:#fff;}
[data-theme="dark"] .ab2-m-tag{background:rgba(221,51,51,.16);color:#ff8f8f;border-color:rgba(221,51,51,.3);}
/* ==== PRESS (dùng card .press-card của main.css; ở đây chỉ nhịp section) ==== */
.ab2-press{margin:0 0 clamp(38px, 4vw, 64px);}
/* ==== TESTIMONIALS — double-bezel quote cards ==== */
.ab2-testimonials{margin:0 0 clamp(38px, 4vw, 64px);}
.ab2-test-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;}
.ab2-test-card{position:relative;background:var(--bg);border:1px solid var(--ab-hair);border-radius:22px;padding:30px 30px 26px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--ab-soft);transition:transform .6s var(--ab-ease), box-shadow .6s var(--ab-ease);}
[data-theme="dark"] .ab2-test-card{background:var(--bg-2);}
.ab2-test-card:hover{transform:translateY(-6px);box-shadow:0 40px 70px -34px rgba(15,20,25,.3);}
/* dấu ngoặc kép trang trí */
.ab2-test-card::before{content:"\201C";position:absolute;top:8px;right:24px;font-family:var(--ab-display);font-size:92px;line-height:1;color:var(--red-ink);opacity:.1;}
.ab2-test-stars{color:#f5a524;font-size:15px;letter-spacing:3px;}
.ab2-test-card p{font-family:var(--ab-display);font-size:16px;line-height:1.62;color:var(--ink);margin:0;font-style:italic;flex:1;}
.ab2-test-author{display:flex;align-items:center;gap:13px;margin-top:4px;}
.ab2-test-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg, var(--red), #a5121a);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;box-shadow:0 10px 20px -8px color-mix(in srgb, var(--red) 60%, transparent);}
.ab2-test-name{font-size:14px;font-weight:700;color:var(--ink);}
.ab2-test-role{font-size:12.5px;color:var(--muted);}
/* ==== CTA (nếu render) ==== */
.ab2-cta{position:relative;overflow:hidden;background:radial-gradient(120% 160% at 0% 0%, #1a1c22, #0a0b0e);border-radius:26px;padding:clamp(40px, 5vw, 64px);display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:center;color:#fff;box-shadow:var(--ab-soft);}
.ab2-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg, transparent, var(--red) 45%, var(--red) 70%, transparent);opacity:.4;}
.ab2-cta h2{font-family:var(--ab-display);color:#fff;}
.ab2-cta h2 em{color:var(--red-ink);}
.ab2-cta-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;}
.ab2-cta-actions .btn{background:#fff;color:var(--ink);padding:14px 26px;font-weight:700;border-radius:100px;transition:transform .5s var(--ab-ease);}
.ab2-cta-actions .btn:hover{transform:translateY(-2px);background:var(--bg-2);}
.ab2-cta-actions .btn.ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.4);}
.ab2-cta-actions .btn.ghost:hover{background:rgba(255,255,255,.2);}
/* ==== RESPONSIVE ==== */
@media(max-width:1080px){
  .ab2-values-grid{grid-template-columns:repeat(2, 1fr);}
.ab2-test-grid{grid-template-columns:repeat(2, 1fr);}
.ab2-stats{grid-template-columns:repeat(2, 1fr);}
.ab2-stat:nth-child(3)::before, .ab2-stat:nth-child(1)::before{display:none;}
.ab2-mission, .ab2-mission.reverse{grid-template-columns:300px 1fr;}
}
@media(max-width:720px){
  .hp-main--about{padding-bottom:72px;}
.ab2-hero{min-height:440px;border-radius:20px;}
.ab2-story{grid-template-columns:1fr;}
.ab2-values-grid, .ab2-test-grid{grid-template-columns:1fr;}
.ab2-mission, .ab2-mission.reverse{grid-template-columns:1fr;gap:22px;}
.ab2-mission.reverse .ab2-m-img{order:1;}
.ab2-cta{grid-template-columns:1fr;}
.ab2-stat + .ab2-stat::before{display:none;}
.ab2-stat:nth-child(even)::before{display:block;}
}