/* ===================================================
   PHÒNG KHÁM ĐA KHOA THỦY LONG — Page-specific styles
   Theme: Medical Blue & Cross
   =================================================== */

:root{
    --bg:#f5f9fd;--bg2:#eaf2fa;--bg3:#dde9f5;
    --teal:#1a6bb5;--teal-l:#4a9dd9;--teal-d:#0d4a8c;--teal-bg:rgba(26,107,181,.05);
    --blue:#2a7ec8;--blue-l:#5aaeea;
    --gold:#b5895a;--gold-l:#d4a574;
    --txt:#1a2a40;--txt-m:#5a6a80;--txt-s:#8e9bae;
    --brd:rgba(26,107,181,.1);--brd2:rgba(26,107,181,.2);
    --white:#ffffff;
    --shadow:0 4px 20px rgba(10,22,40,.06);--shadow-l:0 12px 40px rgba(10,22,40,.1);
}
body{background:var(--bg);color:var(--txt)}
::-webkit-scrollbar-thumb{background:var(--teal)}
::selection{background:rgba(26,107,181,.12);color:var(--teal-d)}

/* LOADER */
.loader-cross{width:40px;height:40px;position:relative;animation:lpulse 2s ease-in-out infinite}
.loader-cross::before,.loader-cross::after{content:'';position:absolute;background:var(--teal);border-radius:0}
.loader-cross::before{left:50%;top:6px;width:4px;height:28px;transform:translateX(-50%)}
.loader-cross::after{top:50%;left:6px;width:28px;height:4px;transform:translateY(-50%)}
.loader-txt{color:var(--teal)}

/* BREADCRUMB */
.breadcrumb{border-bottom-color:rgba(26,107,181,.06)}
.breadcrumb a{color:var(--teal)}.breadcrumb a:hover{color:var(--teal-d)}

/* NAV */
.nav.scrolled{border-bottom-color:rgba(26,107,181,.06)}
.nav-brand .name{color:var(--teal-d)}
.nav-toggle span{background:var(--teal-d)}
.nav-links a:hover{color:var(--teal)}
.nav-links a::after{background:linear-gradient(90deg,var(--teal),var(--blue))}
.nav-cta{background:linear-gradient(135deg,var(--teal),var(--teal-d)) !important;box-shadow:0 4px 20px rgba(26,107,181,.2) !important}
.nav-cta:hover{box-shadow:0 8px 30px rgba(26,107,181,.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(--teal-bg);border:1px solid var(--brd);font-family:var(--ff-h);font-size:.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-top:40px;margin-bottom:24px;width:fit-content;opacity:0;animation:hfade .8s ease .2s forwards}
.hero-pill .cross{font-size:.7rem;font-weight:800}
.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 .teal{color:var(--teal)}.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(--teal);margin-bottom:20px;opacity:0;animation:hfade .8s ease .55s forwards}
.hero-desc{font-size:.9rem;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-teal{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;border-radius:0;background:linear-gradient(135deg,var(--teal),var(--teal-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(26,107,181,.25);transition:all .4s var(--ease)}
.btn-teal:hover{transform:translateY(-3px);box-shadow:0 10px 35px rgba(26,107,181,.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(--teal);color:var(--teal)}

/* STATS */
.stats{background:linear-gradient(135deg,var(--teal),var(--teal-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(26,107,181,.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(--teal);background:var(--teal-bg);border-color:var(--brd)}
.sec-h2 em{color:var(--teal)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center;margin-top:48px}
.about-img .badge .yr{color:var(--teal)}
.about-text h3{font-family:var(--ff-h);font-size:1.15rem;font-weight:700;color:var(--teal-d);margin-bottom:14px}
.about-text p em{color:var(--teal)}
.chip:hover{border-color:var(--teal);box-shadow:0 4px 16px rgba(26,107,181,.08)}
.chip svg{color:var(--teal)}

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

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.feat-card{padding:clamp(24px,3vw,36px);border-radius:0;background:var(--bg2);border:1px solid var(--brd);text-align:center;transition:all .5s var(--ease);position:relative;overflow:hidden}
.feat-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--blue));border-radius:0;transform:scaleX(0);transition:transform .5s var(--ease)}
.feat-card:hover::before{transform:scaleX(1)}
.feat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-l);border-color:var(--brd2)}
.feat-icon{width:52px;height:52px;border-radius:0;background:linear-gradient(135deg,var(--teal-bg),rgba(42,110,184,.05));display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.feat-icon svg{width:22px;height:22px;color:var(--teal)}
.feat-card h3{font-family:var(--ff-h);font-size:.92rem;font-weight:700;color:var(--txt);margin-bottom:8px}
.feat-card p{font-size:.82rem;color:var(--txt-m);line-height:1.7}

/* PROCESS FLOW */
.flow-sec{background:var(--bg2);padding:clamp(80px,10vw,130px) 5%}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.flow-step{text-align:center;padding:24px 16px;background:var(--white);border-radius:0;border:1px solid var(--brd);transition:all .5s var(--ease);position:relative}
.flow-step::after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--teal);opacity:.3;z-index:2}
.flow-step:last-child::after{display:none}
.flow-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-l);border-color:var(--brd2)}
.flow-num{font-family:var(--ff-h);font-size:1.8rem;font-weight:800;color:var(--teal);opacity:.2;margin-bottom:8px}
.flow-step:hover .flow-num{opacity:1}
.flow-step h4{font-family:var(--ff-h);font-size:.85rem;font-weight:700;color:var(--teal-d);margin-bottom:6px}
.flow-step p{font-size:.78rem;color:var(--txt-m);line-height:1.6}

/* QUOTE */
.quote-sec{background:var(--bg2)}
.quote-sec::before{color:rgba(26,107,181,.04)}
.quote-inner blockquote{color:var(--txt)}
.quote-inner cite{color:var(--teal)}
.quote-inner .q-line{background:linear-gradient(90deg,var(--teal),var(--blue))}

/* CTA */
.cta-sec{background:linear-gradient(135deg,var(--teal),var(--teal-d))}
.btn-white{color:var(--teal-d)}

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

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

/* FLOATING */
.float-btn.phone{background:var(--teal)}
.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(26,107,181,.12)}}

.demo-tag{border-color:var(--brd2);color:var(--teal)}
@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(--teal-d); }
.faq-item summary:hover, .faq-item details[open] summary { color: var(--teal); }

/* DOCTORS */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 48px; }
.doctor-card { background: var(--white); border-radius:0; border: 1px solid var(--brd); overflow: hidden; transition: all 0.5s var(--ease); position: relative; }
.doctor-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-l); border-color: var(--brd2); }
.doc-img-wrap { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.doc-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.doctor-card:hover .doc-img-wrap img { transform: scale(1.08); }
.doc-exp-badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: linear-gradient(135deg, var(--gold), var(--gold-l)); color: white; padding: 6px 14px; border-radius:0; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 4px 15px rgba(181, 137, 90, 0.3); }

.doc-info .btn-teal { width: 100%; justify-content: center; padding: 12px 24px; font-size: 0.75rem; margin-top: 8px; }
.doc-info { padding: 24px; text-align: center; }
.doc-title { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.doc-info h3 { font-family: var(--ff-h); font-size: 1.25rem; font-weight: 800; color: var(--teal-d); margin-bottom: 6px; }
.doc-dept { font-size: 0.85rem; color: var(--txt-m); }

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