/*
Theme Name: Hành trình Bye Béo
Theme URI: https://byebeo.com/
Author: Bye Béo
Description: Giao diện mẫu cho trang Hành trình Bye Béo. Kiểm tra trên staging trước khi kích hoạt vì theme sẽ thay giao diện toàn website.
Version: 1.0.2
Requires at least: 6.0
Text Domain: hanh-trinh-bye-beo
*/

    :root { --forest:#073b2c; --deep:#052b21; --green:#147a55; --lime:#d9e97e; --mint:#e9f5ec; --cream:#f7f5ec; --ink:#15322c; --muted:#5c716a; --line:#dce7df; --white:#fff; --orange:#eab16f; }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; background:#fff; color:var(--ink); font:16px/1.58 system-ui,-apple-system,"Segoe UI",sans-serif; }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; }
    .wrap { width:min(1180px,calc(100% - 40px)); margin:auto; }
    .eyebrow { display:inline-block; color:var(--green); font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
    h1,h2,h3,p { margin-top:0; }
    h1 { max-width:790px; font-size:clamp(2.7rem,6vw,5.5rem); line-height:1.04; letter-spacing:-.055em; margin-bottom:24px; }
    h2 { font-size:clamp(2.1rem,4vw,3.7rem); line-height:1.13; letter-spacing:-.045em; margin:13px 0 20px; }
    h3 { font-size:1.3rem; line-height:1.25; margin-bottom:10px; }
    p { color:var(--muted); }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:52px; padding:12px 23px; border-radius:8px; font-weight:750; transition:transform .2s,background .2s; }
    .btn:hover { transform:translateY(-2px); }
    .btn-primary { background:var(--lime); color:var(--deep); }
    .btn-dark { background:var(--forest); color:white; }
    .btn-outline { border:1px solid currentColor; }
    .btn-plain { padding-left:0; }
    .btn::after { content:"↗"; font-size:1.15em; }
    .site-head { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
    .site-head .wrap { min-height:74px; display:flex; align-items:center; gap:28px; }
    .brand { display:flex; align-items:center; gap:10px; white-space:nowrap; font-weight:900; font-size:1.24rem; letter-spacing:-.035em; color:var(--forest); }
    .brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:10px 10px 10px 2px; background:linear-gradient(135deg,#54b675,var(--green)); color:white; font-weight:900; }
    nav { display:flex; gap:24px; align-items:center; margin-left:auto; font-size:.9rem; font-weight:650; }
    nav a:hover { color:var(--green); }
    .header-cta { min-height:42px; margin-left:8px; padding:8px 16px; font-size:.88rem; }
    .hero { background:var(--forest); color:white; position:relative; overflow:hidden; }
    .hero:before { content:""; position:absolute; width:620px; height:620px; border:1px solid #ffffff17; border-radius:50%; right:-180px; top:-210px; box-shadow:0 0 0 80px #ffffff06,0 0 0 165px #ffffff04; }
    .hero .wrap { position:relative; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:45px; padding-top:93px; padding-bottom:90px; }
    .hero .eyebrow { color:var(--lime); }
    .hero p { max-width:580px; color:#d1e4d9; font-size:1.13rem; }
    .hero em { font-style:normal; color:var(--lime); }
    .hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
    .hero-note { margin-top:37px; padding-left:18px; border-left:2px solid var(--lime); color:#c7ded2; font-size:.87rem; }
    .map { position:relative; min-height:550px; padding:26px; border:1px solid #ffffff29; border-radius:24px; background:linear-gradient(145deg,#135843,#082f25); box-shadow:0 25px 65px #001c155c; overflow:hidden; }
    .map:before { content:""; position:absolute; width:430px; height:430px; border:2px dashed #b6d38365; border-radius:50%; top:66px; right:-120px; transform:rotate(-20deg); }
    .map-label { position:relative; color:#c6e6d3; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; }
    .map-line { position:absolute; left:57px; top:97px; bottom:60px; width:2px; background:linear-gradient(var(--lime),#83bd96); }
    .map-card { position:relative; display:grid; grid-template-columns:53px 1fr; gap:15px; padding:15px 16px; margin-top:23px; background:#fffffff2; border-radius:12px; color:var(--forest); box-shadow:0 8px 22px #04241b20; }
    .map-card:nth-of-type(3) { margin-left:38px; }
    .map-card:nth-of-type(4) { margin-left:15px; }
    .map-card:nth-of-type(5) { margin-left:52px; }
    .map-card b { font-size:1.58rem; line-height:1; color:var(--green); }
    .map-card strong { display:block; line-height:1.2; }
    .map-card small { display:block; color:var(--muted); line-height:1.35; margin-top:5px; }
    .intro { padding:100px 0 95px; }
    .intro-grid { display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:70px; }
    .intro h2 { max-width:470px; }
    .intro p { max-width:530px; }
    .quote-card { background:var(--cream); border-radius:24px; padding:39px; display:grid; grid-template-columns:auto 1fr; gap:23px; align-items:start; }
    .quote-icon { display:grid; place-items:center; background:var(--lime); border-radius:50%; width:53px; height:53px; font-size:1.45rem; }
    .quote-card strong { font-size:1.35rem; line-height:1.35; display:block; }
    .quote-card p { margin:14px 0 0; }
    .journey { background:var(--cream); padding:100px 0 105px; }
    .section-lead { max-width:660px; }
    .journey-list { display:grid; grid-template-columns:repeat(4,1fr); gap:17px; margin-top:50px; position:relative; }
    .journey-list:before { content:""; position:absolute; height:2px; background:#bad5be; top:24px; left:11%; right:11%; }
    .step { position:relative; background:#fff; border:1px solid var(--line); border-radius:17px; padding:36px 23px 23px; min-height:320px; }
    .step .num { position:absolute; display:grid; place-items:center; top:-24px; left:23px; width:49px; height:49px; border-radius:50%; background:var(--forest); color:white; font-weight:900; box-shadow:0 0 0 7px var(--cream); }
    .step .symbol { font-size:2.4rem; margin:8px 0 20px; color:var(--green); }
    .step p { font-size:.92rem; }
    .step a { color:var(--green); font-size:.9rem; font-weight:800; border-bottom:1px solid currentColor; }
    .chooser { padding:100px 0; }
    .chooser-shell { display:grid; grid-template-columns:.95fr 1.05fr; gap:55px; align-items:center; }
    .chooser-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; }
    .choice { border:1px solid var(--line); background:white; color:var(--ink); padding:10px 14px; border-radius:40px; cursor:pointer; font-size:.9rem; }
    .choice[aria-selected="true"] { background:var(--forest); color:white; border-color:var(--forest); }
    .recommend { background:var(--mint); border-radius:23px; padding:35px; min-height:315px; display:flex; flex-direction:column; align-items:flex-start; }
    .recommend .eyebrow { margin-bottom:16px; }
    .recommend h3 { font-size:1.7rem; }
    .recommend p { max-width:500px; }
    .recommend .btn { margin-top:auto; }
    .services { background:#f1f7f2; padding:100px 0; }
    .services-head { display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:33px; }
    .services-head p { max-width:440px; }
    .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
    .service { display:flex; flex-direction:column; background:white; border:1px solid var(--line); border-radius:17px; padding:30px; min-height:275px; }
    .service .service-icon { color:var(--green); font-size:2rem; line-height:1; margin-bottom:24px; }
    .service p { font-size:.94rem; }
    .service a { color:var(--green); font-weight:800; margin-top:auto; }
    .expert { padding:100px 0; }
    .expert-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:60px; align-items:center; }
    .expert-photo { min-height:450px; border-radius:22px; background:linear-gradient(145deg,#d3e8d9,#8fbda1); padding:24px; display:flex; align-items:end; }
    .photo-label { background:#fff; border-radius:11px; padding:15px 19px; font-size:.9rem; color:var(--forest); max-width:335px; }
    .check { margin:26px 0 0; padding:0; list-style:none; }
    .check li { margin:13px 0; padding-left:28px; position:relative; }
    .check li:before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }
    .stories { padding:95px 0; background:var(--forest); color:white; }
    .stories .eyebrow { color:var(--lime); }
    .stories p { color:#cbded2; }
    .story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:36px; }
    .story { background:#155240; border:1px solid #ffffff25; border-radius:17px; overflow:hidden; }
    .story-media { aspect-ratio:4/3; background:linear-gradient(135deg,#2b7a5a,#0d3b2d); display:grid; place-items:center; padding:25px; color:#d8f0df; text-align:center; font-size:.88rem; }
    .story-body { padding:23px; }
    .story-body p { margin-bottom:0; font-size:.93rem; }
    .faq { padding:100px 0; }
    .faq-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; }
    details { border-bottom:1px solid var(--line); padding:19px 0; }
    summary { cursor:pointer; font-size:1.05rem; font-weight:730; padding-right:30px; }
    details p { margin:15px 0 0; }
    .cta { background:var(--lime); padding:70px 0; }
    .cta .wrap { display:flex; justify-content:space-between; gap:35px; align-items:center; }
    .cta h2 { max-width:640px; margin-bottom:0; }
    footer { background:var(--deep); color:white; padding:43px 0; }
    footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; }
    footer p { color:#b8d2c6; margin:6px 0 0; font-size:.85rem; }
    footer a { color:#e0efdf; }
    .draft { font-size:.77rem; color:#98afa5; margin-top:17px; }
    @media (max-width:900px) { nav { display:none; } .site-head .wrap { justify-content:space-between; } .hero .wrap,.intro-grid,.chooser-shell,.expert-grid,.faq-grid { grid-template-columns:1fr; } .hero .wrap { gap:40px; padding-top:70px; } .map { min-height:auto; } .journey-list { grid-template-columns:repeat(2,1fr); row-gap:48px; } .journey-list:before { display:none; } .cards,.story-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:620px) { .wrap { width:min(100% - 30px,500px); } .site-head .wrap { min-height:65px; } .header-cta { font-size:.76rem; min-height:39px; padding:8px 11px; } .hero .wrap { padding:66px 0; } .hero p { font-size:1rem; } .map { padding:20px; } .map-line { left:40px; } .map-card { grid-template-columns:37px 1fr; gap:10px; margin:17px 0 0 !important; padding:13px; } .map-card b { font-size:1.2rem; } .intro,.journey,.chooser,.services,.expert,.stories,.faq { padding:72px 0; } .quote-card { padding:25px; grid-template-columns:1fr; } .journey-list,.cards,.story-grid { grid-template-columns:1fr; } .journey-list { gap:46px; } .step { min-height:auto; } .services-head,.cta .wrap,footer .wrap { display:block; } .expert-photo { min-height:310px; } .cta .btn { margin-top:25px; } footer .brand { margin-bottom:20px; } }
    @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }