/* ===================================================
   NHÀ HÀNG THỦY LONG — Page-specific styles
   Theme: Warm Brown & Gold
   =================================================== */

:root{
    --bg:#faf8f4;--bg2:#f2ede4;--bg3:#e8e0d4;
    --brown:#7a5a38;--brown-l:#9a7a58;--brown-d:#5a3e20;--brown-bg:rgba(122,90,56,.05);
    --gold:#c4a060;--gold-l:#e0c080;
    --wine:#8a3040;--wine-l:#b04060;
    --txt:#2e2820;--txt-m:#6a6258;--txt-s:#9a9288;
    --brd:rgba(122,90,56,.1);--brd2:rgba(122,90,56,.2);
    --white:#ffffff;
    --shadow:0 4px 20px rgba(46,40,32,.06);--shadow-l:0 12px 40px rgba(46,40,32,.1);
}
body{background:var(--bg);color:var(--txt)}
::-webkit-scrollbar-thumb{background:var(--brown)}
::selection{background:rgba(122,90,56,.12);color:var(--brown-d)}

/* LOADER */
.loader-icon{font-family:var(--ff-a);font-size:2rem;font-weight:700;font-style:italic;color:var(--brown);animation:lpulse 2s ease-in-out infinite}
.loader-txt{color:var(--brown-l)}

/* BREADCRUMB */
.breadcrumb{border-bottom-color:rgba(122,90,56,.06)}
.breadcrumb a{color:var(--brown)}.breadcrumb a:hover{color:var(--brown-d)}

/* NAV */
.nav.scrolled{border-bottom-color:rgba(122,90,56,.06)}
/* ===================================================
   NHÀ HÀNG THỦY LONG — Page-specific styles
   Theme: Warm Brown & Gold
   =================================================== */

:root{
    --bg:#faf8f4;--bg2:#f2ede4;--bg3:#e8e0d4;
    --brown:#7a5a38;--brown-l:#9a7a58;--brown-d:#5a3e20;--brown-bg:rgba(122,90,56,.05);
    --gold:#c4a060;--gold-l:#e0c080;
    --wine:#8a3040;--wine-l:#b04060;
    --txt:#2e2820;--txt-m:#6a6258;--txt-s:#9a9288;
    --brd:rgba(122,90,56,.1);--brd2:rgba(122,90,56,.2);
    --white:#ffffff;
    --shadow:0 4px 20px rgba(46,40,32,.06);--shadow-l:0 12px 40px rgba(46,40,32,.1);
}
body{background:var(--bg);color:var(--txt)}
::-webkit-scrollbar-thumb{background:var(--brown)}
::selection{background:rgba(122,90,56,.12);color:var(--brown-d)}

/* LOADER */
.loader-icon{font-family:var(--ff-a);font-size:2rem;font-weight:700;font-style:italic;color:var(--brown);animation:lpulse 2s ease-in-out infinite}
.loader-txt{color:var(--brown-l)}

/* BREADCRUMB */
.breadcrumb{border-bottom-color:rgba(122,90,56,.06)}
.breadcrumb a{color:var(--brown)}.breadcrumb a:hover{color:var(--brown-d)}

/* NAV */
.nav.scrolled{border-bottom-color:rgba(122,90,56,.06)}
.nav-brand .name{color:var(--brown-d)}
.nav-brand .sub{font-family:var(--ff-a);font-style:italic}
.nav-toggle span{background:var(--brown-d)}
.nav-links a:hover{color:var(--brown)}
.nav-links a::after{background:linear-gradient(90deg,var(--brown),var(--gold))}
.nav-cta{background:linear-gradient(135deg,var(--brown),var(--brown-d)) !important;box-shadow:0 4px 20px rgba(122,90,56,.2) !important}
.nav-cta:hover{box-shadow:0 8px 30px rgba(122,90,56,.3) !important}

/* MEGA DROPDOWN */

/* HERO */
.hero{background:var(--bg2)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;width:100%;min-height:100vh}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(30px,5vw,80px);z-index:2}
.hero-right{position:relative;overflow:hidden}
.hero-right img{width:100%;height:100%;object-fit:cover;animation:hscale 25s ease-in-out infinite alternate}
.hero-right::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bg2) 0%,transparent 15%)}
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:0;background:var(--brown-bg);border:1px solid var(--brd);font-family:var(--ff-h);font-size:.68rem;font-style:italic;letter-spacing:2px;color:var(--brown);margin-top:40px;margin-bottom:24px;width:fit-content;opacity:0;animation:hfade .8s ease .2s forwards}
.hero-h1{font-family:var(--ff-h);font-size:clamp(2.2rem,4.5vw,4rem);font-weight:800;line-height:1.1;color:var(--txt);margin-bottom:14px;opacity:0;animation:hfade .8s ease .4s forwards}
.hero-h1 .brown{color:var(--brown)}.hero-h1 .gold{color:var(--gold)}
.hero-sub{font-family:var(--ff-a);font-size:clamp(1rem,1.5vw,1.15rem);font-style:italic;color:var(--brown);margin-bottom:20px;opacity:0;animation:hfade .8s ease .55s forwards}
.hero-desc{font-size:.88rem;color:var(--txt-m);max-width:460px;line-height:1.9;margin-bottom:32px;opacity:0;animation:hfade .8s ease .7s forwards}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:hfade .8s ease .9s forwards}
.btn-brown{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border-radius:0;background:linear-gradient(135deg,var(--brown),var(--brown-d));color:white;font-family:var(--ff-h);font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;box-shadow:0 6px 25px rgba(122,90,56,.25);transition:all .4s var(--ease)}
.btn-brown:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(122,90,56,.35)}
.btn-outline{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border-radius:0;background:transparent;border:1.5px solid var(--brd2);color:var(--txt);font-family:var(--ff-h);font-size:.75rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:all .4s}
.btn-outline:hover{border-color:var(--brown);color:var(--brown)}

/* STATS */
.stats{background:linear-gradient(135deg,var(--brown),var(--brown-d));padding:48px 5%;border-radius:0;max-width:1200px;margin:-40px auto 0;position:relative;z-index:5;box-shadow:0 16px 50px rgba(122,90,56,.3);color:white}
.stat-n{font-family:var(--ff-h);font-size:clamp(2rem,3.5vw,2.8rem);font-weight:800;line-height:1}
.stat-n span{font-size:.45em;font-weight:500;opacity:.7}
.stat-l{font-family:var(--ff-h);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;opacity:.65;margin-top:6px}

/* SECTION */
.sec-tag{color:var(--brown);background:var(--brown-bg);border-color:var(--brd);font-family:var(--ff-h);font-style:italic}
.sec-h2 em{color:var(--brown);font-style:italic;font-family:var(--ff-a)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:48px}
.about-text h3{font-family:var(--ff-a);font-style:italic;color:var(--brown-d)}
.about-text p em{color:var(--brown)}

/* MENU CARDS */
.menu-bg{background:var(--bg2)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.menu-card{background:var(--white);border-radius:0;border:1px solid var(--brd);overflow:hidden;transition:all .55s var(--ease)}
.menu-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);border-color:var(--brd2)}
.menu-img{height:220px;overflow:hidden;position:relative}
.menu-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.menu-card:hover .menu-img img{transform:scale(1.06)}
.menu-img .menu-tag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--ff-a);font-size:.68rem;font-weight:600;font-style:italic;letter-spacing:1.5px;color:var(--brown);padding:5px 14px;border-radius:0;background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.menu-body{padding:24px}
.menu-body h3{font-family:var(--ff-h);font-size:1rem;font-weight:700;color:var(--txt);margin-bottom:4px}
.menu-body .menu-sub{font-family:var(--ff-a);font-size:.68rem;font-style:italic;letter-spacing:1.5px;color:var(--brown);margin-bottom:12px}
.menu-body p{font-size:.82rem;color:var(--txt-m);line-height:1.7;margin-bottom:16px}
.menu-link{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--brown);transition:gap .4s}
.menu-link:hover{gap:14px;color:var(--gold)}
.menu-link svg{width:14px;height:14px}

/* SPACE CARDS */
.space-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.space-card{position:relative;height:340px;overflow:hidden;border-radius:0;box-shadow:var(--shadow);transition:all .5s var(--ease)}
.space-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
.space-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.space-card:hover img{transform:scale(1.06)}
.space-card .space-content{position:absolute;bottom:0;left:0;right:0;padding:clamp(24px,3vw,36px);z-index:2;background:linear-gradient(180deg,transparent,rgba(46,40,32,.85));border-radius:0;color:white}
.space-card .space-tag{font-family:var(--ff-a);font-size:.68rem;font-style:italic;letter-spacing:2px;color:var(--gold-l);margin-bottom:6px}
.space-card h3{font-family:var(--ff-h);font-size:1rem;font-weight:700;margin-bottom:4px}
.space-card p{font-size:.78rem;opacity:.7;line-height:1.5}

/* QUOTE */
.quote-sec{background:var(--bg2)}
.quote-sec::before{color:rgba(122,90,56,.04)}
.quote-inner blockquote{color:var(--txt)}
.quote-inner cite{color:var(--brown)}
.quote-inner .q-line{background:linear-gradient(90deg,var(--brown),var(--gold))}

/* CTA */
.cta-sec{background:linear-gradient(135deg,var(--brown),var(--brown-d))}
.cta-inner .cta-tag{font-family:var(--ff-a);font-style:italic}
.btn-white{color:var(--brown-d)}

/* FOOTER */
.footer{background:var(--txt)}
.ft-social a:hover{background:var(--brown);border-color:var(--brown)}
.ft-col h4{color:var(--gold-l)}
.ft-col ul a:hover{color:var(--gold-l)}

/* CONTACT */
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--brown);box-shadow:0 0 0 3px rgba(122,90,56,.1)}
.btn-submit{background:linear-gradient(135deg,var(--brown),var(--brown-d));box-shadow:0 6px 25px rgba(122,90,56,.2)}
.btn-submit:hover{box-shadow:0 12px 35px rgba(122,90,56,.3)}
.info-card .info-icon{background:rgba(122,90,56,.06)}
.info-card .info-icon svg{color:var(--brown)}
.info-card a{color:var(--brown)}
.contact-hours .highlight{color:var(--brown)}

/* FLOATING */
.float-btn.phone{background:var(--brown)}
.float-btn::after{display:none !important}
@keyframes fpulse{0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.15)}50%{box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 8px rgba(122,90,56,.12)}}

.demo-tag{border-color:var(--brd2);color:var(--brown)}
@keyframes hscale{0%{transform:scale(1)}100%{transform:scale(1.06)}}
@keyframes hfade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* FAQ OVERRIDE */
.faq-item summary { color: var(--brown-d); }
.faq-item summary:hover, .faq-item details[open] summary { color: var(--brown); }

/* NEW SECTIONS */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 40px auto 0; padding: 0 5%; }
.promo-card { background: var(--white); border-radius:0; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--brd); transition: all .4s var(--ease); }
.promo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--brd2); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; max-width: 1200px; margin: 40px auto 0; padding: 0 5%; }
.gallery-item { border-radius:0; overflow: hidden; aspect-ratio: 1/1; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery-item:hover img { transform: scale(1.06); }

.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1200px; margin: 40px auto 0; padding: 0 5%; }
.news-card { background: var(--white); border-radius:0; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--brd); transition: all .4s var(--ease); }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); border-color: var(--brd2); }

.svc-more-btn:hover, .doc-view-btn:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: white !important; }

.hero .btn-outline { color: white; border-color: rgba(255,255,255,0.4); }
.hero .btn-outline:hover { background: white; color: var(--brown); border-color: white; }