/*
Theme Name: Bay Clinic Modern
Theme URI: https://example.org/
Author: Custom Studio
Description: Responsive Vietnamese clinic landing page with appointment form, medical specialties and image sections.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: bay-clinic
*/
:root{--blue:#273b88;--deep:#182c72;--green:#2ebc36;--orange:#ff8c2b;--ink:#183052}*{box-sizing:border-box}body{margin:0;font-family:Arial,'Helvetica Neue',sans-serif;color:#273449;line-height:1.65}a{text-decoration:none;color:inherit}.wrap{max-width:1160px;margin:auto;padding:0 22px}.top{padding:16px 0;background:white}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--blue);font-size:23px;line-height:1.15}.brand .mark{background:linear-gradient(135deg,#2d6bc7,#35c54a);color:white;border-radius:18px;padding:12px;font-size:30px}.brand small{display:block;font-size:11px;color:#27a542}.topinfo{display:flex;gap:36px;font-size:13px;color:#777}.topinfo b{display:block;font-size:17px;color:var(--orange)}.nav{background:var(--blue);color:white}.nav .wrap{display:flex;align-items:center;gap:0;flex-wrap:wrap}.nav a{padding:14px 16px;font-weight:700;font-size:14px}.nav a:hover,.nav a:first-child{background:var(--green)}.nav .call{margin-left:auto;background:var(--green);border-radius:4px}.hero{background:linear-gradient(90deg,rgba(18,35,93,.88),rgba(24,48,111,.55)),url('assets/hero.jpg') center/cover;min-height:430px;display:flex;align-items:center;color:white}.hero .wrap{width:100%}.hero .intro{max-width:620px}.eyebrow{color:#81ec91;font-weight:bold;letter-spacing:2px}.hero h1{font-size:clamp(35px,5vw,58px);line-height:1.13;margin:14px 0}.hero p{font-size:18px;max-width:530px}.btn{display:inline-block;border:0;background:var(--green);color:white;padding:12px 27px;border-radius:28px;font-weight:700;cursor:pointer}.btn:hover{filter:brightness(.92)}section{padding:65px 0}h2{font-size:30px;line-height:1.3;color:var(--blue);margin:0 0 20px}.about{display:grid;grid-template-columns:1fr 1.15fr;gap:45px;align-items:center}.about img{width:100%;height:350px;object-fit:cover;border-radius:22px}.special{background:var(--deep);color:white;text-align:center}.special h2,.testimonials h2{color:white}.special .sub{max-width:850px;margin:0 auto 30px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:17px}.special .card{background:white;color:var(--blue);border-radius:16px;overflow:hidden;font-weight:bold;box-shadow:0 8px 20px #0a185040}.special .card img{width:100%;height:170px;object-fit:cover}.special .card div{padding:13px 8px}.questions{background:#f4f8ff}.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.qgrid img{width:100%;border-radius:20px;height:300px;object-fit:cover}.qbox{background:white;padding:28px;border-radius:18px;box-shadow:0 5px 22px #182c7212}.testimonials{background:linear-gradient(120deg,#263c91,#4261ae);text-align:center;color:white}.quote{max-width:860px;margin:25px auto 0;background:#172c6b77;padding:25px;border-radius:16px}.support{text-align:center}.supportgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.supportgrid>div{border:1px solid #ffd4b1;border-radius:10px;padding:18px}.supportgrid b{color:var(--blue)}.appointment{background:linear-gradient(110deg,#203c88,#147c97);color:white}.appointment h2{color:white}.appointment .wrap{display:grid;grid-template-columns:1fr 1fr;gap:55px}.appointment form{display:grid;gap:12px}.appointment input,.appointment select,.appointment textarea{width:100%;padding:13px;border:1px solid #d8e0ef;border-radius:7px;font:inherit}.appointment textarea{min-height:80px}.notice{background:#eaffea;color:#14601a;padding:12px;border-radius:8px}.footer{background:#f6f8fb;padding:45px 0}.footgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px}.footgrid h3{color:var(--blue)}.copyright{background:var(--blue);text-align:center;color:#d8e2ff;padding:13px;font-size:13px}@media(max-width:850px){.topinfo{display:none}.cards{grid-template-columns:repeat(3,1fr)}.about,.qgrid,.appointment .wrap{grid-template-columns:1fr}.nav .call{margin-left:0}.footgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.cards{grid-template-columns:repeat(2,1fr)}.supportgrid,.footgrid{grid-template-columns:1fr}.nav a{padding:10px}.hero{min-height:390px}.hero h1{font-size:36px}section{padding:42px 0}}