/*
Theme Name: Vẻ Đẹp Xứ Gò
Theme URI: https://vedepxugo.com
Author: Vẻ Đẹp Xứ Gò
Description: Theme thư viện số lưu giữ vẻ đẹp, văn hóa, lịch sử và con người Gò Công. Chuyển thể từ bản prototype tham chiếu, giữ nguyên tinh thần heritage/digital archive.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vedepxugo
*/

@font-face{
  font-family:"SG85-HIENKHANH1";
  src:url("./SG85-HIENKHANH1.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"VeDepXuGo";
  src:url("./VeDepXuGo-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --green:#163D2A;
  --green2:#234B37;
  --logo-ink:#474746;
  --ink:#1c1c1cd1;
  --cream:#F5F0E5;
  --paper:#FBFAF6;
  --line:#DED8CA;
  --muted:#74766E;
  --white:#FFFDF8;
  --sans:"Mona Sans",-apple-system,"Segoe UI",Arial,sans-serif;
  --display:"SG85-HIENKHANH1","Mona Sans",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font:400 15px/1.6 var(--sans)}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--sans);margin:0}

/* ---- topbar ---- */
.topbar{background:var(--green);color:#f7f3e8;font-size:12px}
.topbar-inner{max-width:1240px;margin:auto;min-height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;gap:16px}
.toplinks{display:flex;gap:22px;white-space:nowrap}
.toplinks span{opacity:.95}
@media(max-width:700px){.topbar-inner div:first-child{display:none}.toplinks{gap:14px;margin:auto}}

/* ---- nav ---- */
.nav{background:var(--white);border-bottom:1px solid #e6e0d4;position:sticky;top:0;z-index:30}
.nav-inner{max-width:1240px;margin:auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;padding:10px 5vw;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.logo-badge{display:flex;align-items:center;flex-shrink:0}
.logo-badge img{width:auto;height:34px;object-fit:contain;filter:brightness(0)}
.navlinks{display:flex;align-items:center;gap:26px;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.navlinks ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.navlinks li{display:flex}
.navlinks a{white-space:nowrap;color:#2a2a28;padding:4px 0;position:relative}
.navlinks a:hover{color:var(--green)}
.nav-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:#2a2a28;flex-shrink:0;border-radius:50%;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--cream);color:var(--green)}
.icon-btn svg{width:19px;height:19px}
.burger{display:none;border:none;background:none;padding:6px}
.burger svg{width:24px;height:24px;color:var(--green)}
.navlinks .mnav-toggle{display:none}

/* dropdown "Danh mục" trên nav desktop.
   .dropdown = vùng bắt hover vô hình, sát ngay dưới link (không khoảng hở)
   để rê chuột xuống không bị tính là rời khỏi menu.
   .dropdown-panel = khung trắng viền/đổ bóng hiển thị thật, nằm cách link
   bằng padding-top của .dropdown (vẫn nằm trong vùng đang hover). */
.navlinks li.has-dropdown{position:relative}
.navlinks li.has-dropdown > a:after{content:"";display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:6px;position:relative;top:-2px}
/* gạch chân chạy từ trái qua phải khi hover — áp cho mọi mục trên thanh menu chính
   (Trang chủ, Danh mục, Thư viện ảnh...) */
.navlinks > ul > li > a:before{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1.5px;background:var(--green);transition:width .25s ease}
.navlinks > ul > li:hover > a:before{width:100%}
.navlinks .dropdown{display:none;position:absolute;top:100%;left:0;margin:0;padding-top:14px;z-index:40}
.navlinks li.has-dropdown:hover .dropdown{display:block}
.navlinks .dropdown-panel{display:block;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 32px #00000022;min-width:230px;padding:8px 0;list-style:none;margin:0}
.navlinks .dropdown-panel li{display:block}
.navlinks .dropdown-panel a{display:block;padding:10px 18px;font-weight:500;white-space:nowrap;position:relative}
.navlinks .dropdown-panel a:hover{background:var(--cream);color:var(--green)}
.navlinks .dropdown-panel li:last-child a{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;color:var(--green)}

/* submenu cấp 2 (vd: Đời sống con người > Street life) — flyout sang phải */
.dropdown-panel li.has-submenu{position:relative;padding-right:14px;margin-right:-14px}
.dropdown-panel li.has-submenu > a{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dropdown-panel li.has-submenu > a:after{content:"";flex-shrink:0;display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
.dropdown-panel .submenu{display:none;position:absolute;left:100%;top:-9px;z-index:41}
.dropdown-panel li.has-submenu:hover .submenu{display:block}
.dropdown-panel .submenu-panel{background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 32px #00000022;min-width:200px;padding:8px 0;display:block;gap:0;max-height:calc(100vh - 150px);overflow-y:auto;list-style:none;margin:0}
.dropdown-panel .submenu-panel li{display:block}
.dropdown-panel .submenu-panel a{display:block;padding:10px 18px;font-weight:500;white-space:nowrap;position:relative}
.dropdown-panel .submenu-panel a:hover{background:var(--cream);color:var(--green)}
/* gạch chân chạy trái sang phải cho các mục con trong "Danh mục" (cả 2 cấp), chỉ trên desktop */
.navlinks .dropdown-panel a:before,
.navlinks .submenu-panel a:before{content:"";position:absolute;left:18px;right:18px;bottom:4px;width:0;height:1.5px;background:var(--green);transition:width .25s ease}
.navlinks .dropdown-panel a:hover:before,
.navlinks .submenu-panel a:hover:before{width:calc(100% - 36px)}

.nav-mobile{display:none;flex-direction:column;background:var(--white);border-top:1px solid var(--line);padding:6px 5vw 14px}
.nav-mobile.open{display:flex}
.nav-mobile ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav-mobile li{display:flex;flex-direction:column}
.nav-mobile a{padding:11px 0;font-size:13px;font-weight:600;letter-spacing:.02em;display:block;flex:1 1 auto}
.nav-mobile > ul > li{flex-direction:row;flex-wrap:wrap;border-bottom:1px solid #efe9dc}
.nav-mobile > ul > li > a{border-bottom:none}
/* .li có nút mở/đóng (Danh mục, và mỗi chuyên mục có chuyên mục con) luôn xếp
   link + nút trên cùng một hàng, phần danh mục con xuống hàng dưới */
.nav-mobile li.has-dropdown,
.nav-mobile li.has-submenu{flex-direction:row;flex-wrap:wrap}
.nav-mobile li.has-dropdown > a,
.nav-mobile li.has-submenu > a{border-bottom:none}
.nav-mobile li.has-dropdown > .dropdown,
.nav-mobile li.has-submenu > .submenu{order:3}

/* nút mũi tên thu/mở danh mục con — ẩn trên desktop (xem .navlinks .mnav-toggle bên dưới),
   trên di động thì đây là nút bấm riêng để không bị dính vào việc bấm vào link */
.mnav-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;border:none;background:none;color:var(--muted);padding:0;margin:0}
.mnav-toggle svg{width:16px;height:16px;transition:transform .15s}
.has-dropdown.mnav-open > .mnav-toggle svg,
.has-submenu.mnav-open > .mnav-toggle svg{transform:rotate(180deg)}

/* thu gọn mặc định: chỉ hiện khi .li cha có lớp .mnav-open (do JS bật khi bấm nút) */
.nav-mobile .dropdown,
.nav-mobile .submenu{display:none;position:static;padding:0;width:100%}
.nav-mobile .has-dropdown.mnav-open > .dropdown,
.nav-mobile .has-submenu.mnav-open > .submenu{display:block}

.nav-mobile .dropdown-panel{box-shadow:none;border:none;background:none;padding:0 0 6px 14px;margin:0}
.nav-mobile .dropdown-panel a{padding:9px 0;font-size:12px;font-weight:500;color:#55564f;border-bottom:1px dashed #efe9dc}
.nav-mobile .dropdown-panel li.has-submenu{padding-right:0;margin-right:0;border-bottom:1px dashed #efe9dc}
.nav-mobile .dropdown-panel li.has-submenu > a{border-bottom:none}
.nav-mobile .dropdown-panel .submenu-panel{display:block;box-shadow:none;border:none;background:none;min-width:0;max-height:none;overflow:visible;padding:0 0 4px 14px}
.nav-mobile .dropdown-panel .submenu-panel a{padding:8px 0;font-size:11.5px;color:#7a7b73;border-bottom:1px dashed #efe9dc}
.nav-mobile .submenu-panel{box-shadow:none;border:none;background:none;padding:0 0 4px 14px;margin:0}
.nav-mobile .submenu-panel a{padding:7px 0;font-size:11px;color:#74766e;border-bottom:1px dotted #efe9dc}
/* bỏ mũi tên kiểu desktop trong menu di động — đã có nút .mnav-toggle riêng */
.nav-mobile li.has-dropdown > a:after,
.nav-mobile .dropdown-panel li.has-submenu > a:after{display:none}
.nav-mobile .dropdown-panel li.has-submenu > a{justify-content:flex-start}

/* breadcrumb đầu trang bài viết / chuyên mục */
.breadcrumb{background:var(--cream);border-bottom:1px solid var(--line)}
.breadcrumb .inner{max-width:1240px;margin:auto;padding:10px 5vw;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--green);text-decoration:underline}
.breadcrumb .sep{color:#c9c2ae}
.breadcrumb .current{color:var(--ink);font-weight:600}

@media(max-width:920px){
  .navlinks{display:none}
  .burger{display:inline-flex}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:var(--cream)}
.hero-bg{position:absolute;inset:0;filter:sepia(.28) saturate(.85) brightness(1.03)}
.hero-bg img{opacity:.9}
.hero-fade{position:absolute;inset:0;background:linear-gradient(90deg,#f8f2e5 0%,rgba(248,242,229,.95) 32%,rgba(248,242,229,.55) 60%,rgba(248,242,229,.12) 100%)}
.hero-inner{position:relative;max-width:1240px;margin:auto;min-height:460px;display:flex;align-items:center;padding:48px 5vw;gap:5%}
.hero-copy{width:52%}
.eyebrow{text-transform:uppercase;font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--green2)}
.hero h1{font:400 64px/1.15 "VeDepXuGo",var(--sans);margin:12px 0 18px;color:#12261b;letter-spacing:.01em}
.hero p.desc{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.5;max-width:480px;margin:0 0 26px;color:var(--logo-ink)}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{border:1.5px solid var(--green);border-radius:5px;padding:12px 24px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:inline-block;transition:.15s}
.primary{background:var(--green);color:#fff}
.primary:hover{background:var(--green2)}
.btn:not(.primary){color:var(--green);background:transparent}
.btn:not(.primary):hover{background:#16 3d2a12}

.photo-stack{width:48%;height:400px;position:relative}
.photo{position:absolute;background:#fff;padding:6px;border-radius:6px;box-shadow:0 10px 28px #1d261d33}
.photo img{border-radius:3px}
.p1{width:225px;height:150px;right:15px;top:14px;transform:rotate(-2deg)}
.p2{width:285px;height:195px;right:105px;bottom:6px;transform:rotate(-1deg)}
.p3{width:190px;height:135px;right:-25px;top:120px;transform:rotate(4deg)}

@media(max-width:920px){
  .hero-inner{flex-direction:column;padding-top:34px}
  .hero-copy{width:100%;text-align:center}
  .hero p.desc{margin:0 auto 24px}
  .actions{justify-content:center}
  .hero h1{font-size:46px}
  .photo-stack{width:100%;height:260px;margin-top:12px}
  .p1{width:160px;height:106px;right:10%;top:0}
  .p2{width:200px;height:135px;right:24%;bottom:0}
  .p3{width:140px;height:98px;right:0;top:68px}
}

/* ---- sections ---- */
.section{padding:54px 5vw}
.inner{max-width:1240px;margin:auto}
.title-wrap{text-align:center;margin:0 0 30px}
.title{color:#173a29;font:700 26px/1.2 var(--sans);letter-spacing:.01em;margin:0}
.orn{color:var(--green2);font-size:11px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.orn .line{width:60px;height:1px;background:#b9b195;display:inline-block}

/* categories */
.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{min-height:130px;border:1px solid var(--line);border-radius:8px;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px 8px;transition:.18s}
.cat:hover{transform:translateY(-3px);box-shadow:0 10px 26px #23302014;border-color:#c9c0a9}
.cat .icon{width:30px;height:30px;color:var(--green);margin-bottom:10px}
.cat .icon svg{width:100%;height:100%}
.cat-name{font-size:13px;font-weight:700;line-height:1.35;color:#20241f}
.count{font-size:10.5px;color:var(--muted);margin-top:7px;letter-spacing:.02em}
/* icon hiện đầy đủ như bình thường. Lúc cuộn trang tới (JS thêm lớp .vdxg-play,
   chạy trên cả điện thoại lẫn máy tính, không cần rê chuột) thì chạy một lượt
   hiệu ứng "vẽ lại nét" rồi dừng ở đúng trạng thái hiện đủ ban đầu. Rê chuột
   vào (máy tính) thì chạy lại hiệu ứng đó thêm lần nữa. */
.cat .icon svg path,
.cat .icon svg circle,
.cat .icon svg rect{stroke-dasharray:70;stroke-dashoffset:0}
.cat.vdxg-play .icon svg path,
.cat.vdxg-play .icon svg circle,
.cat.vdxg-play .icon svg rect,
.cat:hover .icon svg path,
.cat:hover .icon svg circle,
.cat:hover .icon svg rect{animation:vdxgIconDraw .6s ease}
.cat:hover .icon{color:var(--green2);transition:color .3s}
@keyframes vdxgIconDraw{from{stroke-dashoffset:70}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .cat.vdxg-play .icon svg path,.cat.vdxg-play .icon svg circle,.cat.vdxg-play .icon svg rect,
  .cat:hover .icon svg path,.cat:hover .icon svg circle,.cat:hover .icon svg rect{animation:none}
}
@media(max-width:920px){.categories{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.categories{grid-template-columns:repeat(2,1fr)}}

.head{display:flex;justify-content:space-between;align-items:center;margin:0 0 18px}
.head h2{margin:0;color:#18382a;font:700 21px var(--sans)}
.more{border:1px solid #d2ccbf;padding:8px 16px;border-radius:5px;font-size:11px;font-weight:600;background:var(--white)}
.more:hover{border-color:var(--green)}

/* gallery cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.card{border:1px solid #e5dfd2;border-radius:8px;overflow:hidden;background:var(--white);cursor:zoom-in}
.card .thumb{aspect-ratio:4/3;overflow:hidden}
.card img{filter:saturate(.85) sepia(.05);transition:transform .3s}
.card:hover img{transform:scale(1.05)}
.card .body{padding:10px 12px 13px}
.ct{font-size:17.5px;font-weight:700}
.cm{font-size:10.5px;color:var(--muted);margin-top:4px}
@media(max-width:920px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:repeat(2,1fr)}}

/* stories */
.stories{display:grid;grid-template-columns:1fr 1.1fr;gap:16px;margin-top:34px}
.panel{background:var(--white);border:1px solid #e5dfd2;border-radius:8px;padding:18px}
.panel h2{margin:0 0 12px;color:#18382a;font:700 20px var(--sans)}
.story{display:grid;grid-template-columns:118px 1fr;gap:13px;padding:11px 0;border-bottom:1px solid #ece6da}
.story:last-of-type{border-bottom:0}
.story .thumb{width:118px;height:64px;border-radius:5px;overflow:hidden}
.st{font-size:13px;font-weight:700;line-height:1.35}
.sd{font-size:11px;color:#666960;line-height:1.45;margin-top:3px}
.date{font-size:10px;color:#8b8c84;margin-top:5px}
.story-btn{display:inline-block;background:var(--green);color:#fff;padding:9px 16px;border-radius:5px;font-size:10.5px;font-weight:700;margin-top:12px;text-transform:uppercase;letter-spacing:.05em}
.story-btn:hover{background:var(--green2)}

.feature{height:100%;min-height:280px;position:relative;overflow:hidden;border-radius:6px}
.feature img{position:absolute;inset:0}
.feature:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(7,24,14,.88))}
.feature-content{position:absolute;z-index:2;bottom:24px;left:26px;right:26px;text-align:center;color:#fff}
.feature-content p{font:400 18px/1.35 var(--display);margin:0 0 14px}
.outline{border:1px solid #fff;border-radius:4px;padding:9px 18px;font-size:10.5px;font-weight:700;letter-spacing:.05em}
.outline:hover{background:#fff;color:var(--green)}
@media(max-width:920px){.stories{grid-template-columns:1fr}}

/* stats */
.stats{background:var(--green);color:#fff;padding:20px 5vw}
.stats-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(var(--n,5),1fr)}
.stat{display:flex;justify-content:center;align-items:center;gap:11px;border-right:1px solid #ffffff26;padding:6px}
.stat:last-child{border:0}
.stat .icon{width:24px;height:24px;flex-shrink:0;opacity:.9}
.stat strong{display:block;font-size:20px;line-height:1.15;font-weight:800}
.stat span{font-size:10px;opacity:.85;letter-spacing:.02em}
@media(max-width:700px){.stats-inner{grid-template-columns:repeat(2,1fr);gap:10px}.stat{border:0}}

/* footer */
footer.site-footer{background:#f2ede1;padding:34px 5vw 20px}
.footer-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:center}
.quote{text-align:center;font:400 18px/1.6 var(--display);color:#3d4039}
.fr{border-left:1px solid #d1c9b9;padding-left:26px}
.fr h3{font-size:11px;margin:0 0 12px;letter-spacing:.08em;color:#2a2a28}
.social{display:flex;gap:9px;margin-bottom:14px}
.social a{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--green2);color:#fff}
.social a svg{width:13px;height:13px}
.fr small{color:#5a5c54;line-height:1.6}
@media(max-width:920px){.footer-inner{grid-template-columns:1fr}.fr{border:0;border-top:1px solid #d1c9b9;padding:20px 0 0;text-align:center}.social{justify-content:center}}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(10,14,10,.92);display:none;align-items:center;justify-content:center;z-index:100;padding:5vw}
.lightbox.open{display:flex}
.lightbox figure{margin:0;max-width:900px;width:100%}
.lightbox img{width:100%;max-height:72vh;object-fit:contain;border-radius:4px}
.lightbox figcaption{color:#f2efe6;text-align:center;margin-top:14px;font-size:13px}
.lightbox figcaption b{display:block;font-size:15px;margin-bottom:4px}
.lb-close{position:absolute;top:22px;right:5vw;color:#fff;background:none;border:none;width:38px;height:38px}
.lb-close svg{width:100%;height:100%}

/* ===================================================================
   TÌM KIẾM NHANH — hộp tìm kiếm nổi lên kèm gợi ý theo thời gian thực
   (bấm icon kính lúp -> mở hộp; gõ tới đâu gợi ý bài viết tới đó, có
   ảnh + chuyên mục, giống kiểu tìm sản phẩm của các trang bán hàng).
   =================================================================== */
.search-overlay{position:fixed;inset:0;z-index:110;display:none}
.search-overlay.open{display:block}
.search-overlay-bg{position:absolute;inset:0;background:rgba(18,24,18,.55);backdrop-filter:blur(2px);opacity:0;transition:opacity .18s}
.search-overlay.open .search-overlay-bg{opacity:1}
.search-box{position:relative;max-width:640px;margin:0 auto;margin-top:min(14vh,120px);background:var(--white);border-radius:14px;box-shadow:0 24px 60px rgba(10,16,10,.35);overflow:hidden;
  opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .18s,transform .18s}
.search-overlay.open .search-box{opacity:1;transform:none}
.search-box-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.search-box-icon{width:20px;height:20px;color:var(--muted);flex-shrink:0}
.search-box-input{flex:1;border:none;outline:none;font-size:16px;font-family:inherit;color:var(--ink);background:none;min-width:0}
.search-box-input::placeholder{color:#9a978a}
.search-box-close{border:none;background:none;color:var(--muted);width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center}
.search-box-close:hover{background:var(--cream);color:var(--green)}
.search-box-close svg{width:16px;height:16px}

.search-suggest{max-height:min(60vh,520px);overflow-y:auto}
.search-suggest:empty{display:none}
.search-hint,.search-empty,.search-loading{padding:22px 18px;font-size:13px;color:var(--muted);text-align:center}
.search-results{list-style:none;margin:0;padding:8px}
.search-results li{display:block}
.search-result{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--ink)}
.search-result:hover,.search-result.active{background:var(--cream)}
.search-result-thumb{width:52px;height:52px;flex-shrink:0;border-radius:8px;overflow:hidden;background:var(--cream)}
.search-result-thumb img{width:100%;height:100%;object-fit:cover}
.search-result-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.search-result-title{font-size:13.5px;font-weight:600;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.search-result-cat{font-size:11px;color:var(--green);font-weight:600;letter-spacing:.02em}
.search-viewall{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 8px 8px;padding:12px 14px;border-radius:10px;background:var(--cream);color:var(--green);font-size:13px;font-weight:700}
.search-viewall:hover{background:var(--green);color:#fff}
.search-viewall svg{width:14px;height:14px;flex-shrink:0}

@media(max-width:640px){
  .search-box{margin-top:0;border-radius:0;max-width:none;height:100%;display:flex;flex-direction:column}
  .search-box-input{font-size:16px}
  .search-suggest{max-height:none;flex:1}
}

/* wp core alignments (basic support) */
.alignwide{max-width:1240px;margin-left:auto;margin-right:auto}
.alignfull{max-width:none}

/* dòng "Phân loại:" trên trang chuyên mục cha */
.cat-filter a{color:var(--green);text-decoration:underline;display:inline-block;position:relative;top:0;transition:color .15s,top .15s}
.cat-filter a:hover{color:var(--green2);top:-1px}

/* nội dung bài viết */
.entry-content figure{margin:28px 0}
.entry-content figure img{width:100%;height:auto;border-radius:8px}
.entry-content figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:8px}
.entry-content p{margin:0 0 18px}

/* lưới ảnh trong bài viết — 2 ảnh mỗi hàng */
.post-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.post-gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;cursor:zoom-in;position:relative;transition:transform .2s,box-shadow .2s}
.post-gallery img:hover{transform:scale(1.02);box-shadow:0 8px 20px #00000026;position:relative;z-index:2}
@media(max-width:560px){.post-gallery{grid-template-columns:1fr}}

/* masonry gallery — dùng cho ảnh street life / phong cảnh tỉ lệ lẫn lộn */
.masonry-gallery{column-count:2;column-gap:14px;margin:28px 0}
.masonry-gallery img{width:100%;display:block;margin:0 0 14px;border-radius:8px;break-inside:avoid;cursor:zoom-in;position:relative;transition:transform .2s,box-shadow .2s}
.masonry-gallery img:hover{transform:scale(1.02);box-shadow:0 8px 20px #00000026;z-index:2}
@media(min-width:900px){.masonry-gallery{column-count:3}}
@media(max-width:560px){.masonry-gallery{column-count:1}}

/* ===================================================================
   ARTICLE TEMPLATE ENGINE
   (vedepxugo-article-template-engine-for-claude-code.md)
   Thành phần dùng chung cho các Template mới + biến thể theo Family.
   =================================================================== */

.tpl-badge{
  display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px;
  background:var(--tpl-badge-bg,var(--cream));color:var(--tpl-badge-ink,var(--green));
  margin-bottom:12px;
}
.tpl-title{color:var(--tpl-title,var(--green));font-size:34px}
.tpl-subtitle{max-width:560px;margin:10px auto 0;text-align:center;color:var(--muted);font:italic 400 16px/1.5 var(--display)}

.vdxg-meta-row{
  display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:16px 0 26px;
  font-size:12.5px;color:var(--muted);
}
.vdxg-meta-row span{position:relative;padding-left:0}
.vdxg-meta-row span + span{margin-left:0}
.vdxg-meta-row span:not(:last-child)::after{content:"·";margin-left:14px;color:var(--line)}

.tpl-hero{border-radius:10px;overflow:hidden;margin-bottom:30px;max-height:480px;border:1px solid var(--tpl-hero-border,transparent)}
.tpl-hero img{width:100%;height:100%;object-fit:cover;display:block}

.tpl-entry{font-size:16px;line-height:1.75;color:var(--ink)}

.vdxg-info-card{
  margin:34px 0;padding:20px 24px;border-radius:10px;
  background:var(--tpl-info-bg,var(--cream));border:1px solid var(--line);
}
.vdxg-info-row{display:flex;gap:10px;padding:6px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.vdxg-info-row:last-child{border-bottom:none}
.vdxg-info-label{flex:0 0 130px;font-weight:700;color:var(--tpl-title,var(--green))}
.vdxg-info-value{color:var(--ink)}

.vdxg-related{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.vdxg-related-title{font-size:20px;color:var(--tpl-title,var(--green));margin:0 0 18px;text-align:center}

/* ---- Phở : burgundy, thanh lịch ---- */
.tpl-pho{--tpl-title:#7A1F2B;--tpl-badge-bg:#F6E7E3;--tpl-badge-ink:#7A1F2B;--tpl-info-bg:#FBF1EF;--tpl-hero-border:#E7CFC9}
.tpl-pho .tpl-title{font-family:"Fraunces",var(--display);font-weight:600}
.tpl-pho .tpl-subtitle,.tpl-hai-san .tpl-subtitle,.tpl-an-vat .tpl-subtitle{font-family:"Be Vietnam Pro",var(--sans)}

/* ---- Ăn vặt : cam vàng, trẻ trung ---- */
.tpl-an-vat{--tpl-title:#B4590A;--tpl-badge-bg:#FDECD2;--tpl-badge-ink:#B4590A;--tpl-info-bg:#FFF6E9;--tpl-hero-border:#F3DDB0}
.tpl-an-vat .tpl-hero{max-height:420px;transform:rotate(-.4deg)}
.tpl-an-vat .tpl-title{letter-spacing:-.01em;font-weight:800}

/* ---- Hải sản : xanh biển, rộng rãi ---- */
.tpl-hai-san{--tpl-title:#0F5C7A;--tpl-badge-bg:#E3F1F6;--tpl-badge-ink:#0F5C7A;--tpl-info-bg:#EEF7FA;--tpl-hero-border:#CDE6EE}
.tpl-hai-san .tpl-hero{max-height:520px}
.tpl-hai-san .inner{max-width:860px}
.tpl-hai-san .tpl-title{font-weight:300;letter-spacing:.01em}

/* ---- Lịch sử / Dòng ký ức : sepia tư liệu, trang trọng ---- */
.tpl-historical{--tpl-title:#4A3323;--tpl-badge-bg:#EFE6D8;--tpl-badge-ink:#6B4A2F;--tpl-info-bg:#F5EFE3;--tpl-hero-border:#D9C9AE}
.tpl-historical .tpl-hero img{filter:sepia(.18) saturate(.92)}
.tpl-historical .tpl-title{font-family:"Lora",var(--display);font-style:italic;font-weight:600;font-size:36px}
.tpl-historical .tpl-subtitle{font-family:"Lora",var(--display)}
.tpl-historical .tpl-entry p:first-of-type{font-size:18px;color:var(--tpl-title)}

/* ---- Đồ uống / Cà phê : nâu ấm, chậm rãi ---- */
.tpl-drink{--tpl-title:#5B4227;--tpl-badge-bg:#EDE2D2;--tpl-badge-ink:#5B4227;--tpl-info-bg:#F6EFE4;--tpl-hero-border:#DEC9A8}
.tpl-drink .tpl-subtitle{font-family:"Be Vietnam Pro",var(--sans)}

/* ---- Đời sống con người : vàng đất, tư liệu đời thường (photo-first) ---- */
.tpl-daily-life{--tpl-title:#8A5A17;--tpl-badge-bg:#F3E7C9;--tpl-badge-ink:#8A5A17;--tpl-info-bg:#F8F0DA;--tpl-hero-border:#E5D093}
.tpl-daily-life .tpl-title{font-family:"Bitter",var(--display);font-weight:700}
.tpl-daily-life .tpl-subtitle{font-family:"Be Vietnam Pro",var(--sans)}
.tpl-daily-life .tpl-hero{max-height:560px}
.tpl-daily-life .masonry-gallery img,.tpl-daily-life .post-gallery img{border:1px solid #E5D093}

/* ---- Hạ tầng - Phát triển : xanh slate, công trình ---- */
.tpl-infra{--tpl-title:#243B4A;--tpl-badge-bg:#E4EAEE;--tpl-badge-ink:#243B4A;--tpl-info-bg:#EEF2F5;--tpl-hero-border:#C7D3DB}
.tpl-infra .tpl-title{font-weight:700;letter-spacing:-.005em}
.tpl-infra .tpl-subtitle{font-family:"Be Vietnam Pro",var(--sans)}

/* thân bài + huy hiệu dùng Be Vietnam Pro trong mọi Template (đã duyệt) */
.tpl-pho,.tpl-an-vat,.tpl-hai-san,.tpl-historical,.tpl-drink,.tpl-daily-life,.tpl-infra{--sans:"Be Vietnam Pro","Mona Sans",-apple-system,"Segoe UI",Arial,sans-serif;font-family:var(--sans)}

/* lưới ảnh món ăn / đồ uống: 2 ảnh mỗi hàng ở điện thoại, 4 ảnh mỗi hàng ở desktop (đã duyệt) */
.tpl-pho .post-gallery,.tpl-an-vat .post-gallery,.tpl-hai-san .post-gallery,.tpl-drink .post-gallery{gap:8px}
@media(max-width:560px){
  .tpl-pho .post-gallery,.tpl-an-vat .post-gallery,.tpl-hai-san .post-gallery,.tpl-drink .post-gallery{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .tpl-pho .post-gallery,.tpl-an-vat .post-gallery,.tpl-hai-san .post-gallery,.tpl-drink .post-gallery{grid-template-columns:repeat(4,1fr);gap:10px}
}

/* hàng biểu tượng điểm nổi bật (chỉ hiện khi bài có dữ liệu thật) */
.vdxg-feat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:0 0 26px;max-width:520px;margin-left:auto;margin-right:auto}
.vdxg-feat{text-align:center;font-size:11.5px;color:var(--muted);line-height:1.3}
.vdxg-feat i{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0 auto 7px;border-radius:50%;background:var(--tpl-badge-bg);color:var(--tpl-title)}
.vdxg-feat i svg{width:19px;height:19px}

@media(max-width:640px){
  .tpl-title{font-size:26px}
  .tpl-historical .tpl-title{font-size:28px}
  .vdxg-info-label{flex:0 0 100px;font-size:13px}
}

/* ===================================================================
   TRANG CHỦ — khối theo hạng mục (bản vẽ đã chốt)
   =================================================================== */
.hs{--acc:#163D2A;--tint:#E8EEE9;--tint2:#DDE7E0;padding:0;border-top:1px solid var(--line);font-family:"Be Vietnam Pro",var(--sans);scroll-margin-top:84px}
.hs-def{--acc:#163D2A;--tint:#E8EEE9;--tint2:#DDE7E0}
.hs-pho{--acc:#7A1F2B;--tint:#F6E7E3;--tint2:#EED8D2}
.hs-vat{--acc:#B4590A;--tint:#FDECD2;--tint2:#F8E0BC}
.hs-sea{--acc:#0F5C7A;--tint:#E3F1F6;--tint2:#D3E8F0}
.hs-his{--acc:#4A3323;--tint:#EFE6D8;--tint2:#E4D8C3}
.hs-caf{--acc:#5B4227;--tint:#EDE2D2;--tint2:#E2D3BD}
.hs-lif{--acc:#8A5A17;--tint:#F3E7C9;--tint2:#EBDCB1}
.hs-inf{--acc:#243B4A;--tint:#E4EAEE;--tint2:#D6DFE5}
.hs-alt.hs-caf{background:#F6EFE4}
.hs-alt.hs-his{background:#F5EFE3}
.hs-alt.hs-lif{background:#FBF6E8}
.hs-white{background:var(--white)}
.hs-in{max-width:1240px;margin:auto;padding:64px 5vw;display:flex;flex-direction:column;gap:24px}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hs-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--acc);margin-bottom:6px}
.hs-title{font:700 32px/1.2 "Be Vietnam Pro",var(--sans);color:var(--acc);margin:0}
.hs-serif{font-family:"Fraunces",serif;font-weight:600;font-size:34px}
.hs-c-pho{color:#7A1F2B}
.hs-serif-it{font-family:"Lora",serif;font-style:italic;font-weight:600;color:var(--acc)}
.hs-bitter{font-family:"Bitter",serif;font-weight:700}
.hs-more{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;color:var(--acc);white-space:nowrap}
.hs-more:hover{text-decoration:underline}
.hs-chips{display:flex;flex-wrap:wrap;gap:10px}
.hs-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500}
.hs-chip b{color:var(--acc);font-weight:700}
.hs-chip:hover{border-color:var(--acc)}
.hs-chip-dash{border-style:dashed}

.hs-grid{display:grid;gap:20px}
.hs-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hs-g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.hs-g6{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.hs-g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hs-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:.18s}
.hs-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px #23302014}
.hs-thumb{aspect-ratio:4/3;overflow:hidden;background:repeating-linear-gradient(135deg,var(--tint) 0 14px,var(--tint2) 14px 28px);position:relative}
.hs-noimg{display:block;width:100%;height:100%}
.hs-body{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px}
.hs-tag{align-self:flex-start;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);background:var(--tint);padding:4px 9px;border-radius:999px}
.hs-ttl{font-size:15px;line-height:1.35;font-weight:700;color:var(--ink)}
.hs-small .hs-thumb{aspect-ratio:1/1}
.hs-small .hs-ttl{font-size:14px}
.hs-ttl-lg{font-size:18px}
.hs-ttl-serif{font-family:"Lora",serif;font-weight:600}
.hs-sub{font-size:12.5px;color:var(--muted);line-height:1.5}

/* feature ảnh lớn có chú thích phủ */
.hs-feature{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);min-height:380px;background:var(--tint)}
.hs-feature img{position:absolute;inset:0}
.hs-feature-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 26px 22px;background:linear-gradient(transparent,rgba(20,32,26,.84));color:#FFFDF8;display:flex;flex-direction:column;gap:6px}
.hs-feature-cap span{font-size:11px;font-weight:600;letter-spacing:.08em}
.hs-feature-cap b{font-size:24px;line-height:1.25;font-weight:700}

/* địa điểm */
.hs-place{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.hs-place-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.hs-textcard{padding:20px;gap:8px;justify-content:center}

/* danh sách đánh số (lịch sử / ký ức) */
.hs-two{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:64px 5vw}
.hs-two-arch{grid-template-columns:1fr 1.4fr;gap:40px}
.hs-list-col{display:flex;flex-direction:column;gap:16px}
.hs-list-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #D9C9AE;padding-bottom:14px}
.hs-list-head h2{font-size:28px;margin:0}
.hs-list-head span{font-size:12px;font-weight:600;color:#6B4A2F}
.hs-li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:6px 0;align-items:baseline}
.hs-n{font:italic 500 20px "Lora",serif;color:#B8A37C}
.hs-li-t{font:500 18px/1.4 "Lora",serif;color:var(--ink)}
.hs-li:hover .hs-li-t{color:var(--acc);text-decoration:underline}
.hs-hcard{flex-direction:row}
.hs-hcard .hs-thumb{width:150px;flex-shrink:0;aspect-ratio:auto;min-height:130px}
.hs-hcard .hs-body{justify-content:center}

/* nhân vật */
.hs-person{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hs-avatar{width:140px;height:140px;border-radius:50%;overflow:hidden;background:var(--tint);border:3px solid var(--white);box-shadow:0 4px 14px #4a332322}
.hs-person-t{font:600 16px/1.35 "Lora",serif;color:var(--acc)}

/* sự kiện */
.hs-timeline{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-top:28px}
.hs-timeline:before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#C9D6CD}
.hs-event{position:relative;display:flex;flex-direction:column;gap:10px}
.hs-dot{position:absolute;top:-26px;left:0;width:14px;height:14px;border-radius:50%;background:var(--acc);border:3px solid var(--white);box-sizing:content-box;margin:-3px}
.hs-year{font-size:22px;font-weight:800;color:var(--acc)}
.hs-event .hs-thumb{border-radius:8px;aspect-ratio:16/10}

/* đời sống — lưới ảnh so le */
.hs-masonry{column-count:4;column-gap:16px}
.hs-mas{position:relative;display:block;break-inside:avoid;margin-bottom:16px;border-radius:8px;overflow:hidden;background:var(--tint)}
.hs-mas img{width:100%;height:auto;display:block}
.hs-mas span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:12px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(30,20,8,.75));opacity:0;transition:.18s}
.hs-mas:hover span{opacity:1}

/* hạ tầng */
.hs-infra{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:20px}
.hs-infra-col{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:14px}
.hs-infra-head{display:flex;justify-content:space-between;align-items:baseline}
.hs-infra-head b{font-size:17px;color:var(--acc)}
.hs-infra-head span{font-size:12px;color:var(--muted)}
.hs-infra-li{font-size:14px;line-height:1.4;padding-bottom:12px;border-bottom:1px dashed #C7D3DB}
.hs-infra-li:hover{color:var(--acc);text-decoration:underline}
.hs-infra-note{margin-top:auto;font-size:12.5px;color:var(--muted);line-height:1.5}

/* xưa & nay */
.hs-old{display:flex;flex-direction:column;gap:8px}
.hs-old .hs-thumb{border-radius:8px;aspect-ratio:16/10}
.hs-old .hs-thumb img{filter:sepia(.45) saturate(.85)}
.hs-old .hs-thumb em{position:absolute;left:8px;bottom:8px;font:600 10.5px "Be Vietnam Pro",sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;background:#FFFDF8;color:var(--acc);padding:3px 8px;border-radius:999px}

@media(max-width:1100px){
  .hs-g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hs-masonry{column-count:3}
}
@media(max-width:920px){
  .hs-g4,.hs-g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-place,.hs-infra,.hs-two,.hs-two-arch{grid-template-columns:1fr}
  .hs-place-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .hs-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-two{gap:40px}
  .hs-masonry{column-count:2}
}
@media(max-width:700px){
  .hs-in{padding:40px 16px 40px 16px;gap:18px}
  .hs-head{flex-direction:column;align-items:flex-start;gap:8px}
  .hs-title,.hs-serif{font-size:24px}
  .hs-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .hs-chip{flex-shrink:0;padding:6px 12px;font-size:12px}
  /* mỗi hạng mục = một hàng cuộn ngang */
  .hs-g4,.hs-g5,.hs-g6,.hs-g2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .hs-g4>*,.hs-g5>*,.hs-g6>*,.hs-g2>*{flex:0 0 190px;scroll-snap-align:start}
  .hs-timeline{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:-16px;padding-right:16px;scrollbar-width:none}
  .hs-timeline>*{flex:0 0 200px;scroll-snap-align:start}
  .hs-timeline:before{display:none}
  .hs-dot{display:none}
  .hs-place-side{grid-template-columns:1fr}
  .hs-feature{min-height:240px}
  .hs-masonry{column-count:2;column-gap:10px}
  .hs-mas{margin-bottom:10px}
  .hs-mas span{opacity:1;font-size:11px}
  .hs-avatar{width:110px;height:110px}
  .hs-hcard .hs-thumb{width:110px;min-height:100px}
}

/* --- Trang chủ: tương thích Safari / Chrome (bản vá) --- */
.hs-thumb img,.hs-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs-avatar{position:relative}
.hs-card,.hs-avatar,.hs-mas,.hs-feature,.hs-thumb{isolation:isolate}
.hs-card,.hs-person,.hs-event,.hs-old,.hs-infra-col{min-width:0}
.hs-ttl,.hs-li-t,.hs-person-t,.hs-infra-li,.hs-title,.hs-feature-cap b{overflow-wrap:anywhere}
.hs-mas{-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;-webkit-backface-visibility:hidden}
.hs-masonry{-webkit-column-count:4;-webkit-column-gap:16px}
@media(max-width:1100px){.hs-masonry{-webkit-column-count:3}}
@media(max-width:920px){.hs-masonry{-webkit-column-count:2}}
.hs-thumb{width:100%}
.hs-hcard .hs-thumb{align-self:stretch}

@media(max-width:1100px){.hs-small .hs-thumb{aspect-ratio:4/3}}

/* nút cuộn lên đầu trang (góc phải dưới) */
.to-top{position:fixed;right:24px;bottom:24px;z-index:60;width:38px;height:38px;padding:0;border:0;background:none;color:var(--green);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s;
  filter:drop-shadow(0 3px 8px rgba(22,61,42,.22));-webkit-tap-highlight-color:transparent}
.to-top svg{display:block;width:100%;height:100%;stroke-width:1.25}
.to-top circle{fill:var(--white)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--green2);transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:50%}
@media(max-width:700px){.to-top{right:14px;bottom:14px;width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* chặn nhấn giữ để lưu ảnh trên di động và bôi chọn/kéo ảnh (chỉ áp dụng lên ảnh, chữ vẫn chọn được) */
img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}