
:root{--blue:#144c95;--blue2:#1957ad;--sky:#edf7ff;--teal:#14a7ba;--ink:#142338;--gray:#627388;--line:#dce9f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,'Segoe UI',sans-serif;color:var(--ink);line-height:1.65;background:#fff}a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding:0 22px}.notice{padding:10px 20px;background:#fef6df;color:#674b0b;font-size:13px;text-align:center}.top{background:#123d78;color:white;font-size:13px}.top>.wrap{display:flex;justify-content:space-between;gap:20px;padding-top:7px;padding-bottom:7px}.head{background:#fff;position:sticky;top:0;z-index:3;border-bottom:1px solid var(--line);box-shadow:0 6px 24px #1c4c7611}.head>.wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;line-height:1.25;color:var(--blue)}.brand img{width:64px;height:67px;object-fit:contain}.brand small{display:block;color:var(--gray);font-size:12px;font-weight:500}.nav{display:flex;gap:21px;font-weight:600;font-size:14px;flex-wrap:wrap}.nav a:hover{color:var(--teal)}.hero{background:#f2f8ff}.hero img{width:100%;display:block;height:auto;max-height:590px;object-fit:cover;object-position:center}.introbar{background:var(--blue);color:#fff;padding:18px 0}.introbar .wrap{display:flex;justify-content:space-between;gap:20px;align-items:center}.introbar strong{font-size:20px}.pill{display:inline-block;padding:11px 19px;border-radius:100px;background:#fff;color:var(--blue);font-weight:bold}.section{padding:68px 0}.section.alt{background:#f4f9fe}h2{font-size:30px;margin:0 0 14px;color:var(--blue);line-height:1.25}.eyebrow{font-weight:bold;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-size:12px}.subtitle{color:var(--gray);margin-top:0;max-width:680px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}.twocol img{width:100%;border-radius:18px;box-shadow:0 14px 35px #1e4c8817}.twocol p{margin:0 0 14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 5px 16px #2051850e}.card img{width:100%;height:190px;object-fit:cover;display:block}.card .label{padding:14px 16px;font-weight:700;color:var(--blue);font-size:15px}.grid.gallery{grid-template-columns:repeat(3,1fr)}.grid.gallery img{height:270px}.gallery .label{font-size:13px}.highlights{background:linear-gradient(120deg,#194e9a,#0e98bc);color:#fff}.highlights h2{color:#fff}.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.benefits div{border:1px solid #ffffff55;border-radius:12px;padding:18px 12px;background:#ffffff13;font-weight:600;text-align:center}.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.articles .card img{height:180px}.articles .label{color:var(--ink)}.foot{background:#0e2e5c;color:#eaf4ff;padding:38px 0}.foot .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px}.foot strong{font-size:20px}.foot small{opacity:.75}.muted{font-size:13px;color:var(--gray)}.foot .muted{color:#c9e1fc}.btn{display:inline-block;background:var(--teal);color:white;padding:10px 18px;border-radius:8px;font-weight:bold}.section-banner img{width:100%;display:block}.tag{font-size:11px;background:#e3f2fb;color:var(--blue);padding:3px 8px;border-radius:99px;margin-left:7px;font-weight:600}@media(max-width:850px){.grid{grid-template-columns:repeat(2,1fr)}.grid.gallery{grid-template-columns:repeat(2,1fr)}.benefits{grid-template-columns:repeat(2,1fr)}.articles{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}.nav{gap:10px}.head>.wrap{flex-direction:column;padding-bottom:12px}.top>.wrap,.introbar .wrap{flex-direction:column;align-items:flex-start}}@media(max-width:520px){.grid,.grid.gallery,.articles,.foot .wrap{grid-template-columns:1fr}.section{padding:46px 0}.brand{font-size:17px}.nav{font-size:12px;justify-content:center}.hero img{min-height:180px;object-fit:cover}.card img{height:210px}h2{font-size:26px}}


.breadcrumb{background:#edf7ff;padding:12px 0;color:#35516b;font-size:13px}
.page-hero{background:#eaf5fc;padding:56px 0 24px}
.page-hero h1{font-size:38px;color:#144c95;margin:8px 0 8px;line-height:1.2}
.page-hero p{max-width:850px}
.prose{max-width:850px;margin:auto}.prose h2{font-size:26px;margin-top:32px}.prose p{margin:0 0 18px}.prose ul{margin:0 0 20px;padding-left:24px}.prose li{padding:5px 0}
.notice-inline{background:#fff9e9;border:1px solid #ffe0a0;border-radius:10px;padding:16px;margin:16px 0 26px;color:#70500b}
.intro-photos{display:grid;grid-template-columns:1fr 1fr;gap:22px}.intro-photos img{width:100%;border-radius:12px;object-fit:cover;max-height:350px}
@media(max-width:700px){.page-hero h1{font-size:29px}.intro-photos{grid-template-columns:1fr}}


/* V3: các trang dịch vụ, phong cách tương đồng với V2 */
.service-card-link{display:block;height:100%}
.service-card-link:focus-visible,.nav a:focus-visible,.btn:focus-visible{outline:3px solid #008ca6;outline-offset:3px}
.service-card-link:hover .label{color:#078ca7}
.service-card-link:hover img{filter:saturate(1.12)}
.service-description{display:block;padding:0 16px 15px;color:var(--gray);font-size:13px;font-weight:400;line-height:1.5}
.service-hero{background:linear-gradient(120deg,#edf7ff,#f9fcff);padding:54px 0 46px}
.service-hero .twocol{grid-template-columns:1.15fr .85fr}
.service-hero h1{font-size:clamp(30px,4vw,44px);color:var(--blue);line-height:1.18;margin:10px 0 18px}
.service-hero p{font-size:17px;max-width:660px;color:#3c536a}
.service-hero img{width:100%;max-height:350px;object-fit:cover;border-radius:20px;border:1px solid #dce9f3;box-shadow:0 12px 30px #20518511}
.service-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.85fr);gap:38px;align-items:start}
.service-main h2{font-size:24px;margin-top:30px}
.service-main ul,.service-main ol{padding-left:22px}
.service-main li{margin-bottom:10px}
.service-box{border:1px solid var(--line);background:#f7fbff;border-radius:16px;padding:22px;position:sticky;top:145px}
.service-box h3{margin:0 0 14px;color:var(--blue);font-size:19px}
.service-box a{display:block;padding:9px 0;border-bottom:1px solid var(--line);color:#24476f}
.service-box a:last-child{border-bottom:0}
.service-box a[aria-current="page"]{font-weight:800;color:var(--teal)}
.notice-inline strong{color:#694b07}
.split-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.split-links .btn{font-size:14px}
.service-grid .card{height:100%}
@media(max-width:850px){.service-main{grid-template-columns:1fr}.service-box{position:static}.service-hero .twocol{grid-template-columns:1fr}}

/* V4: contact and request-appointment (offline-only, no network send) */
.nav .nav-booking{background:var(--teal);color:#fff;border-radius:8px;padding:9px 14px;align-self:center}
.nav .nav-booking:hover{background:#0c8299;color:#fff}
.contact-layout{display:grid;grid-template-columns:minmax(270px,.9fr) minmax(0,1.2fr);gap:28px;align-items:start}
.contact-panel,.booking-panel{border:1px solid var(--line);background:#fff;border-radius:18px;padding:27px;box-shadow:0 7px 23px #163e6410}
.contact-panel h2,.booking-panel h2{font-size:24px;margin-bottom:18px}
.contact-panel p{margin:0 0 18px}.contact-line{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.contact-line strong{display:block;color:var(--blue);font-size:14px;margin-bottom:4px}
.contact-line span{font-size:15px}.old-data{color:#596d81}.data-warning{margin-top:18px;font-size:13px;background:#fff6e8;border:1px solid #f3d59b;padding:12px 14px;border-radius:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-field{display:flex;flex-direction:column;gap:6px}
.form-field.full{grid-column:1 / -1}.form-field label{font-weight:700;color:#243e58;font-size:14px}
.form-field input,.form-field select,.form-field textarea,.result-textarea{width:100%;padding:12px 13px;font-family:inherit;font-size:15px;border:1px solid #bbcfdf;border-radius:9px;color:var(--ink);background:#fff}
.form-field :is(input,select,textarea):focus,.result-textarea:focus{outline:2px solid #1a9bad;outline-offset:2px}
.form-field input:invalid:not(:placeholder-shown){border-color:#b45309}
.form-field textarea{min-height:85px;resize:vertical}
.form-help{font-size:13px;color:#5b7185;line-height:1.5}
.form-actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:22px}
.form-actions button{border:none;border-radius:9px;background:var(--blue);color:#fff;padding:12px 17px;font-weight:700;font-size:15px;cursor:pointer}
.form-actions button:hover{background:#0d3b73}.form-actions button:focus-visible{outline:3px solid #1aa6b3;outline-offset:2px}
.result-box{margin-top:20px;padding:17px;background:#eef8fb;border:1px solid #b2dbe4;border-radius:12px}
.result-box[hidden]{display:none}.result-box h3{margin:0 0 8px;color:#145174}.result-textarea{min-height:180px;resize:vertical}
.result-box .attention{font-weight:800;color:#9a4c05}
.contact-steps{list-style:none;padding:0;margin:12px 0}.contact-steps li{padding:9px 0;border-bottom:1px solid var(--line)}
.contact-steps li:last-child{border-bottom:0}
@media(max-width:780px){.contact-layout{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-field.full{grid-column:auto}.contact-panel,.booking-panel{padding:21px}}

/* V5 — dedicated news and dental guide archive, offline preview */
.article-card{height:100%}.article-card .article-link{display:block;height:100%}.article-card .article-info{padding:18px}
.article-card img{height:185px}.article-card h3{font-size:17px;line-height:1.45;margin:6px 0 10px;color:var(--blue)}
.article-meta{font-size:13px;color:#566b82;font-weight:600}.article-status{font-size:13px;color:#64778c;margin:6px 0}
.read-more{color:#0c8399;font-size:14px;font-weight:700}.article-link:hover .read-more{text-decoration:underline}
.article-link:focus-visible,.phone-link:focus-visible{outline:3px solid #0da2af;outline-offset:3px}
.empty-editorial{background:#f5fafe;border:1px solid #d9e9f5;padding:24px;border-radius:14px;margin-top:34px}
.empty-editorial h2{font-size:22px}.news-promo{margin-top:20px;font-weight:600}.news-promo a{color:#1261a1;text-decoration:underline}
.article-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(240px,.75fr);gap:42px;align-items:start}
.article-detail h1{color:var(--blue);font-size:clamp(29px,4vw,42px);line-height:1.2;margin:12px 0 18px}
.article-hero-img{display:block;width:100%;max-height:400px;object-fit:contain;background:#f7f9fb;border-radius:16px;border:1px solid #e4ebf3}
.article-prose{font-size:16px;line-height:1.85}.article-prose h2{font-size:23px;margin-top:24px}.article-prose p{margin:10px 0 20px}
.editorial-disclaimer{padding:12px 16px;border-left:3px solid #128ca4;background:#f3fafb;font-size:14px}
.article-aside{background:#f5faff;border:1px solid #dae9f4;border-radius:16px;padding:24px}.article-aside h2{font-size:20px}.article-aside a{color:var(--blue);text-decoration:underline}
.source-note{font-size:12px;background:#f6f8fa;border-radius:10px;padding:12px;margin:25px 0;overflow-wrap:anywhere}.source-note a{color:var(--blue);text-decoration:underline}
.phone-item{padding:6px 0}.phone-link{color:#0c608f;font-weight:800;font-size:17px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:850px){.article-layout{grid-template-columns:1fr}.article-aside{order:2}.nav{gap:12px}}
