:root{--green:#173e2b;--green2:#245c3f;--cream:#f6f0e4;--paper:#fffdf8;--gold:#b3873e;--ink:#1f2721;--muted:#667068;--line:#e7e0d4;--shadow:0 18px 50px rgba(30,53,37,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Be Vietnam Pro',sans-serif;color:var(--ink);background:var(--paper);line-height:1.75}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 40px));margin:auto}.narrow{width:min(820px,calc(100% - 40px));margin:auto}.topbar{height:34px;background:#102d1e;color:#e7dbc4;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:1.8px;font-weight:600}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(23,62,43,.08)}.nav-wrap{height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:54px;height:54px;object-fit:contain}.brand-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-family:'Playfair Display',serif;font-size:20px;border:3px solid #e7d7b4}.brand strong,.brand small{display:block;line-height:1.1}.brand strong{font-family:'Playfair Display',serif;color:var(--green);font-size:18px;letter-spacing:.3px}.brand small{font-size:11px;letter-spacing:2px;color:var(--gold);margin-top:5px;font-weight:700}.main-nav{display:flex;align-items:center;gap:27px}.main-nav a{font-size:13px;font-weight:600;position:relative;padding:31px 0}.main-nav a:after{content:'';position:absolute;height:2px;left:50%;right:50%;bottom:20px;background:var(--green);transition:.25s}.main-nav a:hover:after,.main-nav a.active:after{left:0;right:0}.nav-toggle{display:none;border:0;background:none;font-size:25px}.hero{min-height:680px;background:linear-gradient(120deg,#f4ecdc 0%,#fffaf0 50%,#edf2e8 100%);position:relative;overflow:hidden;display:flex;align-items:center}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:70px;padding:70px 0}.hero-copy h1{font-family:'Playfair Display',serif;font-size:clamp(48px,5.4vw,78px);line-height:1.08;margin:16px 0 24px;color:var(--green);letter-spacing:-1.8px;white-space:nowrap}.hero-copy>p{font-size:17px;color:#4d5b51;max-width:690px}.eyebrow,.section-label{font-size:11px;letter-spacing:2.4px;font-weight:800;color:var(--gold)}.hero-actions{display:flex;gap:12px;margin:32px 0 24px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:6px;font-size:13px;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit}.btn.primary{background:var(--green);color:#fff}.btn.primary:hover{background:var(--green2)}.btn.ghost{border-color:#b8b2a7;color:var(--green);background:rgba(255,255,255,.35)}.hero-points{display:flex;gap:18px;flex-wrap:wrap;color:#607064;font-size:12px}.hero-points span{white-space:nowrap}.hero-visual{display:flex;justify-content:center}.rice-card{width:460px;height:520px;background:linear-gradient(150deg,#264f38,#173e2b);border-radius:230px 230px 26px 26px;position:relative;box-shadow:0 35px 80px rgba(21,62,42,.28);display:flex;align-items:center;justify-content:center;color:white;overflow:hidden;border:7px solid rgba(255,255,255,.45)}.rice-ring{position:absolute;width:360px;height:360px;border:1px solid rgba(229,208,164,.32);border-radius:50%;top:64px}.bowl{width:230px;height:230px;border-radius:50%;background:#f0e5cf;color:var(--green);display:grid;place-items:center;text-align:center;line-height:1.05;font-size:28px;letter-spacing:3px;box-shadow:inset 0 0 0 14px #fff8eb,0 18px 45px rgba(0,0,0,.22);font-family:'Playfair Display',serif;transform:rotate(-5deg)}.bowl strong{font-size:54px;display:block}.rice-copy{position:absolute;bottom:34px;text-align:center}.rice-copy small{display:block;letter-spacing:4px;color:#d9bd84;font-weight:700}.rice-copy b{display:block;font-size:12px;margin-top:6px;font-weight:500}.hero-glow{position:absolute;border-radius:50%;filter:blur(8px);opacity:.55}.hero-glow.one{width:360px;height:360px;background:#d7c294;right:-100px;top:-100px}.hero-glow.two{width:260px;height:260px;background:#b8d0b3;left:-80px;bottom:-80px}.section{padding:86px 0}.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px}.split h2,.section-head h2,.contact-info h2,.cta h2{font-family:'Playfair Display',serif;color:var(--green);font-size:42px;line-height:1.2;margin:10px 0}.split p{margin-top:0;color:#59665d}.text-link{color:var(--green);font-size:13px;font-weight:800;border-bottom:1px solid #b7c4ba;padding-bottom:3px}.features{background:#f1ebdf}.section-head{text-align:center;margin-bottom:40px}.section-head.row{text-align:left;display:flex;align-items:end;justify-content:space-between}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-grid article{background:#fff;padding:34px;border:1px solid #e6ddcd;border-radius:12px;box-shadow:0 10px 30px rgba(68,55,31,.05)}.feature-grid span{font-family:'Playfair Display',serif;color:#c5ad80;font-size:38px}.feature-grid h3{color:var(--green);margin:12px 0 8px}.feature-grid p{color:var(--muted);font-size:14px;margin:0}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.product-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.product-image{height:330px;background:#f3eddf;display:block;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#fff9ec,#e8dcc3);color:var(--green);gap:18px}.image-placeholder span{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-family:'Playfair Display',serif;font-size:30px;border:7px double #dac28e}.image-placeholder b{font-family:'Playfair Display',serif;font-size:23px}.product-body{padding:24px}.product-body small{color:var(--gold);font-size:10px;letter-spacing:1.8px;font-weight:800}.product-body h3{font-family:'Playfair Display',serif;font-size:25px;color:var(--green);margin:5px 0 10px}.product-body p{font-size:13px;color:var(--muted);min-height:46px}.cta{padding:0 0 86px}.cta-box{background:linear-gradient(120deg,#153a28,#275841);color:white;padding:48px 55px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:40px}.cta h2{color:white;margin:8px 0;font-size:39px}.cta p{margin:0;color:#d9e5dc}.section-label.light{color:#e2c58c}.btn.white{background:white;color:var(--green);white-space:nowrap}.page-hero{background:linear-gradient(120deg,#f0e7d6,#f8f5ed);padding:86px 0 78px;border-bottom:1px solid #e5dccd}.page-hero h1{font-family:'Playfair Display',serif;color:var(--green);font-size:clamp(42px,5vw,66px);line-height:1.1;margin:12px 0 18px}.page-hero p{color:#5a675e;max-width:700px;font-size:16px}.story-hero{text-align:center}.story-hero p{margin-left:auto;margin-right:auto}.article-layout{display:grid;grid-template-columns:280px 1fr;gap:70px}.aside-card{background:var(--green);color:white;padding:30px;border-radius:12px;position:sticky;top:120px}.aside-card b{font-family:'Playfair Display',serif;font-size:24px}.aside-card p{font-size:13px;color:#d7e3da}.rich-content{font-size:16px;color:#4e5a52}.rich-content h2,.rich-content h3{font-family:'Playfair Display',serif;color:var(--green)}.rich-content h2{font-size:36px}.rich-content p{margin:0 0 20px}.story-content>p:first-child:first-letter{float:left;font-family:'Playfair Display',serif;font-size:74px;line-height:.85;padding:8px 10px 2px 0;color:var(--green)}.quote-band{background:#173e2b;color:white;padding:50px 0}.quote-band blockquote{margin:0;text-align:center;font-family:'Playfair Display',serif;font-size:36px}.all-products{grid-template-columns:repeat(3,1fr)}.product-detail{padding-top:70px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.detail-image{height:580px;border-radius:18px;overflow:hidden;background:#f3eddf}.detail-image img{width:100%;height:100%;object-fit:cover}.image-placeholder.large span{width:120px;height:120px}.detail-copy h1{font-family:'Playfair Display',serif;color:var(--green);font-size:50px;line-height:1.12;margin:12px 0 18px}.lead{font-size:16px;color:#647067}.info-line{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:14px 0;font-size:13px}.info-line span{color:#788078}.detail-description{border-top:1px solid var(--line);padding-top:18px;margin:0 0 28px;color:#556058}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px}.contact-item{border-top:1px solid var(--line);padding:18px 0}.contact-item small{font-size:10px;letter-spacing:1.6px;color:var(--gold);font-weight:800}.contact-item p{margin:5px 0}.contact-form{background:#f5efe3;padding:34px;border-radius:14px}.contact-form h3{font-family:'Playfair Display',serif;color:var(--green);font-size:28px;margin-top:0}.contact-form label{display:block;font-size:12px;font-weight:700;margin:14px 0 6px}.contact-form input,.contact-form textarea{width:100%;padding:13px 14px;border:1px solid #d8cfbe;border-radius:6px;background:white;font:inherit}.contact-form .btn{margin-top:18px}.alert{padding:12px 14px;border-radius:6px;font-size:13px}.alert.success{background:#dfeee4;color:#235b3c}.alert.error{background:#f5dddd;color:#8a2d2d}.site-footer{background:#102c1e;color:#d4dfd7;padding-top:58px}.footer-grid{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:70px}.footer-brand{font-family:'Playfair Display',serif;font-size:26px;color:white}.footer-brand span{color:#d5b679}.footer-grid p{font-size:13px;color:#aebdb2}.footer-grid h4{color:white;margin-top:0}.footer-grid a{display:block;font-size:13px;margin:9px 0;color:#b8c7bd}.copyright{border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:11px;color:#89a092;padding:18px;margin-top:45px}@media(max-width:1100px){.hero-copy h1{white-space:normal}.main-nav{gap:18px}.hero-grid{gap:30px}.rice-card{width:400px;height:470px}}@media(max-width:850px){.nav-toggle{display:block}.main-nav{display:none;position:absolute;top:84px;left:0;right:0;background:#fffdf8;border-top:1px solid var(--line);padding:10px 24px 20px;box-shadow:0 10px 25px rgba(0,0,0,.08);flex-direction:column;align-items:flex-start;gap:0}.main-nav.open{display:flex}.main-nav a{padding:12px 0;width:100%}.main-nav a:after{display:none}.hero{min-height:auto}.hero-grid,.split,.detail-grid,.contact-grid,.article-layout{grid-template-columns:1fr}.hero-grid{padding:58px 0}.hero-copy h1{font-size:52px}.hero-visual{order:-1}.rice-card{width:340px;height:390px}.rice-ring{width:280px;height:280px;top:42px}.bowl{width:180px;height:180px;font-size:22px}.bowl strong{font-size:40px}.feature-grid,.product-grid,.all-products{grid-template-columns:repeat(2,1fr)}.split{gap:30px}.article-layout{gap:30px}.aside-card{position:static}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.detail-image{height:480px}}@media(max-width:560px){.container,.narrow{width:min(100% - 28px,1180px)}.topbar{font-size:9px;letter-spacing:1px;text-align:center;padding:0 8px}.nav-wrap{height:72px}.brand strong{font-size:15px}.brand-mark{width:42px;height:42px}.main-nav{top:72px}.hero-copy h1{font-size:41px;letter-spacing:-.8px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column;align-items:stretch}.rice-card{width:300px;height:350px}.section{padding:62px 0}.split h2,.section-head h2,.contact-info h2{font-size:34px}.feature-grid,.product-grid,.all-products{grid-template-columns:1fr}.product-image{height:300px}.section-head.row,.cta-box{align-items:flex-start;flex-direction:column}.cta-box{padding:34px 26px}.cta h2{font-size:31px}.page-hero{padding:60px 0}.page-hero h1{font-size:42px}.detail-copy h1{font-size:42px}.detail-image{height:380px}.footer-grid{grid-template-columns:1fr;gap:30px}.footer-grid>div:first-child{grid-column:auto}.quote-band blockquote{font-size:28px}}


/* =========================================================
   HERO TRANG CHỦ - RESPONSIVE HOÀN CHỈNH
========================================================= */

.hero-home{
    position:relative;
    width:100%;
    min-height:570px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-size:cover !important;
    background-position:center right !important;
    background-repeat:no-repeat !important;
}


/* QUAN TRỌNG:
   Không dùng width:100% ở đây vì hero-grid đồng thời là .container
*/
.hero-home .hero-grid{
    width:min(1180px, calc(100% - 48px));
    margin-left:auto;
    margin-right:auto;

    display:block;
    padding:72px 0;
}


/* Nội dung bên trái */
.hero-home .hero-copy{
    position:relative;
    z-index:2;

    width:100%;
    max-width:720px;
}


/* Nhãn nhỏ */
.hero-home .eyebrow{
    margin:0 0 18px;

    font-size:11px;
    line-height:1.4;

    letter-spacing:2.5px;
    font-weight:800;

    color:var(--gold);
}


/* Tiêu đề */
.hero-home .hero-copy h1{
    width:100%;
    max-width:720px;

    margin:0 0 22px;

    font-family:'Playfair Display',serif;

    font-size:clamp(46px, 4.2vw, 68px);
    line-height:1.06;
    letter-spacing:-1.5px;

    white-space:normal;

    color:var(--green);
}


/* Mô tả */
.hero-home .hero-copy > p{
    width:100%;
    max-width:650px;

    margin:0 0 30px;

    font-size:16px;
    line-height:1.75;

    color:#3f5147;
}


/* Nút */
.hero-home .hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin:0 0 25px;
}


.hero-home .hero-actions .btn{
    min-height:48px;
    padding:0 22px;
}


/* Các điểm nổi bật */
.hero-home .hero-points{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:10px 22px;

    margin:0;

    font-size:12px;
    line-height:1.5;

    color:#53685c;
}


.hero-home .hero-points span{
    white-space:nowrap;
}


/* =========================================================
   MÀN HÌNH DESKTOP LỚN
========================================================= */

@media (min-width:1400px){

    .hero-home{
        min-height:610px;
    }

    .hero-home .hero-grid{
        width:min(1240px, calc(100% - 64px));
        padding:82px 0;
    }

    .hero-home .hero-copy{
        max-width:760px;
    }

    .hero-home .hero-copy h1{
        max-width:760px;
        font-size:68px;
    }

    .hero-home .hero-copy > p{
        max-width:660px;
        font-size:17px;
    }

}


/* =========================================================
   LAPTOP 1024 - 1399
========================================================= */

@media (max-width:1399px){

    .hero-home{
        min-height:550px;

        background-position:62% center !important;
    }

    .hero-home .hero-grid{
        width:min(1120px, calc(100% - 48px));
        padding:65px 0;
    }

    .hero-home .hero-copy{
        max-width:650px;
    }

    .hero-home .hero-copy h1{
        max-width:650px;

        font-size:clamp(44px, 4.4vw, 60px);
        line-height:1.06;
    }

    .hero-home .hero-copy > p{
        max-width:590px;

        font-size:15px;
        line-height:1.7;
    }

}


/* =========================================================
   TABLET NGANG
========================================================= */

@media (max-width:1024px){

    .hero-home{
        min-height:530px;

        background-position:66% center !important;
    }

    .hero-home .hero-grid{
        width:min(100% - 40px, 960px);

        padding:58px 0;
    }

    .hero-home .hero-copy{
        max-width:570px;
    }

    .hero-home .hero-copy h1{
        max-width:570px;

        font-size:48px;
        line-height:1.08;

        letter-spacing:-1px;
    }

    .hero-home .hero-copy > p{
        max-width:520px;

        font-size:15px;
    }

}


/* =========================================================
   TABLET DỌC
========================================================= */

@media (max-width:850px){

    .hero-home{
        min-height:560px;

        background-position:68% center !important;
    }

    .hero-home .hero-grid{
        width:calc(100% - 36px);

        padding:55px 0;
    }

    .hero-home .hero-copy{
        max-width:520px;
    }

    .hero-home .hero-copy h1{
        max-width:520px;

        font-size:44px;
        line-height:1.08;
    }

    .hero-home .hero-copy > p{
        max-width:480px;

        font-size:14px;
        line-height:1.7;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:600px){

    .hero-home{
        min-height:610px;

        align-items:center;

        background-position:70% center !important;
    }

    .hero-home .hero-grid{
        width:calc(100% - 28px);

        margin-left:auto;
        margin-right:auto;

        padding:48px 0;
    }

    .hero-home .hero-copy{
        width:100%;
        max-width:100%;
    }

    .hero-home .eyebrow{
        margin-bottom:14px;

        font-size:9px;
        letter-spacing:1.8px;
    }

    .hero-home .hero-copy h1{
        width:100%;
        max-width:100%;

        margin-bottom:18px;

        font-size:38px;
        line-height:1.08;
        letter-spacing:-.7px;
    }

    .hero-home .hero-copy > p{
        width:100%;
        max-width:100%;

        margin-bottom:24px;

        font-size:14px;
        line-height:1.65;
    }

    .hero-home .hero-actions{
        flex-direction:column;
        align-items:stretch;

        gap:10px;

        margin-bottom:22px;
    }

    .hero-home .hero-actions .btn{
        width:100%;

        min-height:46px;

        text-align:center;
    }

    .hero-home .hero-points{
        flex-direction:column;
        align-items:flex-start;

        gap:6px;

        font-size:11px;
    }

    .hero-home .hero-points span{
        white-space:normal;
    }

}


/* =========================================================
   MOBILE NHỎ
========================================================= */

@media (max-width:390px){

    .hero-home{
        min-height:580px;

        background-position:72% center !important;
    }

    .hero-home .hero-grid{
        width:calc(100% - 24px);

        padding:40px 0;
    }

    .hero-home .hero-copy h1{
        font-size:34px;
    }

    .hero-home .hero-copy > p{
        font-size:13px;
    }

}
