/*
Theme Name: Rong Biển Cháy Tỏi
Theme URI: https://example.com/rong-bien-chay-toi
Author: Ông Kẹ
Author URI: https://example.com
Description: Theme WordPress sinh động cho website bán rong biển cháy tỏi. Thiết kế trực quan, nhiều hiệu ứng động (sóng biển, cuộn lộ nội dung, hover 3D, đếm số...), tối ưu cho landing page sản phẩm và cửa hàng đồ ăn vặt. Hỗ trợ menu, widget, customizer và tùy biến màu sắc.
Version: 1.2.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rong-bien-chay-toi
Tags: food, restaurant, e-commerce, one-page, custom-colors, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. BIẾN MÀU & RESET
   ========================================================= */
:root{
  --sea-900:#04332b;
  --sea-800:#064e3b;
  --sea-700:#0a5c4a;
  --sea-600:#0d7a5f;
  --green-500:#10b981;
  --green-400:#34d399;
  --gold-500:#f59e0b;
  --gold-400:#fbbf24;
  --gold-300:#fcd34d;
  --cream:#fef9e7;
  --cream-2:#fff7ed;
  --ink:#06251f;
  --muted:#5b756d;
  --white:#ffffff;
  --shadow-sm:0 4px 14px rgba(6,78,59,.10);
  --shadow-md:0 14px 40px rgba(6,78,59,.16);
  --shadow-lg:0 30px 70px rgba(6,78,59,.22);
  --radius:22px;
  --radius-sm:14px;
  --font:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --maxw:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.text-gradient{
  background:linear-gradient(120deg,var(--gold-400),var(--green-400));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================================================
   2. NÚT BẤM
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:14px 30px;border-radius:60px;font-weight:700;
  font-size:1rem;border:none;cursor:pointer;position:relative;
  overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;
  z-index:1;
}
.btn-primary{
  background:linear-gradient(120deg,var(--gold-500),var(--gold-400));
  color:var(--sea-900);box-shadow:0 12px 30px rgba(245,158,11,.4);
}
.btn-primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 40px rgba(245,158,11,.55)}
.btn-ghost{
  background:rgba(255,255,255,.15);color:var(--white);
  border:2px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.95);color:var(--sea-800);transform:translateY(-4px)}
.btn-dark{background:var(--sea-700);color:var(--white);box-shadow:var(--shadow-sm)}
.btn-dark:hover{background:var(--sea-800);transform:translateY(-4px)}
/* hiệu ứng ánh sáng quét qua nút */
.btn::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s ease;z-index:-1;
}
.btn:hover::after{left:140%}

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease;
  padding:18px 0;
}
.site-header.scrolled{
  background:rgba(255,249,231,.92);backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(6,78,59,.12);padding:10px 0;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.35rem;color:var(--white)}
.scrolled .brand{color:var(--sea-800)}
.brand-logo{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green-500),var(--gold-400));
  font-size:1.5rem;box-shadow:var(--shadow-sm);animation:bob 4s ease-in-out infinite;
}
.brand small{display:block;font-size:.7rem;font-weight:500;letter-spacing:.18em;opacity:.8;text-transform:uppercase}
.main-nav > ul{display:flex;gap:6px;align-items:center}
.main-nav a{
  color:var(--white);font-weight:600;padding:9px 16px;border-radius:40px;
  position:relative;transition:.25s;
}
.scrolled .main-nav a{color:var(--sea-800)}
.main-nav a:hover{background:rgba(255,255,255,.18)}
.scrolled .main-nav a:hover{background:rgba(13,122,95,.12)}
.nav-actions{display:flex;align-items:center;gap:14px}
.cart-btn{
  position:relative;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.18);
  color:var(--white);font-size:1.2rem;transition:.25s;
}
.scrolled .cart-btn{background:var(--sea-700);color:var(--white)}
.cart-btn:hover{transform:translateY(-3px) rotate(-8deg)}
.cart-count{
  position:absolute;top:-4px;right:-4px;background:var(--gold-500);
  color:var(--sea-900);font-size:.7rem;font-weight:800;min-width:20px;height:20px;
  border-radius:50%;display:grid;place-items:center;border:2px solid var(--cream);
}
.menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.7rem;cursor:pointer}
.scrolled .menu-toggle{color:var(--sea-800)}

/* =========================================================
   4. HERO
   ========================================================= */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  background:linear-gradient(160deg,var(--sea-900),var(--sea-700) 55%,var(--sea-600));
  overflow:hidden;color:var(--white);padding:140px 0 120px;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:5}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:40px;
  background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.5);
  color:var(--gold-300);font-weight:600;font-size:.9rem;margin-bottom:22px;
}
.hero h1{font-size:clamp(2.4rem,5.5vw,4.2rem);line-height:1.08;font-weight:800;margin-bottom:20px}
.hero p.lead{font-size:1.15rem;max-width:520px;opacity:.92;margin-bottom:32px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats .num{font-size:2rem;font-weight:800;color:var(--gold-300)}
.hero-stats .lbl{font-size:.85rem;opacity:.8}

/* hình sản phẩm hero */
.hero-visual{position:relative;display:grid;place-items:center}
.product-orb{
  width:min(420px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--green-400),var(--sea-700) 70%);
  display:grid;place-items:center;font-size:9rem;position:relative;
  box-shadow:inset 0 0 60px rgba(0,0,0,.3),0 40px 80px rgba(0,0,0,.4);
  animation:float 6s ease-in-out infinite;
}
.product-orb::before{
  content:"";position:absolute;inset:-18px;border-radius:50%;
  border:2px dashed rgba(251,191,36,.4);animation:spin 26s linear infinite;
}
.float-tag{
  position:absolute;background:rgba(255,255,255,.95);color:var(--sea-800);
  padding:10px 18px;border-radius:40px;font-weight:700;font-size:.9rem;
  box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px;
  animation:float 5s ease-in-out infinite;
}
.float-tag.t1{top:8%;left:-4%;animation-delay:.4s}
.float-tag.t2{bottom:18%;right:-6%;animation-delay:1.2s}
.float-tag.t3{bottom:0;left:14%;animation-delay:.8s}
.float-tag .dot{width:10px;height:10px;border-radius:50%;background:var(--green-500)}

/* bong bóng nổi nền hero */
.bubbles{position:absolute;inset:0;z-index:1;overflow:hidden}
.bubble{
  position:absolute;bottom:-60px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(52,211,153,.08));
  animation:rise linear infinite;
}
/* sóng dưới hero */
.hero-waves{position:absolute;bottom:-2px;left:0;width:100%;line-height:0;z-index:4}
.hero-waves svg{width:100%;height:120px}

/* =========================================================
   5. BĂNG CHẠY (MARQUEE)
   ========================================================= */
.marquee{
  background:linear-gradient(90deg,var(--gold-500),var(--gold-400));
  color:var(--sea-900);padding:16px 0;overflow:hidden;white-space:nowrap;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.marquee-track{display:inline-flex;gap:50px;animation:marquee 22s linear infinite}
.marquee-track span{display:inline-flex;align-items:center;gap:50px;font-size:1.05rem}
.marquee .star{color:var(--sea-700)}

/* =========================================================
   6. SECTION CHUNG
   ========================================================= */
section{position:relative}
.sec-pad{padding:90px 0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 56px}
.eyebrow{
  display:inline-block;color:var(--sea-600);font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;font-size:.82rem;margin-bottom:12px;
}
.sec-head h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;line-height:1.15;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:1.08rem}

/* =========================================================
   7. ĐẶC ĐIỂM (FEATURES)
   ========================================================= */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feature-card{
  background:var(--white);border-radius:var(--radius);padding:34px 26px;text-align:center;
  box-shadow:var(--shadow-sm);transition:transform .35s ease,box-shadow .35s ease;
  border:1px solid rgba(13,122,95,.07);position:relative;overflow:hidden;
}
.feature-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--green-500),var(--gold-400));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
}
.feature-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-ico{
  width:74px;height:74px;border-radius:22px;margin:0 auto 20px;display:grid;place-items:center;
  font-size:2.1rem;background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(251,191,36,.18));
  transition:transform .4s ease;
}
.feature-card:hover .feature-ico{transform:rotate(-10deg) scale(1.1)}
.feature-card h3{font-size:1.2rem;margin-bottom:8px}
.feature-card p{color:var(--muted);font-size:.95rem}

/* =========================================================
   8. SẢN PHẨM
   ========================================================= */
.products{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .4s ease,box-shadow .4s ease;
  position:relative;will-change:transform;
}
.product-card:hover{transform:translateY(-12px);box-shadow:var(--shadow-lg)}
.product-media{
  height:230px;display:grid;place-items:center;font-size:5.5rem;position:relative;
  background:radial-gradient(circle at 50% 40%,var(--green-400),var(--sea-700));
}
.product-media .emoji{transition:transform .5s ease;filter:drop-shadow(0 14px 20px rgba(0,0,0,.3))}
.product-card:hover .product-media .emoji{transform:scale(1.18) rotate(6deg)}
.ribbon{
  position:absolute;top:16px;left:16px;background:var(--gold-500);color:var(--sea-900);
  padding:6px 14px;border-radius:30px;font-weight:800;font-size:.78rem;box-shadow:var(--shadow-sm);
}
.product-body{padding:24px}
.product-body h3{font-size:1.25rem;margin-bottom:6px}
.product-rate{color:var(--gold-500);font-size:.92rem;margin-bottom:10px}
.product-rate span{color:var(--muted)}
.product-desc{color:var(--muted);font-size:.93rem;margin-bottom:18px}
.product-foot{display:flex;align-items:center;justify-content:space-between}
.price{font-size:1.5rem;font-weight:800;color:var(--sea-700)}
.price del{font-size:.95rem;color:var(--muted);font-weight:500;margin-left:6px}
.add-cart{
  width:48px;height:48px;border-radius:14px;border:none;cursor:pointer;
  background:var(--sea-700);color:var(--white);font-size:1.2rem;transition:.25s;
}
.add-cart:hover{background:var(--gold-500);color:var(--sea-900);transform:rotate(-8deg) scale(1.08)}

/* =========================================================
   9. THỐNG KÊ (COUNTERS)
   ========================================================= */
.stats{
  background:linear-gradient(135deg,var(--sea-800),var(--sea-600));color:var(--white);
  position:relative;overflow:hidden;
}
.stats::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(251,191,36,.18),transparent 45%),
             radial-gradient(circle at 85% 80%,rgba(52,211,153,.2),transparent 45%);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;position:relative;z-index:2}
.stat .num{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;color:var(--gold-300);line-height:1}
.stat .lbl{margin-top:10px;opacity:.9;font-weight:500}

/* =========================================================
   10. CÂU CHUYỆN (ABOUT)
   ========================================================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-visual{
  border-radius:var(--radius);min-height:380px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 30% 30%,var(--green-400),var(--sea-800));
  display:grid;place-items:center;font-size:8rem;box-shadow:var(--shadow-md);
}
.about-visual .ring{
  position:absolute;border:2px dashed rgba(255,255,255,.3);border-radius:50%;
  inset:30px;animation:spin 30s linear infinite;
}
.about-text h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;margin-bottom:18px;line-height:1.18}
.about-text p{color:var(--muted);margin-bottom:18px}
.check-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-weight:600}
.check-list .ck{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-500);color:#fff;font-size:.85rem;
}

/* =========================================================
   11. ĐÁNH GIÁ (TESTIMONIALS)
   ========================================================= */
.reviews{background:var(--cream-2)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.review-card{
  background:var(--white);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);
  transition:transform .35s ease,box-shadow .35s ease;position:relative;
}
.review-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.review-card .quote{font-size:3rem;color:var(--gold-300);line-height:.6;height:24px}
.review-card p{color:var(--ink);margin:14px 0 18px;font-style:italic}
.reviewer{display:flex;align-items:center;gap:12px}
.reviewer .av{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;
  background:linear-gradient(135deg,var(--green-400),var(--gold-400));
}
.reviewer .name{font-weight:700}
.reviewer .role{font-size:.82rem;color:var(--muted)}

/* =========================================================
   12. CTA
   ========================================================= */
.cta{padding:30px 0 90px}
.cta-box{
  background:linear-gradient(120deg,var(--gold-500),var(--green-500));
  border-radius:36px;padding:60px;text-align:center;color:var(--sea-900);
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
}
.cta-box::before,.cta-box::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.18);
}
.cta-box::before{width:220px;height:220px;top:-80px;left:-60px}
.cta-box::after{width:300px;height:300px;bottom:-130px;right:-80px}
.cta-box h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin-bottom:14px;position:relative}
.cta-box p{font-size:1.1rem;margin-bottom:28px;position:relative}

/* =========================================================
   13. FOOTER
   ========================================================= */
.site-footer{background:var(--sea-900);color:rgba(255,255,255,.78);padding:64px 0 26px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.site-footer h4{color:var(--white);margin-bottom:18px;font-size:1.05rem}
.site-footer a{transition:.2s}
.site-footer a:hover{color:var(--gold-300);padding-left:4px}
.footer-links li{margin-bottom:10px}
.social{display:flex;gap:12px;margin-top:18px}
.social a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);font-size:1.1rem;transition:.25s;
}
.social a:hover{background:var(--gold-500);color:var(--sea-900);transform:translateY(-4px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.88rem;
}

/* =========================================================
   14. NÚT LÊN ĐẦU TRANG
   ========================================================= */
.to-top{
  position:fixed;bottom:26px;right:26px;width:52px;height:52px;border-radius:50%;
  background:var(--sea-700);color:#fff;border:none;cursor:pointer;font-size:1.3rem;
  box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(20px);
  transition:.3s;z-index:900;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--gold-500);color:var(--sea-900)}

/* =========================================================
   15. NỘI DUNG BÀI VIẾT / TRANG (blog, single, page)
   ========================================================= */
.page-hero{
  background:linear-gradient(135deg,var(--sea-800),var(--sea-600));color:#fff;
  padding:150px 0 70px;text-align:center;
}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.content-wrap{max-width:820px;margin:0 auto;padding:70px 22px}
.post-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);
  margin-bottom:30px;transition:transform .3s ease,box-shadow .3s ease;
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.post-card .thumb{height:220px;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .thumb img{transform:scale(1.08)}
.post-card .pc-body{padding:26px}
.post-card h2,.post-card h3{margin-bottom:10px}
.post-meta{color:var(--muted);font-size:.85rem;margin-bottom:12px}
.entry-content p{margin-bottom:18px}
.entry-content h2{margin:30px 0 14px}
.entry-content img{border-radius:var(--radius-sm);margin:20px 0}
.entry-content a{color:var(--sea-600);font-weight:600;text-decoration:underline}
.read-more{display:inline-flex;align-items:center;gap:6px;color:var(--sea-600);font-weight:700;margin-top:8px}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination span{padding:10px 16px;border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);font-weight:600}
.pagination .current{background:var(--sea-700);color:#fff}

/* widget */
.widget{background:#fff;border-radius:var(--radius-sm);padding:22px;margin-bottom:24px;box-shadow:var(--shadow-sm)}
.widget-title{font-weight:800;margin-bottom:14px}

/* =========================================================
   16. HIỆU ỨNG CUỘN LỘ (REVEAL)
   ========================================================= */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* =========================================================
   17. KEYFRAMES
   ========================================================= */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{0%{transform:translateY(0) scale(.6);opacity:0}10%{opacity:.7}100%{transform:translateY(-115vh) scale(1.1);opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   18. RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero-cta,.hero-stats{justify-content:center}
  .hero-visual{order:-1}
  .about-grid{grid-template-columns:1fr}
  .products-grid,.reviews-grid{grid-template-columns:1fr}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:rgba(255,249,231,.98);
    backdrop-filter:blur(12px);box-shadow:var(--shadow-md);
    max-height:0;overflow:hidden;transition:max-height .35s ease;
  }
  .main-nav.open{max-height:420px}
  .main-nav > ul{flex-direction:column;padding:14px;gap:4px}
  .main-nav a{color:var(--sea-800);display:block;text-align:center}
  .menu-toggle{display:block}
}
@media (max-width:560px){
  .features-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}
  .cta-box{padding:40px 24px}
  .sec-pad{padding:64px 0}
}

/* =========================================================
   19. RONG BIỂN TRỰC QUAN (cập nhật v1.1)
   ========================================================= */
/* Rừng rong biển dưới hero */
.seaweed-forest{
  position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;
  pointer-events:none;opacity:.9;
}
.seaweed-forest svg{width:100%;height:100%}
.kelp{
  transform-box:fill-box;transform-origin:bottom center;
  animation:sway var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
/* dịch từng sợi sang vị trí --x (vì path vẽ quanh gốc tọa độ) */
.kelp{translate:var(--x,0) 0}
.kelp.tall{filter:brightness(1.08)}

/* hero cần để nội dung nổi trên rong biển */
.hero-grid{position:relative;z-index:6}

/* Miếng rong biển cháy tỏi (SVG) trong orb */
.product-orb{overflow:visible}
.seaweed-sheet{
  width:74%;height:74%;filter:drop-shadow(0 18px 26px rgba(0,0,0,.4));
  animation:sheetTilt 7s ease-in-out infinite;
}
.seaweed-sheet .garlic ellipse{transform-box:fill-box}
/* lớp tỏi lấp lánh */
.seaweed-sheet .garlic{animation:garlicGlow 3.5s ease-in-out infinite}

/* hơi nóng bốc lên */
.steam{
  position:absolute;top:6%;width:10px;height:60px;border-radius:50%;
  background:linear-gradient(to top,rgba(255,255,255,.45),transparent);
  filter:blur(4px);opacity:0;
}
.steam.s1{left:38%;animation:steam 3.2s ease-in-out infinite}
.steam.s2{left:50%;animation:steam 3.2s ease-in-out infinite .9s}
.steam.s3{left:62%;animation:steam 3.2s ease-in-out infinite 1.8s}

/* miếng rong biển nhỏ trong thẻ sản phẩm */
.product-media .seaweed-sheet.sm{
  width:150px;height:150px;animation:sheetFloat 5s ease-in-out infinite;
}
.product-card:hover .seaweed-sheet.sm{transform:scale(1.12) rotate(5deg)}
.seaweed-sheet.sm{transition:transform .5s ease}
.flavor-chip{
  position:absolute;bottom:18px;right:18px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.95);display:grid;place-items:center;font-size:1.4rem;
  box-shadow:var(--shadow-sm);
}

/* ánh sáng quét qua media sản phẩm */
.product-media{overflow:hidden}
.product-media::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .7s ease;
}
.product-card:hover .product-media::after{left:130%}

/* reveal mượt hơn: thêm chút scale */
.reveal{transform:translateY(40px) scale(.98)}
.reveal.in{transform:none}

/* =========================================================
   20. KEYFRAMES MỚI
   ========================================================= */
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes sheetTilt{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-10px)}}
@keyframes sheetFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes garlicGlow{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 6px rgba(251,191,36,.8))}}
@keyframes steam{0%{opacity:0;transform:translateY(10px) scaleX(1)}30%{opacity:.7}100%{opacity:0;transform:translateY(-60px) scaleX(1.6)}}

@media (max-width:860px){
  .seaweed-forest{height:32%;opacity:.7}
}

/* =========================================================
   21. MENU CON / DROPDOWN (sửa lỗi tràn header)
   ========================================================= */
/* chỉ hàng menu cấp 1 mới nằm ngang */
.main-nav > ul{display:flex;flex-wrap:nowrap;align-items:center;gap:4px}
.main-nav li{position:relative}

/* mũi tên cho mục có menu con */
.main-nav .menu-item-has-children > a{display:inline-flex;align-items:center;gap:6px}
.main-nav .menu-item-has-children > a::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s ease;opacity:.85;
}
.main-nav .menu-item-has-children:hover > a::after{transform:rotate(-135deg) translateY(2px)}

/* khung menu con: đổ xuống, ẩn mặc định */
.main-nav .sub-menu{
  display:block;position:absolute;top:calc(100% + 12px);left:0;min-width:240px;
  background:#fff;border-radius:18px;padding:12px;list-style:none;
  box-shadow:0 22px 55px rgba(6,78,59,.26);border:1px solid rgba(13,122,95,.08);
  opacity:0;visibility:hidden;transform:scale(.94);transform-origin:top left;
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.9,.3,1.2),visibility .26s;
  z-index:1001;
}
/* cầu nối vô hình để rê chuột không bị mất hover */
.main-nav .menu-item-has-children::before{
  content:"";position:absolute;top:100%;left:0;width:100%;height:16px;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:scale(1);
}

/* link trong menu con: luôn nền sáng, chữ tối, dễ đọc */
.main-nav .sub-menu a{
  display:block;color:var(--sea-800)!important;font-weight:600;font-size:.95rem;
  padding:10px 14px;border-radius:10px;white-space:nowrap;transition:.2s;
}
.main-nav .sub-menu a:hover{
  background:linear-gradient(120deg,rgba(16,185,129,.14),rgba(251,191,36,.16))!important;
  padding-left:20px;
}

/* menu con cấp 3 trở đi: bay sang phải */
.main-nav .sub-menu .menu-item-has-children > a::after{transform:rotate(-45deg)}
.main-nav .sub-menu .sub-menu{top:-10px;left:calc(100% + 6px);transform:translateX(12px)}
.main-nav .sub-menu .menu-item-has-children:hover > .sub-menu{transform:translateX(0)}

/* nút mở menu con (hiện trên mobile) */
.submenu-toggle{
  display:none;background:none;border:none;cursor:pointer;color:inherit;
  font-size:1rem;line-height:1;padding:6px 10px;
}
.submenu-toggle .ic{display:inline-block;transition:transform .25s ease}
.submenu-toggle.rot .ic{transform:rotate(180deg)}

.hide-sm{display:inline-flex}

/* ----- MOBILE: menu con dạng xổ dọc (accordion) ----- */
@media (max-width:860px){
  .main-nav > ul{flex-direction:column;flex-wrap:wrap}
  .main-nav.open{max-height:82vh;overflow-y:auto}

  .main-nav li{width:100%}
  .main-nav .menu-item-has-children > a::after{display:none}
  .submenu-toggle{
    display:inline-flex;position:absolute;top:4px;right:8px;
    color:var(--sea-800);font-size:1.1rem;
  }
  /* mục cha + nút mở nằm cùng hàng */
  .main-nav .menu-item-has-children{display:flex;flex-wrap:wrap;align-items:center}
  .main-nav .menu-item-has-children > a{flex:1}

  .main-nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;width:100%;min-width:0;padding:0 0 0 14px;
    background:transparent;max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .main-nav .menu-item-has-children.open > .sub-menu{max-height:1000px}
  .main-nav .sub-menu .sub-menu{left:auto;transform:none;padding-left:14px}
  .main-nav .sub-menu a{text-align:left;color:var(--sea-700)!important}
  .hide-sm{display:none}
}

/* =========================================================
   22. MEGA-MENU NHIỀU CỘT
   ========================================================= */
/* panel rộng dạng lưới khi mục cha có nhiều con */
.main-nav .sub-menu.mega{
  width:min(820px,92vw);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:4px 8px;padding:20px;border-radius:22px;
}
/* tiêu đề trang trí phía trên mega */
.main-nav .sub-menu.mega::before{
  content:attr(data-title);grid-column:1/-1;
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sea-600);padding:0 8px 10px;margin-bottom:6px;
  border-bottom:1px solid rgba(13,122,95,.12);
}
.main-nav .sub-menu.mega > li > a{
  border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:8px;
}
.main-nav .sub-menu.mega > li > a::before{
  content:"🌿";font-size:.85rem;opacity:.65;transition:transform .2s ease;
}
.main-nav .sub-menu.mega > li > a:hover::before{transform:scale(1.25) rotate(-8deg)}

/* canh phải cho mục nằm ở nửa phải màn hình (tránh tràn mép) */
.main-nav .sub-menu.align-right{left:auto;right:0;transform-origin:top right}

/* mobile: mega trở lại 1 cột như accordion thường */
@media (max-width:860px){
  .main-nav .sub-menu.mega{
    width:100%;display:block;padding:0 0 0 14px;grid-template-columns:none;
  }
  .main-nav .sub-menu.mega::before{display:none}
  .main-nav .sub-menu.mega > li > a::before{content:"›";opacity:.5}
  .main-nav .sub-menu.align-right{right:auto}
}

/* =========================================================
   23. CHỐNG NHẢY DÒNG MENU CẤP 1
   ========================================================= */
.brand{flex-shrink:0;max-width:300px}
.main-nav > ul > li{flex-shrink:0}
.main-nav > ul > li > a{white-space:nowrap}   /* mỗi mục luôn 1 dòng */

/* màn hình desktop hẹp: thu gọn padding/cỡ chữ để vẫn đủ chỗ */
@media (max-width:1180px) and (min-width:861px){
  .nav-wrap{gap:12px}
  .main-nav > ul{gap:2px}
  .main-nav > ul > li > a{padding:8px 11px;font-size:.95rem}
  .nav-actions{gap:10px}
  .brand{font-size:1.15rem;max-width:240px}
}
@media (max-width:980px) and (min-width:861px){
  .main-nav > ul > li > a{padding:7px 8px;font-size:.9rem}
  .hide-sm{display:none}                       /* ẩn nút "Đặt hàng" khi quá chật */
}