/* ═══════════════════════════════════════════════════════════
   MinhTamCoconut — home.css
   CSS riêng cho trang chủ (Index). Viết trong file .css nên
   @keyframes và @media không cần escape thành @@
═══════════════════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────────────────── */
.hero {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--g0) 0%, var(--g1) 45%, #d6efdd 100%);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding-top: 70px;
    position: relative;
    overflow: hidden;
}

.hero-bg-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.hblob {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.45;
}

.hblob-1 {
    width: 550px; height: 550px;
    background: radial-gradient(circle, #b3e4be, transparent 70%);
    top: -100px; right: -80px;
    animation: blobDrift 10s ease-in-out infinite;
}

.hblob-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #d4f0da, transparent 70%);
    bottom: -60px; left: 10%;
    animation: blobDrift 13s ease-in-out 3s infinite;
}

.hblob-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #f5d48a, transparent 70%);
    top: 40%; left: -40px; opacity: 0.25;
    animation: blobDrift 8s ease-in-out 1.5s infinite;
}

@keyframes blobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%       { transform: translate(20px, -15px) scale(1.04); }
    70%       { transform: translate(-12px, 10px) scale(0.97); }
}

.hero-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(58,170,86,0.18) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero-leaf {
    position: absolute; pointer-events: none;
    opacity: 0.07; font-size: 18rem; line-height: 1;
    right: -60px; bottom: -40px;
    transform: rotate(-20deg);
    filter: grayscale(1) brightness(0.3);
    animation: leafSway 8s ease-in-out infinite;
}

@keyframes leafSway {
    0%, 100% { transform: rotate(-20deg); }
    50%       { transform: rotate(-15deg) scale(1.03); }
}

/* ── HERO LEFT ──────────────────────────────────────────── */
.hero-l {
    padding: 60px 5% 60px 8%;
    position: relative; z-index: 2;
    animation: riseUp 0.9s 0.1s both;
}

@keyframes riseUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: white; border: 1px solid var(--g2);
    padding: 6px 16px 6px 8px; border-radius: 30px;
    margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(58,170,86,0.1);
}

.pill-dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, var(--g4), var(--g6));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px var(--shadow-g);
}

.pill-text { font-size: 0.78rem; font-weight: 600; color: var(--ink-mid); }

.hero-h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 5.5vw, 5rem);
    font-weight: 300; line-height: 1.08;
    color: var(--ink); margin-bottom: 10px;
}

.hero-h1 strong {
    font-weight: 600; font-style: italic;
    background: linear-gradient(135deg, var(--g5), var(--g7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.hero-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 2vw, 1.4rem);
    font-style: italic; font-weight: 300;
    color: var(--gold); margin-bottom: 28px;
}

.hero-p {
    font-size: 1rem; color: var(--ink-soft);
    line-height: 1.85; max-width: 460px; margin-bottom: 38px;
}

.hero-p strong { color: var(--ink-mid); font-weight: 600; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats {
    display: flex; gap: 0;
    margin-top: 50px; padding-top: 30px;
    border-top: 1px solid var(--line);
}

.hs { flex: 1; }
.hs + .hs { border-left: 1px solid var(--line); padding-left: 24px; }

.hs-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem; font-weight: 600;
    color: var(--g5); line-height: 1;
}

.hs-unit { font-size: 1rem; }
.hs-lbl  { font-size: 0.73rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ── HERO RIGHT (visual) ────────────────────────────────── */
.hero-r {
    position: relative; z-index: 2;
    padding: 60px 8% 60px 5%;
    display: flex; align-items: center; justify-content: center;
    animation: riseUp 1.1s 0.35s both;
}

.jelly-stage { position: relative; width: 460px; height: 460px; }

.jelly-orb {
    position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        rgba(255,255,255,0.8) 0%,
        rgba(198,234,207,0.55) 50%,
        rgba(147,212,160,0.35) 100%);
    border: 1.5px solid rgba(91,191,114,0.25);
    box-shadow:
        0 0 0 20px rgba(91,191,114,0.07),
        0 0 0 40px rgba(91,191,114,0.04),
        0 30px 80px rgba(58,170,86,0.18),
        inset 0 -20px 40px rgba(29,107,49,0.08);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.jelly-orb-shine {
    position: absolute; top: 10%; left: 18%; width: 40%; height: 20%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.65), transparent);
    border-radius: 50%; transform: rotate(-20deg);
}

.jelly-orb-shine2 {
    position: absolute; bottom: 18%; right: 14%; width: 20%; height: 10%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.3), transparent);
    border-radius: 50%;
}

.jelly-emoji {
    font-size: 8.5rem;
    filter: drop-shadow(0 12px 28px rgba(58,170,86,0.35));
    animation: jellyFloat 3.8s ease-in-out infinite;
    position: relative; z-index: 1;
}

@keyframes jellyFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-16px) scale(1.03); }
}

.spin-ring {
    position: absolute; inset: -18px; border-radius: 50%;
    border: 1px dashed rgba(91,191,114,0.3);
    animation: spinRing 25s linear infinite;
}

.spin-ring::before {
    content: ''; position: absolute; top: -4px; left: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--g4); transform: translateX(-50%);
    box-shadow: 0 0 8px var(--g4);
}

@keyframes spinRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.chip {
    position: absolute;
    background: white; border: 1px solid var(--g2);
    border-radius: 16px; padding: 10px 16px;
    box-shadow: 0 8px 28px rgba(58,170,86,0.13);
    white-space: nowrap;
}

.chip-1 { top: 6%; right: -56px;  animation: chipFloat 5s ease-in-out infinite; }
.chip-2 { bottom: 18%; left: -80px; animation: chipFloat 5s ease-in-out 1.7s infinite; }
.chip-3 { bottom: 4%; right: -50px; animation: chipFloat 5s ease-in-out 0.9s infinite; }

@keyframes chipFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
}

.chip-lbl {
    font-size: 0.62rem; color: var(--muted);
    letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 3px;
}

.chip-val { font-size: 0.88rem; font-weight: 700; color: var(--g6); }
.chip-val small { font-size: 0.7rem; font-weight: 400; color: var(--muted); }

.odot {
    position: absolute; border-radius: 50%;
    background: var(--g4); box-shadow: 0 0 8px var(--g3);
}

.od1 { width: 9px; height: 9px; top: 14%; left: 48%; animation: odPulse 3s ease-in-out infinite; }
.od2 { width: 6px; height: 6px; bottom: 12%; left: 28%; animation: odPulse 4s ease-in-out 1s infinite; }
.od3 { width: 7px; height: 7px; top: 52%; right: 7%;   animation: odPulse 3.5s ease-in-out 2s infinite; }

@keyframes odPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.5); }
}

/* ── WHY US ─────────────────────────────────────────────── */
.why-sec { background: var(--ivory); }

.why-top {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-bottom: 56px;
}

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.why-card {
    background: white; border-radius: 24px;
    padding: 32px 24px; border: 1px solid var(--line);
    transition: all 0.35s cubic-bezier(.25,.8,.25,1);
    position: relative; overflow: hidden;
}

.why-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--g4), var(--g6));
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s ease;
}

.why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(58,170,86,0.13); border-color: var(--g2); }
.why-card:hover::before { transform: scaleX(1); }

.why-icon {
    width: 54px; height: 54px; border-radius: 16px;
    margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}

.wi-1 { background: linear-gradient(135deg, #e8f8ec, #c6eacf); }
.wi-2 { background: linear-gradient(135deg, #fff8e6, #fce7b4); }
.wi-3 { background: linear-gradient(135deg, #e6f3ff, #b9d9f5); }
.wi-4 { background: linear-gradient(135deg, #fff0f5, #f7c6d9); }

.why-title { font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 8px; }
.why-desc  { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.7; }

.why-num {
    position: absolute; bottom: 18px; right: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.5rem; font-weight: 600;
    color: var(--g1); line-height: 1;
    pointer-events: none; transition: color 0.3s;
}

.why-card:hover .why-num { color: var(--g2); }

/* ── PRODUCTS TAB ───────────────────────────────────────── */
.prod-sec { background: white; }

.prod-hd {
    display: flex; justify-content: space-between;
    align-items: flex-end; margin-bottom: 52px;
}

.tab-row {
    display: flex; gap: 6px;
    background: var(--g0); border: 1px solid var(--line);
    border-radius: 30px; padding: 5px;
}

.tab {
    padding: 8px 20px; border-radius: 22px; border: none;
    background: transparent; font-size: 0.8rem; font-weight: 500;
    color: var(--ink-soft); font-family: 'DM Sans', sans-serif;
    transition: all 0.25s; cursor: pointer;
}

.tab.on {
    background: var(--g5); color: white;
    box-shadow: 0 3px 12px var(--shadow-g);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hero { grid-template-columns: 1fr; }
    .hero-r { display: none; }
    .why-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-top  { flex-direction: column; gap: 16px; }
    .prod-hd  { flex-direction: column; align-items: flex-start; gap: 20px; }
    .tab-row  { flex-wrap: wrap; }
}


/* V7 — tab row scrolls horizontally on mobile instead of overflowing/wrapping badly */
@media (max-width: 768px) {
    .prod-hd { align-items: stretch; }
    .tab-row {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        border-radius: 18px;
        padding-bottom: 6px;
    }
    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 9px 14px;
    }
}