/*
Theme Name: ATVSTP Mẫu 1
Theme URI: https://atvstp.org.vn
Description: Theme giao diện cổng tư vấn An Toàn Vệ Sinh Thực Phẩm cho ATVSTP.org.vn. Đồng bộ giao diện trang chủ, danh mục, bài viết, trang, tìm kiếm, 404. Không dùng jQuery/Bootstrap, responsive tốt.
Author: ATVSTP
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU GPL v2 or later
Text Domain: atvstp
Tags: vietnamese, business, two-columns, custom-menu, featured-images, translation-ready
*/

/* ===========================================================
   ATVSTP.org.vn — Mẫu 1 (Cổng hành chính) — CSS dùng chung
   =========================================================== */
:root{
  --g900:#0c3a1c; --g800:#10532a; --g700:#166534; --g600:#15803d;
  --g500:#1f9d4d; --g400:#34b563; --g100:#dcf5e3; --g50:#f1faf4;
  --gold:#e0a915; --gold-d:#b9860a;
  --ink:#16241b; --muted:#4f6358; --line:#d9e6dd;
  --paper:#ffffff; --bg:#f4f8f5;
  --shadow:0 2px 8px rgba(12,58,28,.06), 0 8px 28px rgba(12,58,28,.05);
  --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--g600);color:#fff}
.btn-primary:hover{background:var(--g700)}
.btn-gold{background:var(--gold);color:#3a2a00}
.btn-gold:hover{background:var(--gold-d);color:#fff}
.btn-out{background:#fff;color:var(--g700);border-color:var(--line)}
.btn-out:hover{border-color:var(--g500);color:var(--g700)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.sec{padding:64px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g600)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
h1,h2,h3{line-height:1.18;letter-spacing:-.01em}
.h-sec{font-size:clamp(24px,4.2vw,38px);font-weight:800;color:var(--g900)}
.sub-sec{color:var(--muted);max-width:640px;margin-top:12px}
.center{text-align:center}
.center .sub-sec{margin-left:auto;margin-right:auto}

/* ===== UTILITY BAR ===== */
.util{background:var(--g900);color:#cfe9d6;font-size:13px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:18px}
.util a{color:#cfe9d6}
.util a:hover{color:var(--gold)}
.util .left{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.util .left span{display:inline-flex;gap:7px;align-items:center}
.util .right{display:flex;gap:16px;align-items:center}
.util .ico{width:14px;height:14px;opacity:.85}
@media(max-width:860px){.util .left span.hide-sm{display:none}}
@media(max-width:560px){.util .right{display:none}}

/* ===== HEADER ===== */
header.main{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header.main .wrap{display:flex;align-items:center;gap:24px;height:78px}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo img{height:46px;width:auto}
nav.desk{display:flex;gap:2px;margin-left:auto}
nav.desk a{padding:10px 13px;font-weight:600;font-size:14.5px;color:#2a3b30;border-radius:6px;transition:.15s;position:relative;white-space:nowrap}
nav.desk a:hover{color:var(--g600);background:var(--g50)}
nav.desk a.active{color:var(--g700)}
nav.desk a.active::after{content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:3px;background:var(--g600);border-radius:3px}
/* dropdown */
nav.desk .has-sub{position:relative}
nav.desk .has-sub>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:6px;vertical-align:2px;opacity:.6}
nav.desk .submenu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:248px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60}
nav.desk .has-sub:hover .submenu{opacity:1;visibility:visible;transform:none}
nav.desk .submenu a{display:block;padding:11px 14px;border-radius:7px;font-size:14px;color:#33453a}
nav.desk .submenu a::after{display:none}
nav.desk .submenu a:hover{background:var(--g50);color:var(--g700)}
.head-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.hotline-mini{display:flex;align-items:center;gap:10px}
.hotline-mini .ring{width:40px;height:40px;border-radius:50%;background:var(--g50);display:grid;place-items:center;color:var(--g600)}
.hotline-mini b{display:block;font-size:16px;color:var(--g700);line-height:1.1}
.hotline-mini small{font-size:11px;color:var(--muted)}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:22px;height:2px;background:var(--g800);border-radius:2px;transition:.2s}
@media(max-width:1080px){nav.desk,.head-cta{display:none}.burger{display:flex}header.main .wrap{height:68px}.logo img{height:40px}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;visibility:hidden;opacity:0;transition:.25s}
.drawer.open{visibility:visible;opacity:1}
.drawer .scrim{position:absolute;inset:0;background:rgba(8,28,16,.5)}
.drawer .panel{position:absolute;top:0;right:0;height:100%;width:86%;max-width:370px;background:#fff;transform:translateX(100%);transition:.28s;display:flex;flex-direction:column;padding:20px;overflow-y:auto}
.drawer.open .panel{transform:none}
.drawer .panel .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer .panel .top img{height:38px}
.drawer .x{width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:22px;cursor:pointer;color:var(--g800)}
.drawer nav{display:flex;flex-direction:column;gap:2px}
.drawer nav a{padding:13px 12px;font-weight:600;font-size:16px;border-bottom:1px solid var(--line);color:#243228}
.drawer nav a.active{color:var(--g700)}
.drawer nav .sub a{padding-left:26px;font-weight:500;font-size:14.5px;color:var(--muted)}
.drawer .dcta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.drawer .dcta .btn{justify-content:center;width:100%}

/* ===== PAGE BANNER (sub-page hero) ===== */
.banner{background:linear-gradient(120deg,var(--g900),var(--g700) 75%);color:#fff;position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;right:-120px;top:-90px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(224,169,21,.16),transparent 62%)}
.banner .wrap{position:relative;z-index:2;padding:48px 20px 52px}
.banner h1{font-size:clamp(26px,4.2vw,40px);font-weight:800;margin-bottom:10px}
.banner p{color:#d4ebdd;max-width:680px;font-size:16px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#bfe0cb;margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a{color:#bfe0cb}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .cur{color:#fff;font-weight:600}

/* ===== LAYOUT WITH SIDEBAR ===== */
.layout{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.layout.left-aside{grid-template-columns:340px 1fr}
@media(max-width:980px){.layout,.layout.left-aside{grid-template-columns:1fr;gap:48px}aside.sidebar{order:2}}

/* ===== SIDEBAR WIDGETS ===== */
aside.sidebar{display:grid;gap:24px;position:sticky;top:90px}
@media(max-width:980px){aside.sidebar{position:static}}
.widget{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.widget .wtitle{font-size:16px;font-weight:800;color:var(--g900);padding-bottom:12px;margin-bottom:14px;border-bottom:2px solid var(--g50);position:relative;display:flex;align-items:center;gap:8px}
.widget .wtitle::before{content:"";width:4px;height:18px;background:var(--g500);border-radius:3px}
.searchbox{display:flex;border:1.5px solid var(--line);border-radius:8px;overflow:hidden}
.searchbox input{flex:1;border:none;padding:11px 14px;font-family:inherit;font-size:14.5px;outline:none;background:#fbfdfb}
.searchbox button{border:none;background:var(--g600);color:#fff;padding:0 14px;cursor:pointer;display:grid;place-items:center}
.searchbox button:hover{background:var(--g700)}
.catlist{list-style:none;display:grid;gap:2px}
.catlist a{display:flex;justify-content:space-between;align-items:center;padding:10px 6px;font-size:14.5px;color:#33453a;border-bottom:1px solid var(--g50);transition:.15s}
.catlist a:last-child{border-bottom:none}
.catlist a:hover{color:var(--g700);padding-left:12px}
.catlist .cnt{background:var(--g50);color:var(--g600);font-size:12px;font-weight:700;padding:2px 9px;border-radius:20px}
.recent{display:grid;gap:14px}
.recent a{display:flex;gap:12px;align-items:flex-start}
.recent .rthumb{width:64px;height:60px;border-radius:8px;flex-shrink:0;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 8px,#e6f0ea 8px,#e6f0ea 16px);border:1px solid var(--line);display:grid;place-items:center;color:var(--g400)}
.recent b{font-size:13.5px;font-weight:600;color:var(--g900);line-height:1.35;display:block}
.recent a:hover b{color:var(--g600)}
.recent .rdate{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px}
.tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.tagcloud a{font-size:13px;color:#33453a;background:var(--g50);border:1px solid var(--line);padding:6px 12px;border-radius:20px;transition:.15s}
.tagcloud a:hover{background:var(--g600);color:#fff;border-color:var(--g600)}
.widget.cta-w{background:linear-gradient(135deg,var(--g800),var(--g600));border:none;color:#fff;text-align:center}
.widget.cta-w .ring{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;margin:0 auto 14px}
.widget.cta-w h4{font-size:17px;font-weight:800;margin-bottom:6px}
.widget.cta-w p{font-size:13.5px;color:#d4ebdd;margin-bottom:8px}
.widget.cta-w .ph{font-size:22px;font-weight:800;color:var(--gold);margin-bottom:14px}
.widget.cta-w .btn{width:100%;justify-content:center;background:var(--gold);color:#3a2a00}
.widget.cta-w .btn:hover{background:#fff}

/* ===== ARCHIVE / POST CARDS ===== */
.arc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.arc-head h2{font-size:20px;font-weight:800;color:var(--g900)}
.arc-head .count{font-size:13.5px;color:var(--muted)}
.postcard{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:240px 1fr;transition:.2s;margin-bottom:22px}
.postcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.postcard .pthumb{background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 12px,#e6f0ea 12px,#e6f0ea 24px);display:grid;place-items:center;color:var(--g400);font-family:ui-monospace,monospace;font-size:12px;min-height:180px;position:relative}
.postcard .pcat{position:absolute;top:12px;left:12px;background:var(--g600);color:#fff;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:6px}
.postcard .pbody{padding:22px 24px;display:flex;flex-direction:column}
.postcard .pmeta{display:flex;gap:16px;font-size:12.5px;color:var(--muted);margin-bottom:9px;flex-wrap:wrap}
.postcard .pmeta span{display:flex;align-items:center;gap:6px}
.postcard h3{font-size:18.5px;font-weight:700;color:var(--g900);line-height:1.3;margin-bottom:9px}
.postcard:hover h3{color:var(--g600)}
.postcard p{font-size:14px;color:var(--muted);flex:1}
.postcard .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;font-size:14px;color:var(--g600)}
@media(max-width:560px){.postcard{grid-template-columns:1fr}.postcard .pthumb{min-height:150px}}

/* grid variant */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.post-grid .postcard{grid-template-columns:1fr;margin-bottom:0}
.post-grid .pthumb{min-height:170px;aspect-ratio:16/9}
@media(max-width:680px){.post-grid{grid-template-columns:1fr}}

/* ===== PAGINATION ===== */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:600;font-size:14.5px;color:#33453a;padding:0 12px;transition:.15s}
.pagination a:hover{border-color:var(--g500);color:var(--g700)}
.pagination .cur{background:var(--g600);color:#fff;border-color:var(--g600)}
.pagination .dots{border:none;background:transparent}

/* ===== SINGLE POST (prose) ===== */
.article{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.article .ahero{aspect-ratio:21/9;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 14px,#e6f0ea 14px,#e6f0ea 28px);display:grid;place-items:center;color:var(--g400);font-family:ui-monospace,monospace;font-size:13px;border-bottom:1px solid var(--line)}
.article .abody{padding:34px}
.article .acat{display:inline-block;background:var(--g600);color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:6px;margin-bottom:14px}
.article h1{font-size:clamp(24px,3.6vw,34px);font-weight:800;color:var(--g900);line-height:1.22;margin-bottom:14px}
.article .ameta{display:flex;gap:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.article .ameta span{display:flex;align-items:center;gap:7px}
.prose{font-size:16px;color:#2c3d33;line-height:1.78}
.prose>p{margin:0 0 18px}
.prose h2{font-size:23px;font-weight:800;color:var(--g900);margin:32px 0 14px;padding-left:14px;border-left:4px solid var(--g500)}
.prose h3{font-size:19px;font-weight:700;color:var(--g800);margin:26px 0 12px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:9px}
.prose ul li::marker{color:var(--g500)}
.prose a{color:var(--g600);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--g900)}
.prose blockquote{margin:22px 0;padding:18px 22px;background:var(--g50);border-left:4px solid var(--g500);border-radius:0 10px 10px 0;color:#33453a;font-size:15.5px}
.prose img,.prose .ph-img{margin:22px 0;border-radius:10px}
.prose .ph-img{aspect-ratio:16/9;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 12px,#e6f0ea 12px,#e6f0ea 24px);border:1px solid var(--line);display:grid;place-items:center;color:var(--g400);font-family:ui-monospace,monospace;font-size:12px}
.prose figure figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.prose table th{background:var(--g600);color:#fff;text-align:left;padding:12px 14px;font-weight:600}
.prose table td{padding:11px 14px;border-bottom:1px solid var(--line)}
.prose table tr:nth-child(even) td{background:var(--g50)}
.callout{display:flex;gap:14px;background:#fffaf0;border:1px solid #f3e2bb;border-radius:10px;padding:18px 20px;margin:22px 0}
.callout .ic{flex-shrink:0;color:var(--gold-d)}
.callout b{color:#7a5a08}
.callout p{font-size:14.5px;color:#5f4a14;margin:0}
.share{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.share b{font-size:14px;color:var(--g900)}
.share a{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;color:#fff}
.tags-inline{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags-inline a{font-size:13px;color:#33453a;background:var(--g50);border:1px solid var(--line);padding:5px 12px;border-radius:20px}
.tags-inline a:hover{background:var(--g600);color:#fff}

/* author box */
.authorbox{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:24px}
.authorbox .av{width:64px;height:64px;border-radius:50%;background:var(--g50);color:var(--g600);display:grid;place-items:center;font-weight:800;font-size:22px;flex-shrink:0}
.authorbox b{font-size:16px;color:var(--g900)}
.authorbox .role{font-size:13px;color:var(--g600);font-weight:600}
.authorbox p{font-size:13.5px;color:var(--muted);margin-top:5px}

/* related */
.related-head{font-size:20px;font-weight:800;color:var(--g900);margin:36px 0 18px}

/* ===== SERVICE DETAIL ===== */
.svc-detail .lead-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin-bottom:24px}
.svc-detail .lead-box p{font-size:16px;color:#33453a}
.benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
.benefit{display:flex;gap:13px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.benefit .ic{flex-shrink:0;width:42px;height:42px;border-radius:9px;background:var(--g50);color:var(--g600);display:grid;place-items:center}
.benefit b{font-size:15px;color:var(--g900);display:block;margin-bottom:3px}
.benefit p{font-size:13.5px;color:var(--muted)}
@media(max-width:560px){.benefit-grid{grid-template-columns:1fr}}
.doclist{list-style:none;display:grid;gap:10px;margin:8px 0 0}
.doclist li{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:13px 16px;font-size:14.5px;color:#33453a}
.doclist li .ck{flex-shrink:0;color:var(--g500);margin-top:2px}

/* ===== CONTACT PAGE ===== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;text-align:center}
.ct-card .ic{width:56px;height:56px;border-radius:14px;background:var(--g50);color:var(--g600);display:grid;place-items:center;margin:0 auto 14px}
.ct-card b{font-size:16px;color:var(--g900);display:block;margin-bottom:6px}
.ct-card p{font-size:14px;color:var(--muted)}
.ct-card a{color:var(--g600);font-weight:600}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.map-embed{border-radius:14px;overflow:hidden;border:1px solid var(--line);height:380px;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 16px,#e6f0ea 16px,#e6f0ea 32px);display:grid;place-items:center;color:var(--muted);font-family:ui-monospace,monospace;font-size:13px}
.map-embed iframe{width:100%;height:100%;border:0}

/* ===== generic intro section heading ===== */
.section-head{margin-bottom:28px}
.section-head .eyebrow{margin-bottom:10px}

/* ===== ABOUT page extras ===== */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.value{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.value .ic{width:52px;height:52px;border-radius:12px;background:var(--g50);color:var(--g600);display:grid;place-items:center;margin-bottom:14px}
.value h3{font-size:17px;font-weight:700;color:var(--g900);margin-bottom:7px}
.value p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.value-grid{grid-template-columns:1fr}}
.milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.ms{text-align:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.ms b{font-size:32px;font-weight:800;color:var(--g600);display:block;line-height:1}
.ms span{font-size:13.5px;color:var(--muted);margin-top:7px;display:block}
@media(max-width:680px){.milestones{grid-template-columns:1fr 1fr}}

/* ===== CONTACT / FORM (shared block) ===== */
.contact{background:linear-gradient(120deg,var(--g900),var(--g700));color:#fff}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact h2{font-size:clamp(24px,4vw,34px);font-weight:800}
.contact .lead{color:#d4ebdd;margin:14px 0 26px}
.cinfo{display:grid;gap:16px}
.cinfo .row{display:flex;gap:14px;align-items:flex-start}
.cinfo .ic{width:44px;height:44px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0}
.cinfo b{font-size:15px}
.cinfo span{font-size:14px;color:#cfe9d6}
.form-card{background:#fff;border-radius:14px;padding:30px;color:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.25)}
.form-card h3{font-size:20px;font-weight:800;color:var(--g900)}
.form-card p.fp{font-size:14px;color:var(--muted);margin:6px 0 20px}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:13px;font-weight:600;color:#33453a;margin-bottom:6px}
.fld label .req{color:#d23}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);background:#fbfdfb;transition:.15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--g500);background:#fff;box-shadow:0 0 0 3px var(--g100)}
.form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card .btn{width:100%;justify-content:center;margin-top:6px;font-size:16px;padding:14px}
.note{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center}
@media(max-width:880px){.contact .wrap{grid-template-columns:1fr;gap:34px}.form-card .row2{grid-template-columns:1fr}}

/* ===== home-only sections (hero, qstrip, svc, stats, steps, about, price, news, faq) ===== */
.hero{background:linear-gradient(120deg,var(--g900),var(--g700) 70%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(224,169,21,.18),transparent 62%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:60px 20px;position:relative;z-index:2}
.hero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:7px 14px;border-radius:30px;font-size:13px;font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(28px,5vw,46px);font-weight:800;margin-bottom:18px}
.hero h1 .y{color:var(--gold)}
.hero p.lead{font-size:clamp(16px,2.2vw,18px);color:#dcefe2;max-width:560px;margin-bottom:28px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap}
.hero .trust{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero .trust div{display:flex;flex-direction:column}
.hero .trust b{font-size:24px;font-weight:800;color:#fff}
.hero .trust span{font-size:13px;color:#bfe0cb}
.hero-card{background:#fff;border-radius:14px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.28)}
.cert-ph{aspect-ratio:564/720;border-radius:8px;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 12px,#e6f0ea 12px,#e6f0ea 24px);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:var(--muted);padding:24px}
.cert-ph .seal{width:74px;height:74px;border-radius:50%;border:3px dashed var(--g400);display:grid;place-items:center;color:var(--g600);font-weight:800;font-size:12px}
.cert-ph code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#fff;border:1px solid var(--line);padding:4px 8px;border-radius:5px}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr;gap:34px}.hero-card{max-width:340px;margin:0 auto}}

.qstrip{background:#fff;border-bottom:1px solid var(--line)}
.qstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.qstrip a{display:flex;align-items:center;gap:14px;padding:22px 18px;border-right:1px solid var(--line);transition:.15s}
.qstrip a:last-child{border-right:none}
.qstrip a:hover{background:var(--g50)}
.qstrip .qi{width:46px;height:46px;border-radius:8px;background:var(--g50);color:var(--g600);display:grid;place-items:center;flex-shrink:0}
.qstrip b{font-size:15px;font-weight:700;color:var(--g900);display:block;line-height:1.25}
.qstrip small{font-size:12px;color:var(--muted)}
@media(max-width:880px){.qstrip .wrap{grid-template-columns:1fr 1fr}.qstrip a:nth-child(2){border-right:none}.qstrip a:nth-child(1),.qstrip a:nth-child(2){border-bottom:1px solid var(--line)}}
@media(max-width:520px){.qstrip .wrap{grid-template-columns:1fr}.qstrip a{border-right:none;border-bottom:1px solid var(--line)}}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.svc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px;transition:.2s;position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g500);transform:scaleY(0);transform-origin:top;transition:.25s}
.svc:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--g100)}
.svc:hover::before{transform:scaleY(1)}
.svc .num{font-size:13px;font-weight:800;color:var(--g400);letter-spacing:.1em}
.svc .ic{width:54px;height:54px;border-radius:10px;background:var(--g50);color:var(--g600);display:grid;place-items:center;margin:14px 0 16px}
.svc h3{font-size:19px;font-weight:700;color:var(--g900);margin-bottom:8px}
.svc p{font-size:14.5px;color:var(--muted)}
.svc .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:14px;color:var(--g600)}
@media(max-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

.stats{background:linear-gradient(120deg,var(--g800),var(--g600));color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:48px 20px;text-align:center}
.stats .st b{display:block;font-size:clamp(30px,5vw,44px);font-weight:800;line-height:1}
.stats .st .y{color:var(--gold)}
.stats .st span{font-size:14px;color:#cfe9d6;margin-top:8px;display:block}
.stats .st+.st{border-left:1px solid rgba(255,255,255,.16)}
@media(max-width:680px){.stats .wrap{grid-template-columns:1fr 1fr;gap:30px 10px}.stats .st+.st{border-left:none}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;position:relative}
.step{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 22px;position:relative}
.step .n{width:46px;height:46px;border-radius:50%;background:var(--g600);color:#fff;font-weight:800;font-size:18px;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:17px;font-weight:700;color:var(--g900);margin-bottom:7px}
.step p{font-size:14px;color:var(--muted)}
.step .arr{position:absolute;right:-18px;top:42px;color:var(--g400);z-index:2}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}.step .arr{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

.about{background:#fff}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about .imgwrap{position:relative}
.ph-photo{aspect-ratio:4/3;border-radius:12px;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 14px,#e6f0ea 14px,#e6f0ea 28px);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
.ph-photo code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:#fff;border:1px solid var(--line);padding:5px 10px;border-radius:6px}
.about .floatcard{position:absolute;right:-14px;bottom:-22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:18px 20px;display:flex;gap:14px;align-items:center}
.about .floatcard .ring{width:48px;height:48px;border-radius:50%;background:var(--g50);display:grid;place-items:center;color:var(--g600)}
.about .floatcard b{font-size:22px;color:var(--g700)}
.about .floatcard span{font-size:12.5px;color:var(--muted);display:block}
.checklist{list-style:none;margin-top:24px;display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start}
.checklist .ck{flex-shrink:0;width:26px;height:26px;border-radius:6px;background:var(--g50);color:var(--g600);display:grid;place-items:center;margin-top:2px}
.checklist b{font-weight:700;color:var(--g900);font-size:15.5px}
.checklist p{font-size:14px;color:var(--muted)}
@media(max-width:880px){.about .wrap{grid-template-columns:1fr;gap:54px}.about .floatcard{right:14px}}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.price{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;text-align:center;position:relative}
.price.feat{border:2px solid var(--g500);box-shadow:var(--shadow)}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#3a2a00;font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px}
.price h3{font-size:18px;font-weight:700;color:var(--g900)}
.price .amt{font-size:30px;font-weight:800;color:var(--g700);margin:12px 0 4px}
.price .amt small{font-size:14px;font-weight:600;color:var(--muted)}
.price .pl{list-style:none;text-align:left;margin:18px 0;display:grid;gap:10px}
.price .pl li{display:flex;gap:9px;font-size:14px;color:#3a4d42}
.price .pl li::before{content:"✓";color:var(--g500);font-weight:800}
.price .btn{width:100%;justify-content:center}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}.price.feat{order:-1}}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.news{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.2s}
.news:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.news .thumb{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#eef5f0,#eef5f0 12px,#e6f0ea 12px,#e6f0ea 24px);display:grid;place-items:center;color:var(--muted);font-family:ui-monospace,monospace;font-size:12px;border-bottom:1px solid var(--line)}
.news .body{padding:20px}
.news .date{font-size:12.5px;color:var(--g600);font-weight:600;display:flex;align-items:center;gap:7px}
.news h3{font-size:16.5px;font-weight:700;color:var(--g900);margin:8px 0;line-height:1.35}
.news p{font-size:14px;color:var(--muted)}
@media(max-width:880px){.news-grid{grid-template-columns:1fr}}

.faq{max-width:820px;margin:42px auto 0}
.qa{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:16px;color:var(--g900)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--g50);color:var(--g600);display:grid;place-items:center;font-size:18px;transition:.2s}
.qa[open] summary .pm{transform:rotate(45deg);background:var(--g600);color:#fff}
.qa .ans{padding:0 22px 20px;color:var(--muted);font-size:14.5px}

/* ===== FOOTER ===== */
footer{background:#0a2e16;color:#a9c8b5;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding:56px 20px 30px}
footer img.flogo{height:42px;margin-bottom:16px}
footer p{color:#9cc0a8;font-size:13.5px;margin-bottom:8px}
footer h4{color:#fff;font-size:15px;font-weight:700;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px}
footer ul a{color:#a9c8b5;font-size:13.5px}
footer ul a:hover{color:var(--gold)}
footer .fcon{display:grid;gap:8px;font-size:13.5px}
footer .fcon span{display:flex;gap:9px}
.map-ph{margin-top:12px;height:120px;border-radius:8px;background:repeating-linear-gradient(135deg,#0f3d20,#0f3d20 10px,#0c331a 10px,#0c331a 20px);border:1px solid #1d4a2c;display:grid;place-items:center;color:#7fae90;font-family:ui-monospace,monospace;font-size:12px}
.copy{border-top:1px solid #16432490}
.copy .wrap{display:flex;justify-content:space-between;gap:14px;padding:18px 20px;font-size:13px;color:#86a892;flex-wrap:wrap}
@media(max-width:880px){footer .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .wrap{grid-template-columns:1fr}}

/* ===== FLOATING ===== */
.floats{position:fixed;right:16px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:12px;align-items:center}
.fbtn{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22);cursor:pointer;position:relative}
.fbtn.phone{background:var(--g600);animation:pulse 2s infinite}
.fbtn.zalo{background:#0068ff}
.fbtn.mess{background:linear-gradient(135deg,#00b2ff,#006aff)}
.fbtn.top{background:#fff;color:var(--g700);border:1px solid var(--line);width:46px;height:46px;opacity:0;pointer-events:none;transition:.2s}
.fbtn.top.show{opacity:1;pointer-events:auto}
.fbtn small{position:absolute;font-size:9px;font-weight:700;bottom:-3px;background:#fff;color:#0068ff;padding:1px 4px;border-radius:6px;border:1px solid #cfe0ff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(21,128,61,.5)}70%{box-shadow:0 0 0 14px rgba(21,128,61,0)}100%{box-shadow:0 0 0 0 rgba(21,128,61,0)}}

/* sticky mobile hotline bar */
.mbar{display:none}
@media(max-width:560px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;left:0;right:0;z-index:95;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .mbar a{padding:13px;text-align:center;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
  .mbar a.call{color:#fff;background:var(--g600)}
  .mbar a.zalo{color:var(--g700)}
  .floats{bottom:70px}
  body{padding-bottom:52px}
}

/* ===========================================================
   WordPress compatibility — bổ sung cho theme ATVSTP
   =========================================================== */

/* Ảnh thật phủ kín vùng placeholder */
.postcard .pthumb{position:relative;overflow:hidden}
.postcard .pthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news .thumb{position:relative;overflow:hidden}
.news .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article .ahero{position:relative}
.article .ahero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.recent .rthumb{position:relative;overflow:hidden}
.recent .rthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about .ph-photo{position:relative;overflow:hidden}
.about .ph-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-txt{font-family:ui-monospace,monospace;font-size:12px;color:var(--g400)}
.logo img,.logo .custom-logo{height:46px;width:auto}
@media(max-width:1080px){.logo img,.logo .custom-logo{height:40px}}

/* Nội dung trang đọc dễ chịu */
.page-prose{max-width:880px;margin-left:auto;margin-right:auto}
.prose img{height:auto}
.no-results{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px;color:var(--muted)}

/* Sticky header dưới admin bar */
.admin-bar header.main{top:32px}
@media screen and (max-width:782px){.admin-bar header.main{top:46px}}

/* ===== Contact Form 7 trong .form-card ===== */
.form-card .wpcf7{margin-top:4px}
.form-card .wpcf7-form p{margin:0 0 14px}
.form-card .wpcf7-form label{display:block;font-size:13px;font-weight:600;color:#33453a;margin-bottom:0}
.form-card .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.form-card .wpcf7-form select,
.form-card .wpcf7-form textarea,
.atvstp-fallback-form input,.atvstp-fallback-form textarea,.atvstp-fallback-form select{
  width:100%;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;margin-top:6px;
  font-family:inherit;font-size:15px;color:var(--ink);background:#fbfdfb;transition:.15s
}
.form-card .wpcf7-form input:focus,.form-card .wpcf7-form select:focus,.form-card .wpcf7-form textarea:focus,
.atvstp-fallback-form input:focus,.atvstp-fallback-form textarea:focus{
  outline:none;border-color:var(--g500);background:#fff;box-shadow:0 0 0 3px var(--g100)
}
.form-card .wpcf7-submit,.atvstp-fallback-form button{
  width:100%;background:var(--g600);color:#fff;border:none;border-radius:6px;padding:14px 22px;
  font-family:inherit;font-weight:600;font-size:16px;cursor:pointer;margin-top:6px;transition:.18s
}
.form-card .wpcf7-submit:hover,.atvstp-fallback-form button:hover{background:var(--g700)}
.atvstp-fallback-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:880px){.atvstp-fallback-form .row2{grid-template-columns:1fr}}
.wpcf7-response-output{border-radius:8px;font-size:14px;margin:14px 0 0 !important;padding:10px 14px !important}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output{border-color:#e0a915 !important;background:#fffaf0;color:#7a5a08}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--g500) !important;background:var(--g50);color:var(--g700)}
.wpcf7-not-valid-tip{color:#d23;font-size:12.5px}

/* ===== WordPress core alignment & blocks ===== */
.alignleft{float:left;margin:6px 24px 16px 0}
.alignright{float:right;margin:6px 0 16px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide{max-width:1100px}
.alignfull{max-width:none}
.prose .wp-caption,.prose figure{max-width:100%}
.prose .wp-caption-text,.prose figcaption{text-align:center;font-size:13px;color:var(--muted);margin-top:8px;font-style:italic}
.prose .wp-block-image img{border-radius:10px}
.prose iframe,.prose embed,.prose object,.prose video{max-width:100%}
.sticky{}
.bypostauthor{}
.page-links{margin:20px 0;display:flex;gap:8px;flex-wrap:wrap;font-weight:600}
.page-links a,.page-links>span{min-width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:8px;padding:0 10px}
.page-links a:hover{border-color:var(--g500);color:var(--g700)}

/* ===== Comments ===== */
.comments-area .comment-list .comment-body{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.comments-area .comment-list .children{list-style:none;margin:14px 0 0 24px;display:grid;gap:14px}
.comments-area .comment-author{font-weight:700;color:var(--g900);font-size:14px}
.comments-area .comment-author img{border-radius:50%;vertical-align:middle;margin-right:8px}
.comments-area .comment-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.comment-respond{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.comment-respond label{display:block;font-size:13px;font-weight:600;color:#33453a;margin:10px 0 6px}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{
  width:100%;border:1.5px solid var(--line);border-radius:8px;padding:11px 14px;font-family:inherit;font-size:15px;background:#fbfdfb
}
.comment-respond input:focus,.comment-respond textarea:focus{outline:none;border-color:var(--g500);background:#fff;box-shadow:0 0 0 3px var(--g100)}

/* ===== Accessibility ===== */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;word-wrap:normal !important}
.screen-reader-text:focus{background:#fff;clip:auto;clip-path:none;color:var(--g700);display:block;height:auto;left:6px;top:6px;padding:12px 18px;width:auto;z-index:100000;border-radius:6px;box-shadow:var(--shadow)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--g500);outline-offset:2px}

/* Rank Math / Yoast breadcrumb đồng bộ style banner */
.banner .rank-math-breadcrumb,.banner > .wrap .breadcrumb{margin-bottom:18px}
.banner .rank-math-breadcrumb p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:13.5px;color:#bfe0cb}
.banner .rank-math-breadcrumb a{color:#bfe0cb}
.banner .rank-math-breadcrumb a:hover{color:var(--gold)}
.banner .rank-math-breadcrumb .separator{opacity:.55}
.banner .rank-math-breadcrumb .last{color:#fff;font-weight:600}

/* Ảnh giấy phép phủ kín khung hero */
.hero-card .cert-ph.has-img{padding:0;position:relative;overflow:hidden;background:none;border:none;gap:0}
.hero-card .cert-ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:8px}

/* Ghi chú trong khối "Đăng ký tư vấn miễn phí hôm nay" */
.contact .consult-note{margin-top:22px;padding:15px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--gold);border-radius:10px;font-size:14px;color:#e3f1e9;line-height:1.7}
.contact .consult-note strong{color:#fff}
.consult-note .hot{color:var(--gold);font-weight:800;white-space:nowrap}