/*
Theme Name: ADV Advertising Theme
Theme URI: https://advertising.com.vn
Author: Advertising.com.vn
Author URI: https://advertising.com.vn
Description: Nền tảng quảng cáo toàn diện - Digital, OOH, Taxi, Event, Influencer
Version: 1.2.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: adv-theme
Tags: advertising, marketing, business, custom
*/

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  --teal:    #00A896; --teal2: #00BFA8; --teal3: #00D4BC;
  --teal-dk: #007A6E; --teal-bg:#E6F7F5; --teal-bg2:#C7EEE9;
  --white:   #FFFFFF; --off:   #F7FAFA;  --light:  #EDF5F4;
  --navy:    #0A2022; --navy2: #123336;
  --text:    #0A2022; --text2: #2E4D4A;  --muted:  #6D8C89;
  --border:  #D6EEEB;
  --orange: #FF5C1A; --yellow:#FFB800; --green:#22C78A;
  --pink:   #FF3D7F; --blue:  #1A6EFF;
  --shadow:  0 2px 16px rgba(0,168,150,.10);
  --shadow2: 0 8px 40px rgba(0,168,150,.18);
  --r: 12px; --r2: 20px; --r3: 999px;
}

/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;line-height:1.65;color:var(--text);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
@media(min-width:769px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;background:none}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════ */
h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:700;line-height:1.25;letter-spacing:-.01em}
h3{font-size:1.05rem;font-weight:600;line-height:1.35}
h4{font-size:.95rem;font-weight:600}
.hl{background:linear-gradient(135deg,var(--teal) 0%,var(--teal3) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-eyebrow{display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);background:var(--teal-bg);border:1px solid var(--teal-bg2);
  padding:4px 12px;border-radius:var(--r3);margin-bottom:10px}
.section-title{margin-bottom:8px}
.section-subtitle{color:var(--muted);font-size:.95rem;max-width:580px;margin-bottom:32px}

/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.section{padding:56px 0}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:32px}

/* ══════════════════════════════════════════════════════════
   SITE HEADER
══════════════════════════════════════════════════════════ */
.site-header{position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);box-shadow:0 1px 8px rgba(0,168,150,.05)}

.nav-wrap{display:flex;align-items:center;gap:12px;height:58px}

/* Logo */
.site-logo,.footer-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:linear-gradient(135deg,var(--teal),var(--teal2));
  border-radius:9px;color:#fff;font-size:1rem;font-weight:900;flex-shrink:0}
.logo-text{font-weight:800;font-size:1rem;color:var(--navy);letter-spacing:-.02em;white-space:nowrap}

/* Desktop nav */
.main-nav{flex:1;display:none}
@media(min-width:900px){.main-nav{display:block}}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.nav-list > li{position:relative}
.nav-list > li > a{font-size:.85rem;font-weight:500;color:var(--text2);
  padding:8px 12px;border-radius:var(--r);display:flex;align-items:center;gap:4px;
  transition:all .18s;white-space:nowrap}
.nav-list > li > a:hover{background:var(--teal-bg);color:var(--teal)}
.nav-list > li.current-menu-item > a,
.nav-list > li.current-menu-ancestor > a{color:var(--teal);font-weight:700}

/* Dropdown arrow cho item có con */
.nav-list > li.menu-item-has-children > a::after{
  content:'▾';font-size:.7rem;opacity:.6;margin-left:1px}

/* ── Level 1: Dropdown ─────────────────────────────── */
.nav-list .sub-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  background:#fff;border:1px solid var(--border);
  border-radius:var(--r2);box-shadow:0 8px 32px rgba(0,0,0,.12);
  min-width:210px;padding:6px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
  z-index:1001;list-style:none;margin:0}

/* Show on hover */
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

.nav-list .sub-menu li{position:relative}
.nav-list .sub-menu li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-radius:8px;font-size:.84rem;
  color:var(--text2);text-decoration:none;white-space:nowrap;
  transition:all .15s}
.nav-list .sub-menu li a:hover{background:var(--teal-bg);color:var(--teal)}
.nav-list .sub-menu li.current-menu-item > a{color:var(--teal);font-weight:600}
.nav-list .sub-menu li.menu-item-has-children > a::after{content:'›';margin-left:auto;padding-left:10px;opacity:.5}

/* ── Level 2: Sub-dropdown (right) ─────────────────── */
.nav-list .sub-menu .sub-menu{
  top:0;left:calc(100% + 4px);
  transform:translateX(-4px)}

.nav-list .sub-menu li:hover > .sub-menu,
.nav-list .sub-menu li:focus-within > .sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0)}

/* Right-edge fix: flip dropdown to left if near right edge */
.nav-list > li:last-child .sub-menu,
.nav-list > li:nth-last-child(2) .sub-menu{left:auto;right:0}
.nav-list > li:last-child .sub-menu .sub-menu,
.nav-list > li:nth-last-child(2) .sub-menu .sub-menu{left:auto;right:calc(100% + 4px);transform:translateX(4px)}

/* Desktop CTA */
.btn-nav-cta{display:none;background:var(--teal);color:#fff;font-weight:700;
  font-size:.85rem;padding:8px 18px;border-radius:var(--r3);
  white-space:nowrap;flex-shrink:0;transition:background .2s}
.btn-nav-cta:hover{background:var(--teal2)}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;padding:6px;border-radius:var(--r);
  margin-left:auto;flex-shrink:0;transition:background .2s}
.hamburger:hover{background:var(--teal-bg)}
.hamburger span{display:block;width:22px;height:2px;background:var(--navy);
  border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:min(320px,90vw);
  z-index:2000;background:var(--white);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}

.mobile-nav-overlay{position:fixed;inset:0;z-index:1999;
  background:rgba(10,32,34,.5);opacity:0;pointer-events:none;
  transition:opacity .3s}
.mobile-nav-overlay.open{opacity:1;pointer-events:auto}

.mobile-nav-inner{padding:0;display:flex;flex-direction:column;height:100%}
.mobile-nav-header{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--border)}
.mobile-nav-close{width:34px;height:34px;border-radius:50%;
  background:var(--off);color:var(--muted);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:background .2s}
.mobile-nav-close:hover{background:var(--border)}

/* Mobile nav GRID */
.mobile-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;flex:1}
.mobile-nav-grid li a{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;padding:16px 8px;border-radius:var(--r);
  background:var(--off);border:1px solid var(--border);
  font-size:.82rem;font-weight:600;color:var(--text2);
  text-align:center;transition:all .2s;min-height:72px}
.mobile-nav-grid li a span:first-child{font-size:1.5rem}
.mobile-nav-grid li a:hover{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}

.mobile-nav-cta{padding:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.btn-mobile-cta{display:block;text-align:center;background:var(--teal);color:#fff;
  font-weight:700;padding:13px;border-radius:var(--r3);font-size:.95rem}
.btn-mobile-call{display:block;text-align:center;border:1.5px solid var(--teal);
  color:var(--teal);font-weight:700;padding:12px;border-radius:var(--r3);font-size:.95rem}

/* ══ MOBILE BOTTOM NAV ══════════════════════════════════ */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:990;
  display:flex;background:var(--white);border-top:1px solid var(--border);
  box-shadow:0 -2px 12px rgba(0,168,150,.1);height:60px}
.mbn-item{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;font-size:.65rem;font-weight:600;color:var(--muted);
  text-decoration:none;transition:color .2s;padding:6px 0}
.mbn-item span:first-child{font-size:1.2rem;line-height:1}
.mbn-item:hover,.mbn-item.active{color:var(--teal)}
.mbn-item.mbn-cta{color:var(--white);background:var(--teal);border-radius:var(--r) var(--r) 0 0;
  margin:0 4px;padding-top:10px}
.mbn-item.mbn-cta:hover{background:var(--teal2)}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 40%,#0d3d42 100%);
  padding:48px 0 56px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 60% 40%,rgba(0,168,150,.18) 0%,transparent 70%);
  pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:32px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal3);background:rgba(0,212,188,.12);border:1px solid rgba(0,212,188,.25);
  padding:5px 14px;border-radius:var(--r3);margin-bottom:16px}
.badge-dot{width:7px;height:7px;background:var(--teal3);border-radius:50%;animation:pulse 2s infinite}

.hero h1{color:#fff;margin-bottom:14px}
.hero .subtitle{color:rgba(255,255,255,.72);font-size:.95rem;margin-bottom:24px;max-width:500px}

.hero-search{display:flex;align-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r3);padding:5px 5px 5px 16px;margin-bottom:18px}
.hero-search input{flex:1;background:none;border:none;outline:none;
  color:#fff;font-size:.9rem;min-width:0}
.hero-search input::placeholder{color:rgba(255,255,255,.45)}
.hero-search .btn-search{background:var(--teal);color:#fff;
  padding:9px 18px;border-radius:var(--r3);font-size:.85rem;font-weight:600;
  white-space:nowrap;transition:background .2s}
.hero-search .btn-search:hover{background:var(--teal2)}

.hero-quick-links{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
.hero-quick-links a{font-size:.78rem;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:4px 12px;border-radius:var(--r3);transition:all .2s}
.hero-quick-links a:hover{background:rgba(0,212,188,.15);color:var(--teal3)}

.hero-stats{display:flex;flex-wrap:wrap;gap:20px}
.hero-stat{display:flex;flex-direction:column}
.hero-stat-value{font-size:1.3rem;font-weight:800;color:#fff;line-height:1}
.hero-stat-unit{font-size:.75rem;color:rgba(255,255,255,.55);margin-top:2px}
.hero-stat-div{width:1px;background:rgba(255,255,255,.15);align-self:stretch}

/* Hero card */
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r2);padding:24px;backdrop-filter:blur(12px)}
.hero-card-title{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:16px}
.hero-form-group{margin-bottom:12px}
.hero-form-group label{display:block;font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,.6);margin-bottom:5px;letter-spacing:.04em;text-transform:uppercase}
.hero-form-group select,.hero-form-group input{width:100%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);color:#fff;padding:9px 12px;font-size:.88rem;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .2s}
.hero-form-group select:focus,.hero-form-group input:focus{border-color:var(--teal3)}
.hero-form-group select option{background:var(--navy);color:#fff}
.hero-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-quote-submit{width:100%;background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:#fff;border:none;border-radius:var(--r);padding:12px;
  font-size:.92rem;font-weight:700;margin-top:4px;cursor:pointer;
  transition:opacity .2s,transform .15s}
.btn-quote-submit:hover{opacity:.9;transform:translateY(-1px)}

/* ══════════════════════════════════════════════════════════
   CAT NAV
══════════════════════════════════════════════════════════ */
.cat-nav{background:var(--white);border-bottom:1px solid var(--border);
  position:sticky;top:58px;z-index:900}
.cat-nav-inner{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.cat-nav-inner::-webkit-scrollbar{display:none}
.cat-nav-item{display:flex;align-items:center;gap:6px;padding:12px 16px;
  white-space:nowrap;font-size:.83rem;font-weight:500;color:var(--muted);
  border-bottom:2px solid transparent;cursor:pointer;transition:all .2s;text-decoration:none;flex-shrink:0}
.cat-nav-item:hover{color:var(--teal);background:var(--teal-bg)}
.cat-nav-item.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:700}

/* ══════════════════════════════════════════════════════════
   CATEGORY GRID
══════════════════════════════════════════════════════════ */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
.cat-card{border-radius:var(--r2);padding:18px 16px;cursor:pointer;
  transition:transform .25s,box-shadow .25s;position:relative;overflow:hidden;
  text-decoration:none;display:block}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.cat-card-icon{font-size:1.8rem;margin-bottom:10px}
.cat-card-badge{display:inline-block;font-size:.68rem;font-weight:700;
  padding:2px 9px;border-radius:var(--r3);margin-bottom:6px}
.cat-card h3{font-size:.9rem;margin-bottom:3px}
.cat-card p{font-size:.78rem;opacity:.75}
.cat-arrow{position:absolute;right:12px;bottom:12px;font-size:1rem;
  opacity:.35;transition:opacity .2s,transform .2s}
.cat-card:hover .cat-arrow{opacity:.75;transform:translateX(3px)}
.cc-digital{background:linear-gradient(135deg,#E6F7F5,#C7EEE9);color:var(--teal-dk)}
.cc-digital .cat-card-badge{background:var(--teal);color:#fff}
.cc-social{background:linear-gradient(135deg,#EEF2FF,#DDE3FF);color:#3344AA}
.cc-social .cat-card-badge{background:#1A6EFF;color:#fff}
.cc-ooh{background:linear-gradient(135deg,#0A2022,#1a4050);color:#fff}
.cc-ooh .cat-card-badge{background:rgba(255,255,255,.15);color:#fff}
.cc-taxi{background:linear-gradient(135deg,#FFF3E0,#FFE0B2);color:#8B4500}
.cc-taxi .cat-card-badge{background:var(--orange);color:#fff}
.cc-event{background:linear-gradient(135deg,#F3E5F5,#E1BEE7);color:#5B0080}
.cc-event .cat-card-badge{background:#9C27B0;color:#fff}
.cc-content{background:linear-gradient(135deg,#E8F5E9,#C8E6C9);color:#1B5E20}
.cc-content .cat-card-badge{background:var(--green);color:#fff}
.cc-pr{background:linear-gradient(135deg,#FFF8E1,#FFECB3);color:#6B4900}
.cc-pr .cat-card-badge{background:var(--yellow);color:var(--navy)}
.cc-product{background:linear-gradient(135deg,#FCE4EC,#F8BBD0);color:#880E4F}
.cc-product .cat-card-badge{background:var(--pink);color:#fff}

/* ══════════════════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════════════════ */
.filter-bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.filter-chip{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;
  padding:6px 14px;border-radius:var(--r3);border:1.5px solid var(--border);
  color:var(--text2);cursor:pointer;transition:all .18s;background:var(--white)}
.filter-chip:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}
.filter-chip.active{border-color:var(--teal);color:#fff;background:var(--teal)}
.filter-sort{margin-left:auto;font-size:.8rem;color:var(--muted);
  padding:6px 10px;border:1.5px solid var(--border);border-radius:var(--r);
  background:var(--white);outline:none;cursor:pointer}

/* ══════════════════════════════════════════════════════════
   SERVICE CARDS
══════════════════════════════════════════════════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:1100px){.svc-grid{grid-template-columns:repeat(4,1fr)}}

.svc-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;transition:transform .25s,box-shadow .25s;
  display:flex;flex-direction:column}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.svc-thumb{height:120px;display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;position:relative;overflow:hidden}
.svc-thumb.bg-digital{background:linear-gradient(135deg,var(--teal-bg),var(--teal-bg2))}
.svc-thumb.bg-orange{background:linear-gradient(135deg,#FFF3E0,#FFCCBC)}
.svc-thumb.bg-gray{background:linear-gradient(135deg,#ECEFF1,#CFD8DC)}
.svc-thumb.bg-yellow{background:linear-gradient(135deg,#FFFDE7,#FFF9C4)}
.svc-thumb.bg-green{background:linear-gradient(135deg,#E8F5E9,#C8E6C9)}
.svc-badge{position:absolute;top:10px;right:10px;
  font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:var(--r3)}
.badge-orange{background:var(--orange);color:#fff}
.badge-teal{background:var(--teal);color:#fff}
.badge-green{background:var(--green);color:#fff}
.badge-yellow{background:var(--yellow);color:var(--navy)}
.badge-black{background:var(--navy);color:#fff}
.svc-body{padding:14px 14px 10px;flex:1}
.svc-body h3{font-size:.9rem;margin-bottom:5px}
.svc-body p{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.svc-rating{display:flex;align-items:center;gap:5px;margin-bottom:8px;font-size:.78rem}
.stars{color:var(--yellow);letter-spacing:-1px}
.rating-count{color:var(--muted)}
.svc-price-chip{display:inline-block;font-size:.75rem;font-weight:700;color:var(--teal);
  background:var(--teal-bg);border:1px solid var(--teal-bg2);
  padding:3px 10px;border-radius:var(--r3);margin-bottom:8px}
.svc-tags{display:flex;flex-wrap:wrap;gap:5px}
.svc-tag{font-size:.7rem;color:var(--text2);background:var(--off);
  border:1px solid var(--border);padding:2px 8px;border-radius:var(--r3)}
.svc-footer{padding:10px 14px 12px;display:flex;align-items:center;gap:7px;
  border-top:1px solid var(--border)}
.btn-book{flex:1;background:var(--teal);color:#fff;border:none;
  padding:8px 0;border-radius:var(--r3);font-size:.8rem;font-weight:700;
  cursor:pointer;transition:background .2s;text-align:center;display:block}
.btn-book:hover{background:var(--teal2)}
.btn-detail{font-size:.78rem;color:var(--muted);padding:8px 10px;
  border-radius:var(--r3);transition:color .2s;white-space:nowrap}
.btn-detail:hover{color:var(--teal)}
.btn-fav{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);
  color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-size:.95rem;transition:all .2s;flex-shrink:0}
.btn-fav:hover,.btn-fav.on{border-color:var(--pink);color:var(--pink);background:#fff0f5}
.load-more-wrap{text-align:center;margin-top:28px}
.btn-load-more{display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:600;color:var(--teal);
  border:1.5px solid var(--teal);padding:10px 24px;border-radius:var(--r3);
  background:var(--white);cursor:pointer;transition:all .2s}
.btn-load-more:hover{background:var(--teal);color:#fff}

/* ══════════════════════════════════════════════════════════
   DIGITAL PACKAGES
══════════════════════════════════════════════════════════ */
.pkg-section{background:linear-gradient(135deg,var(--teal-bg) 0%,#f0fbf9 100%)}
.pkg-grid{display:grid;grid-template-columns:1fr;gap:16px}
.pkg-card{background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r2);padding:24px;display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;position:relative;margin-top:12px}
.pkg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.pkg-card.featured{border-color:var(--teal);background:var(--navy);color:#fff}
.pkg-pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  font-size:.7rem;font-weight:800;text-transform:uppercase;
  background:var(--teal);color:#fff;padding:3px 12px;border-radius:var(--r3)}
.pkg-icon{font-size:2rem;margin-bottom:12px}
.pkg-name{font-size:1rem;font-weight:700;margin-bottom:5px}
.pkg-desc{font-size:.85rem;color:var(--muted);margin-bottom:14px}
.pkg-card.featured .pkg-desc{color:rgba(255,255,255,.65)}
.pkg-price{margin-bottom:14px}
.pkg-price-main{font-size:1.8rem;font-weight:800}
.pkg-price-unit{font-size:.82rem;color:var(--muted);font-weight:400}
.pkg-card.featured .pkg-price-unit{color:rgba(255,255,255,.6)}
.pkg-features{list-style:none;margin-bottom:20px;flex:1}
.pkg-features li{display:flex;align-items:center;gap:7px;font-size:.85rem;
  color:var(--text2);padding:4px 0;border-bottom:1px solid var(--border)}
.pkg-features li:last-child{border:none}
.pkg-card.featured .pkg-features li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.1)}
.pkg-features li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0}
.pkg-card.featured .pkg-features li::before{color:var(--teal3)}
.btn-pkg{display:block;text-align:center;width:100%;background:var(--teal);color:#fff;
  font-weight:700;font-size:.88rem;padding:11px;border-radius:var(--r3);
  border:none;cursor:pointer;transition:background .2s;text-decoration:none}
.btn-pkg:hover{background:var(--teal2)}
.pkg-card.featured .btn-pkg{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3)}
.pkg-card.featured .btn-pkg:hover{background:rgba(255,255,255,.25)}

/* ══════════════════════════════════════════════════════════
   OOH
══════════════════════════════════════════════════════════ */
.ooh-section{background:var(--navy)}
.ooh-section .section-title{color:#fff}
.ooh-section .section-subtitle{color:rgba(255,255,255,.6)}
.ooh-grid{display:grid;grid-template-columns:1fr;gap:12px}
.ooh-card{border-radius:var(--r2);overflow:hidden;position:relative;
  cursor:pointer;transition:transform .25s;min-height:160px}
.ooh-card:hover{transform:translateY(-3px)}
.ooh-thumb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ooh-thumb-emoji{font-size:3.5rem;opacity:.3}
.ooh-card-large .ooh-thumb-emoji{font-size:6rem}
.ooh-thumb-overlay{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75) 0%,transparent 55%)}
.ooh-thumb.dark{background:linear-gradient(135deg,#0d2b30,#1a4850)}
.ooh-thumb.sea{background:linear-gradient(135deg,#0077b6,#00b4d8)}
.ooh-thumb.airport{background:linear-gradient(135deg,#2d3748,#4a5568)}
.ooh-thumb.mall{background:linear-gradient(135deg,#553c9a,#b393d3)}
.ooh-avail{position:absolute;top:12px;right:12px;z-index:2;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r3)}
.avail-yes{background:var(--green);color:#fff}
.avail-no{background:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
.ooh-content{position:absolute;bottom:0;left:0;right:0;padding:14px;z-index:2;color:#fff}
.ooh-city{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.75;margin-bottom:2px}
.ooh-name{font-weight:700;font-size:.95rem;margin-bottom:5px}
.ooh-card-large .ooh-name{font-size:1.15rem}
.ooh-meta{font-size:.75rem;opacity:.7;margin-bottom:7px}
.ooh-price{display:inline-block;font-size:.78rem;font-weight:700;
  color:var(--teal3);background:rgba(0,212,188,.15);
  border:1px solid rgba(0,212,188,.3);padding:3px 9px;border-radius:var(--r3)}

/* ══════════════════════════════════════════════════════════
   TAXI
══════════════════════════════════════════════════════════ */
.taxi-section{background:var(--off)}
.taxi-grid{display:grid;grid-template-columns:1fr;gap:14px}
.taxi-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;display:flex;
  transition:transform .25s,box-shadow .25s}
.taxi-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.taxi-thumb{width:100px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:2.5rem;position:relative}
.taxi-thumb.teal{background:linear-gradient(135deg,var(--teal),var(--teal2))}
.taxi-thumb.dark{background:linear-gradient(135deg,var(--navy),var(--navy2))}
.taxi-thumb.light{background:linear-gradient(135deg,var(--teal-bg),var(--teal-bg2))}
.taxi-type-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);
  font-size:.6rem;font-weight:800;text-transform:uppercase;
  background:rgba(255,255,255,.2);color:#fff;padding:2px 7px;border-radius:var(--r3);white-space:nowrap}
.taxi-thumb.light .taxi-type-badge{color:var(--teal-dk);background:rgba(0,168,150,.15)}
.taxi-body{padding:14px 16px;flex:1}
.taxi-body h3{font-size:.95rem;margin-bottom:4px}
.taxi-body p{font-size:.82rem;color:var(--muted);margin-bottom:10px}
.taxi-specs{margin-bottom:10px}
.taxi-specs li{font-size:.78rem;color:var(--text2);padding:2px 0}
.taxi-specs li::before{content:'✓ ';color:var(--teal);font-weight:700}
.taxi-price{font-size:1rem;font-weight:800;color:var(--teal);margin-bottom:3px}
.taxi-price-note{font-size:.75rem;color:var(--muted);margin-bottom:10px}
.btn-taxi{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;
  color:var(--teal);border:1.5px solid var(--teal);padding:7px 14px;
  border-radius:var(--r3);text-decoration:none;transition:all .2s}
.btn-taxi:hover{background:var(--teal);color:#fff}

/* ══════════════════════════════════════════════════════════
   PRODUCTS
══════════════════════════════════════════════════════════ */
.products-section{background:var(--white)}
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.prod-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;transition:transform .25s,box-shadow .25s}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.prod-thumb{height:100px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.prod-thumb.teal{background:linear-gradient(135deg,var(--teal-bg),var(--teal-bg2))}
.prod-thumb.gray{background:linear-gradient(135deg,#ECEFF1,#CFD8DC)}
.prod-thumb.orange{background:linear-gradient(135deg,#FFF3E0,#FFCCBC)}
.prod-body{padding:12px}
.prod-body h3{font-size:.85rem;margin-bottom:4px}
.prod-spec{font-size:.75rem;color:var(--muted);margin-bottom:8px}
.prod-sizes{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px}
.size-chip{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:var(--r3);
  border:1.5px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s}
.size-chip.active,.size-chip:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-bg)}
.prod-price{font-size:.9rem;font-weight:800;color:var(--teal);margin-bottom:3px}
.prod-price-note{font-size:.72rem;color:var(--muted);margin-bottom:9px}
.btn-prod{display:block;width:100%;text-align:center;background:var(--navy);color:#fff;
  font-size:.78rem;font-weight:700;padding:8px;border-radius:var(--r3);
  border:none;cursor:pointer;text-decoration:none;transition:background .2s}
.btn-prod:hover{background:var(--teal)}

/* ══════════════════════════════════════════════════════════
   INFLUENCER
══════════════════════════════════════════════════════════ */
.influencer-section{background:var(--off)}
.inf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.inf-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:18px;text-align:center;
  transition:transform .25s,box-shadow .25s}
.inf-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.inf-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:1.5rem;margin:0 auto 10px;overflow:hidden}
.inf-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.inf-avatar.pink{background:linear-gradient(135deg,#FF3D7F,#FF8FAB)}
.inf-avatar.teal{background:linear-gradient(135deg,var(--teal),var(--teal3))}
.inf-avatar.green{background:linear-gradient(135deg,var(--green),#6BEBB2)}
.inf-avatar.orange{background:linear-gradient(135deg,var(--orange),#FF9A6C)}
.inf-name{font-weight:700;font-size:.9rem;margin-bottom:2px}
.inf-niche{font-size:.75rem;color:var(--muted);margin-bottom:10px}
.inf-stats{display:flex;justify-content:center;gap:16px;margin-bottom:10px}
.inf-stat{display:flex;flex-direction:column;align-items:center}
.inf-stat-value{font-weight:800;font-size:.95rem}
.inf-stat-label{font-size:.65rem;color:var(--muted)}
.inf-platforms{display:flex;justify-content:center;gap:5px;margin-bottom:12px;flex-wrap:wrap}
.inf-platform-badge{font-size:.68rem;font-weight:600;padding:2px 8px;
  border-radius:var(--r3);background:var(--off);border:1px solid var(--border)}
.btn-inf{display:block;width:100%;text-align:center;border:1.5px solid var(--teal);
  color:var(--teal);font-size:.8rem;font-weight:700;padding:7px;
  border-radius:var(--r3);text-decoration:none;transition:all .2s}
.btn-inf:hover{background:var(--teal);color:#fff}

/* ══════════════════════════════════════════════════════════
   EVENTS
══════════════════════════════════════════════════════════ */
.event-section{background:linear-gradient(135deg,var(--teal-bg) 0%,#fff 100%)}
.event-grid{display:grid;grid-template-columns:1fr;gap:14px}
.event-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;display:flex;
  transition:transform .25s,box-shadow .25s}
.event-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.event-thumb{width:100px;flex-shrink:0;min-height:130px;display:flex;
  align-items:center;justify-content:center;font-size:2.5rem}
.event-thumb.teal{background:linear-gradient(135deg,var(--teal),var(--teal3))}
.event-thumb.green{background:linear-gradient(135deg,var(--green),#6BEBB2)}
.event-thumb.pink{background:linear-gradient(135deg,var(--pink),#FF8FAB)}
.event-thumb.blue{background:linear-gradient(135deg,var(--blue),#82AFFF)}
.event-body{padding:16px;flex:1}
.event-type{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--teal);margin-bottom:5px}
.event-body h3{font-size:.95rem;margin-bottom:7px}
.event-body p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.btn-event{display:inline-flex;align-items:center;gap:4px;
  font-size:.82rem;font-weight:700;color:var(--teal);text-decoration:none;transition:gap .2s}
.btn-event:hover{gap:8px}

/* ══════════════════════════════════════════════════════════
   MEDIA
══════════════════════════════════════════════════════════ */
.media-section{background:var(--off)}
.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.media-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px 16px;text-align:center;
  transition:transform .25s,box-shadow .25s}
.media-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.media-icon{font-size:2.2rem;margin-bottom:8px}
.media-name{font-weight:700;font-size:.9rem;margin-bottom:4px}
.media-reach{font-size:.75rem;color:var(--muted);margin-bottom:4px}
.media-price{font-size:.88rem;font-weight:700;color:var(--teal);margin-bottom:12px}
.btn-media{display:block;width:100%;text-align:center;background:var(--teal);color:#fff;
  font-size:.78rem;font-weight:700;padding:8px;border-radius:var(--r3);
  border:none;cursor:pointer;text-decoration:none;transition:background .2s}
.btn-media:hover{background:var(--teal2)}

/* ══════════════════════════════════════════════════════════
   CASE STUDIES
══════════════════════════════════════════════════════════ */
.case-section{background:var(--white)}
.case-grid{display:grid;grid-template-columns:1fr;gap:20px}
.case-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;transition:transform .25s,box-shadow .25s}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.case-thumb{height:140px;display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;position:relative}
.case-thumb.teal{background:linear-gradient(135deg,var(--teal),var(--teal3))}
.case-thumb.orange{background:linear-gradient(135deg,var(--orange),#FF9A6C)}
.case-thumb.blue{background:linear-gradient(135deg,var(--blue),#82AFFF)}
.case-thumb.green{background:linear-gradient(135deg,var(--green),#6BEBB2)}
.case-industry{position:absolute;top:12px;left:12px;font-size:.67rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.2);
  color:#fff;padding:3px 9px;border-radius:var(--r3)}
.case-kpis{display:flex;gap:0;border-bottom:1px solid var(--border)}
.case-kpi{flex:1;padding:12px 14px;text-align:center;border-right:1px solid var(--border)}
.case-kpi:last-child{border-right:none}
.case-kpi-value{font-size:1.2rem;font-weight:800;color:var(--teal);line-height:1}
.case-kpi-label{font-size:.68rem;color:var(--muted);margin-top:2px}
.case-body{padding:16px}
.case-body h3{font-size:.95rem;margin-bottom:6px}
.case-body p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.btn-case{font-size:.82rem;font-weight:700;color:var(--teal);
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.btn-case:hover{gap:8px}

/* ══════════════════════════════════════════════════════════
   BLOG
══════════════════════════════════════════════════════════ */
.blog-section{background:var(--off)}
.blog-grid{display:grid;grid-template-columns:1fr;gap:18px}
.blog-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.blog-thumb{height:170px;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-thumb img{transform:scale(1.05)}
.blog-thumb-placeholder{height:170px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,var(--teal-bg),var(--teal-bg2));font-size:3.5rem}
.blog-cat-badge{display:inline-block;font-size:.68rem;font-weight:700;
  padding:2px 9px;border-radius:var(--r3);margin-bottom:7px}
.blog-cat-badge.teal{background:var(--teal-bg);color:var(--teal-dk)}
.blog-cat-badge.orange{background:#FFF3E0;color:var(--orange)}
.blog-cat-badge.green{background:#E8F5E9;color:#1B5E20}
.blog-body{padding:16px}
.blog-meta{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--muted);margin-bottom:7px}
.blog-body h3{font-size:.95rem;margin-bottom:7px}
.blog-body p{font-size:.82rem;color:var(--muted);margin-bottom:12px}
.btn-blog{font-size:.82rem;font-weight:700;color:var(--teal);
  text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
.btn-blog:hover{gap:8px}

/* ══════════════════════════════════════════════════════════
   CLIENTS
══════════════════════════════════════════════════════════ */
.clients-section{padding:36px 0;background:var(--off);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.clients-label{font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);text-align:center;margin-bottom:16px}
.clients-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 18px}
.client-chip{font-size:.85rem;font-weight:700;color:var(--text2);
  padding:5px 14px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--r3);transition:all .2s}
.client-chip:hover{border-color:var(--teal);color:var(--teal)}

/* ══════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════ */
.cta-section{background:linear-gradient(135deg,var(--teal-dk),var(--teal),var(--teal2));
  padding:64px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 70% at 50% 50%,rgba(255,255,255,.08) 0%,transparent 70%)}
.cta-section .container{position:relative;z-index:1}
.cta-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);
  padding:4px 14px;border-radius:var(--r3);margin-bottom:14px}
.cta-section h2{color:#fff;margin-bottom:12px}
.cta-section .subtitle{color:rgba(255,255,255,.75);margin-bottom:32px;max-width:540px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.btn-cta-primary{background:#fff;color:var(--teal-dk);font-weight:800;font-size:.95rem;
  padding:13px 28px;border-radius:var(--r3);border:none;cursor:pointer;
  text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn-cta-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.btn-cta-secondary{border:2px solid rgba(255,255,255,.55);color:#fff;font-weight:700;
  font-size:.95rem;padding:13px 24px;border-radius:var(--r3);
  background:transparent;cursor:pointer;text-decoration:none;transition:background .2s}
.btn-cta-secondary:hover{background:rgba(255,255,255,.12)}

/* ══════════════════════════════════════════════════════════
   NEWSLETTER
══════════════════════════════════════════════════════════ */
.newsletter{background:var(--navy);padding:56px 0}
.newsletter-inner{display:grid;grid-template-columns:1fr;gap:28px}
.newsletter-text h2{color:#fff;margin-bottom:8px}
.newsletter-text p{color:rgba(255,255,255,.65)}
.newsletter-form{display:flex;flex-direction:column;gap:10px}
@media(min-width:480px){.newsletter-form{flex-direction:row}}
.newsletter-form input{flex:1;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r3);
  color:#fff;padding:12px 16px;font-size:.9rem;outline:none;min-width:0}
.newsletter-form input::placeholder{color:rgba(255,255,255,.4)}
.newsletter-form input:focus{border-color:var(--teal3)}
.btn-subscribe{background:var(--teal);color:#fff;font-weight:700;font-size:.9rem;
  padding:12px 22px;border-radius:var(--r3);border:none;cursor:pointer;
  white-space:nowrap;transition:background .2s}
.btn-subscribe:hover{background:var(--teal2)}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer{background:var(--navy);color:rgba(255,255,255,.6);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px}
.footer-brand{grid-column:1/-1} /* mobile: full width */
.footer-logo{margin-bottom:12px;display:flex}
.footer-logo .logo-text{color:#fff}
.footer-tagline{font-size:.83rem;line-height:1.7;max-width:260px;margin-bottom:14px}
.footer-social{display:flex;gap:7px}
.footer-social a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);
  font-size:.85rem;text-decoration:none;transition:background .2s}
.footer-social a:hover{background:var(--teal)}
.footer-col-title{color:#fff;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:12px}
.footer-col ul{display:flex;flex-direction:column;gap:7px}
.footer-col ul li a{font-size:.82rem;color:rgba(255,255,255,.6);
  text-decoration:none;transition:color .2s}
.footer-col ul li a:hover{color:var(--teal3)}
.footer-contact{display:flex;flex-direction:column;gap:10px}
.footer-contact li{display:flex;gap:8px;align-items:flex-start;font-size:.82rem}
.footer-contact li a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
.footer-contact li a:hover{color:var(--teal3)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.45)}
.footer-legal{display:flex;gap:14px}
.footer-legal a{font-size:.78rem;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:var(--teal3)}

/* ══════════════════════════════════════════════════════════
   GENERIC BUTTONS
══════════════════════════════════════════════════════════ */
.btn-view-all{display:inline-flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:700;color:var(--teal);border:1.5px solid var(--teal);
  padding:8px 18px;border-radius:var(--r3);background:var(--white);
  text-decoration:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-view-all:hover{background:var(--teal);color:#fff}

/* ══════════════════════════════════════════════════════════
   SCROLL TOP + TOAST
══════════════════════════════════════════════════════════ */
.scroll-top{position:fixed;bottom:76px;right:16px;z-index:991;
  width:40px;height:40px;border-radius:50%;background:var(--teal);
  color:#fff;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:1.1rem;box-shadow:var(--shadow2);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s}
.scroll-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.scroll-top:hover{background:var(--teal2)}
.toast{position:fixed;bottom:72px;right:16px;z-index:9999;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:var(--r);
  box-shadow:var(--shadow2);font-size:.88rem;font-weight:500;
  min-width:220px;max-width:320px;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast.success{border-left:4px solid var(--green)}
.toast.error{border-left:4px solid var(--orange)}
.toast.info{border-left:4px solid var(--teal)}
.animate-hidden{opacity:0;transform:translateY(24px);
  transition:opacity .5s ease,transform .5s ease}
.animate-visible{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.4)}}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════════ */
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════ */
@media print{
  .site-header,.cat-nav,.scroll-top,.toast,.mobile-bottom-nav,.mobile-nav{display:none!important}
}


/* ══════════════════════════════════════════════════════════
   ADDITIONS – viết một lần, không trùng lặp
══════════════════════════════════════════════════════════ */

/* ── pkg-grid 6 cột desktop + TITAN ───────────────────── */
@media(min-width:1200px){.pkg-grid{grid-template-columns:repeat(6,1fr)}}
.pkg-card.titan{background:linear-gradient(135deg,var(--navy) 0%,#1a3a5c 100%);
  border-color:var(--orange);border-width:2px}
.pkg-card.titan .pkg-name,.pkg-card.titan .pkg-pop,
.pkg-card.titan .pkg-price-main{color:#fff}
.pkg-card.titan .pkg-desc{color:rgba(255,255,255,.75)}
.pkg-card.titan .pkg-features li{color:rgba(255,255,255,.85)}
.pkg-card.titan .pkg-features li::before{color:var(--orange)}
.btn-pkg-titan{background:var(--orange)!important;border-color:var(--orange)!important}
.btn-pkg-titan:hover{background:#d44400!important}
.pkg-title-link{display:block;text-decoration:none;color:inherit}
.pkg-title-link:hover .pkg-name{color:var(--teal)}
.pkg-card.featured .pkg-title-link:hover .pkg-name{color:#fff;text-decoration:underline}

/* ── Archive: layout + search + filter ─────────────────── */
.archive-layout{display:grid;grid-template-columns:1fr 260px;gap:24px;align-items:start}
.archive-sidebar{display:flex;flex-direction:column;gap:14px}
.archive-hero-search-box{min-width:0}
.archive-search-wrap{display:flex;align-items:center;gap:0;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r3);padding:5px 5px 5px 14px}
.archive-search-input{flex:1;background:none;border:none;outline:none;
  color:#fff;font-size:.88rem;min-width:0}
.archive-search-input::placeholder{color:rgba(255,255,255,.5)}
.archive-search-btn{background:var(--teal);color:#fff;border:none;
  padding:8px 14px;border-radius:var(--r3);font-size:.82rem;
  font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}

/* ── CTA hero buttons (CPT single + archive) ────────────── */
.cpt-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-cta-solid{display:inline-flex;align-items:center;gap:6px;
  background:var(--teal);color:#fff;font-weight:700;font-size:.9rem;
  padding:11px 22px;border-radius:var(--r3);text-decoration:none;
  border:none;cursor:pointer;transition:background .2s,transform .15s;
  white-space:nowrap}
.btn-cta-solid:hover{background:var(--teal2);transform:translateY(-1px)}
.btn-cta-outline{display:inline-flex;align-items:center;gap:6px;
  background:transparent;color:var(--teal);font-weight:700;font-size:.9rem;
  padding:11px 20px;border-radius:var(--r3);border:1.5px solid var(--teal);
  text-decoration:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-cta-outline:hover{background:var(--teal);color:#fff}

/* ── CPT hero: thumb hide on mobile ────────────────────── */
.cpt-hero-inner{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.cpt-hero-left{flex:1;min-width:0}
.cpt-hero-thumb{flex-shrink:0}

/* ── Category landing page ──────────────────────────────── */
.catlp-hero{padding:56px 0 48px;position:relative;overflow:hidden}
.catlp-hero-inner{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:center}
.catlp-hero-search{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r2);padding:20px;backdrop-filter:blur(12px)}
.catlp-stats{display:flex;gap:0;border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r2);overflow:hidden;width:fit-content;margin-top:20px}
.catlp-stat{padding:12px 18px;border-right:1px solid rgba(255,255,255,.15);text-align:center}
.catlp-stat:last-child{border-right:none}
.catlp-stat-value{font-size:1.2rem;font-weight:800;color:#fff;line-height:1}
.catlp-stat-label{font-size:.7rem;color:rgba(255,255,255,.6);margin-top:2px}
.catlp-process{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:768px){.catlp-process{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.catlp-process{grid-template-columns:repeat(5,1fr)}}
.catlp-step{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px;text-align:center}
.catlp-step-icon{font-size:2rem;margin-bottom:10px}
.catlp-step h3{font-size:.88rem;font-weight:700;margin-bottom:7px}
.catlp-step p{font-size:.78rem;color:var(--muted);line-height:1.6}
.catlp-faq{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden}
.faq-question{width:100%;background:var(--white);border:none;padding:16px 20px;
  text-align:left;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:12px;font-size:.92rem;font-weight:600;color:var(--text)}
.faq-question:hover{background:var(--teal-bg)}
.faq-icon{flex-shrink:0;font-size:1.2rem;color:var(--teal);font-weight:300}
.faq-answer{padding:0 20px 16px;background:var(--white)}
.faq-answer p{font-size:.88rem;color:var(--text2);line-height:1.7;margin:0}

/* ── Archive cards + list ───────────────────────────────── */
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(min-width:600px){.archive-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.archive-grid{grid-template-columns:repeat(4,1fr)}}
.archive-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);overflow:hidden;transition:transform .25s,box-shadow .25s}
.archive-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.archive-card-thumb{display:flex;height:130px;overflow:hidden;
  background:var(--teal-bg);align-items:center;justify-content:center;
  text-decoration:none;position:relative}
.archive-card-emoji{font-size:3rem}
.archive-card-body{padding:14px}
.archive-card-type{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--teal);margin-bottom:6px;display:inline-block}
.archive-card-title{font-size:.9rem;margin-bottom:5px;line-height:1.4}
.archive-card-title a{color:var(--text);text-decoration:none}
.archive-card-title a:hover{color:var(--teal)}
.archive-card-excerpt{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.archive-card-link{font-size:.8rem;font-weight:700;color:var(--teal)}
.archive-list-wrap{display:flex;flex-direction:column;gap:12px}
.list-card{display:flex;align-items:flex-start;gap:14px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r2);padding:14px;
  transition:box-shadow .25s,transform .2s}
.list-card:hover{box-shadow:var(--shadow2);transform:translateY(-2px)}
.list-card-thumb{display:flex;align-items:center;justify-content:center;
  flex-shrink:0;border-radius:var(--r);overflow:hidden}
.list-card-body{flex:1;min-width:0}
.list-card-header{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;margin-bottom:5px}
.list-card-title{font-size:.95rem;font-weight:700;line-height:1.3}
.list-card-title a{color:var(--text);text-decoration:none}
.list-card-title a:hover{color:var(--teal)}
.list-card-desc{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.list-card-actions{display:flex;flex-direction:column;gap:6px;
  align-items:flex-end;flex-shrink:0;padding-left:6px}
.archive-empty{text-align:center;padding:60px 20px;display:flex;
  flex-direction:column;align-items:center;gap:12px}
.archive-empty span{font-size:3rem}
.archive-empty p{color:var(--muted)}
.archive-pagination{display:flex;justify-content:center;gap:8px;
  margin-top:40px;flex-wrap:wrap}
.archive-pagination .page-numbers{padding:8px 14px;border-radius:var(--r3);
  border:1.5px solid var(--border);color:var(--text2);font-size:.85rem;
  font-weight:600;transition:all .2s;text-decoration:none}
.archive-pagination .page-numbers:hover{border-color:var(--teal);color:var(--teal)}
.archive-pagination .current{background:var(--teal);color:#fff;border-color:var(--teal)}

/* ── Archive toolbar ────────────────────────────────────── */
.archive-toolbar{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:20px;flex-wrap:wrap}
.archive-count{font-size:.85rem;color:var(--muted)}
.view-toggle{display:flex;gap:2px;background:var(--off);border-radius:8px;padding:3px}
.view-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:6px;font-size:1rem;color:var(--muted);text-decoration:none;transition:all .2s}
.view-btn.active{background:var(--teal);color:#fff}

/* ── Archive hero ───────────────────────────────────────── */
.cpt-archive-hero{padding:52px 0}
.cpt-archive-hero .container > .arch-hero-inner{
  display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.archive-quick-chip{font-size:.75rem;padding:4px 10px;border-radius:var(--r3);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85);text-decoration:none;transition:all .2s}
.archive-quick-chip:hover{background:rgba(0,212,188,.2)}

/* ── Combo builder ──────────────────────────────────────── */
.combo-layout{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.combo-section{margin-bottom:32px}
.combo-section-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid var(--border)}
.combo-section-header h2{font-size:.95rem;font-weight:700;margin:0}
.combo-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:600px){.combo-cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.combo-cards{grid-template-columns:repeat(4,1fr)}}
.combo-basket{background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r2);overflow:hidden;position:sticky;top:80px}
.combo-basket-header{padding:14px 16px;background:var(--teal);
  display:flex;align-items:center;justify-content:space-between}
.combo-basket-header h3{color:#fff;font-size:.9rem;margin:0}
.combo-count{font-size:.78rem;background:rgba(255,255,255,.25);color:#fff;
  padding:2px 9px;border-radius:999px;font-weight:700}
.combo-basket-list{padding:12px;min-height:80px;max-height:320px;overflow-y:auto}
.combo-basket-empty{display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:20px;text-align:center;color:var(--muted);font-size:.82rem}
.basket-item{display:flex;align-items:center;gap:8px;padding:7px 8px;
  border-radius:8px;background:var(--off);margin-bottom:6px;font-size:.82rem}
.combo-basket-footer{padding:14px 16px;border-top:1px solid var(--border)}
.combo-item{cursor:pointer;display:block;user-select:none;position:relative}
.combo-item input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.combo-item-inner{background:var(--white);border:1.5px solid var(--border);
  border-radius:var(--r);padding:12px 10px;transition:all .18s;
  display:flex;flex-direction:column;gap:3px;min-height:90px;cursor:pointer}
.combo-item:hover .combo-item-inner{border-color:var(--teal);background:var(--teal-bg)}
.combo-item.selected .combo-item-inner{border-color:var(--teal)!important;
  background:var(--teal-bg)!important;box-shadow:0 0 0 2px rgba(0,168,150,.15)}
.combo-item-icon{font-size:1.5rem;margin-bottom:3px}
.combo-item-name{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.3}
.combo-item-desc{font-size:.72rem;color:var(--muted)}
.combo-item-price{font-size:.75rem;font-weight:700;color:var(--teal);margin-top:2px}
.combo-check-mark{position:absolute;top:8px;right:8px;width:20px;height:20px;
  border-radius:50%;background:var(--teal);color:#fff;display:none;
  align-items:center;justify-content:center;font-size:.7rem;font-weight:700}
.combo-item.selected .combo-check-mark{display:flex}
.combo-list-item{display:block;cursor:pointer;user-select:none}
.combo-list-item input[type="checkbox"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.combo-list-item-inner{display:flex;align-items:center;gap:12px;background:var(--white);
  border:1.5px solid var(--border);border-radius:var(--r2);padding:12px 14px;transition:all .18s}
.combo-list-item:hover .combo-list-item-inner{border-color:var(--teal);background:var(--teal-bg)}
.combo-list-item.selected .combo-list-item-inner{border-color:var(--teal)!important;
  background:var(--teal-bg)!important;box-shadow:0 0 0 2px rgba(0,168,150,.15)}
.combo-list-checkbox-ui{width:20px;height:20px;border:2px solid var(--border);
  border-radius:5px;background:var(--white);transition:all .18s;position:relative}
.combo-list-item.selected .combo-list-checkbox-ui{background:var(--teal);border-color:var(--teal)}
.combo-list-item.selected .combo-list-checkbox-ui::after{content:'✓';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.75rem;font-weight:700}
.combo-list-icon{font-size:1.5rem;flex-shrink:0;width:36px;text-align:center}
.combo-list-info{flex:1;min-width:0}
.combo-list-group{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted)}
.combo-list-title{font-size:.92rem;font-weight:700;color:var(--text);margin-top:1px}
.combo-list-desc{font-size:.75rem;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-list-right{flex-shrink:0;text-align:right;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px}
.combo-list-price{font-size:.85rem;font-weight:700;color:var(--teal);white-space:nowrap}
.combo-list-detail{font-size:.72rem;color:var(--muted);text-decoration:none;
  border:1px solid var(--border);padding:2px 8px;border-radius:999px;transition:all .2s}
.combo-list-detail:hover{border-color:var(--teal);color:var(--teal)}
  border:1.5px solid var(--border);background:var(--white);color:var(--text2);
  text-decoration:none;font-size:.8rem;font-weight:600;transition:all .2s}
.filter-chip:hover{border-color:var(--teal);color:var(--teal)}
.filter-chip.active{background:var(--teal);border-color:var(--teal);color:#fff}
  border-radius:999px;border:2px solid var(--teal);color:var(--teal);
  font-weight:700;font-size:.9rem;text-decoration:none;transition:all .2s}
.btn-load-more:hover{background:var(--teal);color:#fff}

/* ── Contact shortcodes ─────────────────────────────────── */
.adv-contact-card{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px;display:flex;flex-direction:column;gap:12px}
.adv-contact-item{display:flex;align-items:flex-start;gap:10px;font-size:.88rem}
.adv-contact-icon{font-size:1.2rem;flex-shrink:0;margin-top:1px}
.adv-contact-label{font-size:.72rem;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.adv-contact-value{font-weight:600;color:var(--text);font-size:.88rem;text-decoration:none}
.adv-contact-value:hover{color:var(--teal)}
.adv-contact-socials{display:flex;gap:8px;padding-top:10px;border-top:1px solid var(--border)}
.adv-social-btn{width:36px;height:36px;border-radius:50%;background:var(--off);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:.85rem;text-decoration:none;font-weight:700;
  transition:all .2s;flex-shrink:0}
.adv-social-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.adv-sidebar-contact .sidebar-widget{position:static}

/* ── Footer: brand + 2 cột dịch vụ/công ty ─────────────── */
.footer-contact-info{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;font-size:.82rem;
  color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.footer-contact-item:hover{color:var(--teal3)}
.footer-contact-item span{flex-shrink:0;margin-top:1px}

/* ── Single post layout ─────────────────────────────────── */
.single-layout{display:grid;grid-template-columns:1fr 280px;gap:28px;align-items:start}
.single-hero{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:48px 0 40px}
.single-hero-inner{max-width:720px}
.single-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.single-date,.single-read-time{font-size:.82rem;color:rgba(255,255,255,.55)}
.single-title{color:#fff;margin-bottom:16px;font-size:clamp(1.5rem,4vw,2.4rem)}
.single-author{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.65)}
.single-featured-img .container img{width:100%;max-height:480px;object-fit:cover;
  border-radius:0 0 var(--r2) var(--r2);display:block}
.post-content{font-size:1rem;line-height:1.8;color:var(--text)}
.post-content h2{margin:2rem 0 .8rem;font-size:1.4rem}
.post-content h3{margin:1.5rem 0 .6rem;font-size:1.1rem}
.post-content p{margin-bottom:1rem}
.post-content ul,.post-content ol{margin:0 0 1rem 1.5rem}
.post-content blockquote{border-left:4px solid var(--teal);margin:1.5rem 0;
  padding:.8rem 1.2rem;background:var(--teal-bg);border-radius:0 var(--r) var(--r) 0;
  color:var(--text2);font-style:italic}
.post-content a{color:var(--teal);text-decoration:underline}
.single-tags{display:flex;align-items:center;flex-wrap:wrap;gap:7px;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.single-tag{font-size:.78rem;padding:3px 10px;border-radius:var(--r3);
  background:var(--off);border:1px solid var(--border);color:var(--text2);
  text-decoration:none;transition:all .2s}
.single-tag:hover{background:var(--teal-bg);color:var(--teal)}
.single-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.single-nav-link{display:flex;flex-direction:column;gap:4px;padding:14px;
  border-radius:var(--r2);border:1px solid var(--border);text-decoration:none;transition:all .2s}
.single-nav-link:hover{border-color:var(--teal);background:var(--teal-bg)}
.single-nav-link span{font-size:.75rem;color:var(--muted)}
.single-nav-link strong{font-size:.85rem;color:var(--text)}
.toc-list{display:flex;flex-direction:column;gap:4px}
.toc-list a{font-size:.82rem;color:var(--text2);text-decoration:none;padding:4px 8px;
  border-radius:6px;transition:all .2s;border-left:2px solid transparent}
.toc-list a:hover,.toc-list a.active{background:var(--teal-bg);color:var(--teal);border-left-color:var(--teal)}

/* ── Category / Tag archive ─────────────────────────────── */
.archive-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:48px 0}
.archive-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.archive-title{color:#fff;margin-bottom:8px;font-size:clamp(1.6rem,4vw,2.4rem)}
.archive-desc{color:rgba(255,255,255,.7);font-size:.95rem;max-width:480px;margin-top:6px}
.archive-search{display:flex;align-items:center;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r3);
  padding:5px 5px 5px 16px;min-width:260px;flex-shrink:0;align-self:flex-start}
.archive-search input{flex:1;background:none;border:none;outline:none;
  color:#fff;font-size:.9rem;min-width:0}
.archive-search input::placeholder{color:rgba(255,255,255,.45)}
.archive-search button{background:var(--teal);color:#fff;padding:8px 16px;
  border-radius:var(--r3);font-size:.9rem;border:none;cursor:pointer}
.cat-archive-layout{display:grid;grid-template-columns:1fr 300px;gap:32px}
.sidebar-widget{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r2);padding:20px}
.sidebar-widget-title{font-size:.88rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text2);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--border)}
.sidebar-sticky{position:sticky;top:78px}
.sidebar-cat-list{display:flex;flex-direction:column;gap:4px;list-style:none;padding:0}
.sidebar-cat-list li a{display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--text2);text-decoration:none;padding:6px 10px;
  border-radius:var(--r);transition:all .2s}
.sidebar-cat-list li a:hover,.sidebar-cat-list li.active a{background:var(--teal-bg);color:var(--teal)}
.sidebar-cat-list li a span{font-size:.75rem;color:var(--muted)}
.sidebar-tags{display:flex;flex-wrap:wrap;gap:6px}
.sidebar-tag{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:var(--r3);
  background:var(--off);border:1px solid var(--border);color:var(--text2);
  text-decoration:none;transition:all .2s}
.sidebar-tag:hover,.sidebar-tag.active{background:var(--teal-bg);border-color:var(--teal);color:var(--teal)}
.sidebar-post-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.sidebar-post-list li a{display:flex;gap:10px;align-items:center;text-decoration:none;
  color:var(--text2);font-size:.82rem;transition:color .2s;padding:4px 0}
.sidebar-post-list li a:hover{color:var(--teal)}
.sidebar-post-list li a img{width:52px;height:40px;object-fit:cover;
  border-radius:6px;flex-shrink:0}
.search-form{display:flex;gap:0;background:var(--off);border:1.5px solid var(--border);
  border-radius:var(--r3);overflow:hidden}
.search-field{flex:1;background:none;border:none;outline:none;
  padding:9px 14px;font-size:.9rem;color:var(--text)}
.search-submit{background:var(--teal);color:#fff;border:none;padding:9px 16px;
  cursor:pointer;font-size:.88rem;transition:background .2s}

/* ── CPT single hero ────────────────────────────────────── */
.cpt-hero{padding:52px 0}
.cpt-hero-desc{font-size:1rem;color:rgba(255,255,255,.75);margin:12px 0 20px;
  max-width:520px;line-height:1.7}
.cpt-hero .cpt-hero-desc:not([style]){color:var(--muted)}
.cpt-platforms{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}
.cpt-platform-tag{font-size:.78rem;font-weight:600;padding:4px 12px;
  border-radius:var(--r3);background:var(--teal-bg);border:1px solid var(--teal-bg2);
  color:var(--teal-dk)}
.cpt-rating{display:flex;align-items:center;gap:8px;margin:10px 0 16px;font-size:.9rem}
.cpt-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.cpt-specs-grid{grid-template-columns:repeat(4,1fr)}}
.cpt-spec-item{display:flex;align-items:center;gap:10px;padding:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);font-size:.82rem;color:rgba(255,255,255,.85)}
.cpt-spec-item span{font-size:1.3rem;flex-shrink:0}
.cpt-spec-item small{display:block;font-size:.68rem;color:rgba(255,255,255,.5);margin-bottom:2px}
.cpt-spec-item strong{display:block;font-weight:700}
.cpt-feature-list{list-style:none;padding:0;margin:14px 0 18px;
  display:flex;flex-direction:column;gap:6px}
.cpt-feature-list li{display:flex;align-items:flex-start;gap:8px;
  font-size:.9rem;color:var(--text2);padding:4px 0}
.cpt-feature-list li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;margin-top:2px}
.cpt-price-big{font-size:2rem;font-weight:800;color:var(--teal);margin:16px 0}
.cpt-price-note{font-size:.88rem;color:var(--muted);margin-top:10px}
.cpt-price-note-inline{font-size:.85rem;font-weight:400;color:var(--muted)}

/* ── Blog card title ────────────────────────────────────── */
.blog-card-title{font-size:.95rem;margin-bottom:6px}
.blog-card-title a{color:var(--text);text-decoration:none}
.blog-card-title a:hover{color:var(--teal)}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE – một lần duy nhất, không trùng
══════════════════════════════════════════════════════════ */
@media(max-width:1199px){
  .catlp-hero-inner{grid-template-columns:1fr}
  .catlp-hero-search{display:none}
}
@media(max-width:900px){
  .archive-layout{grid-template-columns:1fr}
  .archive-sidebar{display:none}
  .cat-archive-layout{grid-template-columns:1fr}
  .single-layout{grid-template-columns:1fr}
  .single-sidebar{display:none}
  .combo-layout{grid-template-columns:1fr}
  .combo-basket{position:static}
  .cpt-archive-hero .container > .arch-hero-inner{grid-template-columns:1fr}
  .archive-hero-search-box{display:none}
}
@media(max-width:768px){
  /* CPT hero: ẩn thumb trang trí */
  .cpt-hero-thumb{display:none!important}
  .cpt-hero-inner{flex-direction:column}
}
@media(max-width:599px){
  /* svc-footer: icon only */
  .btn-book .btn-text{display:none}
  .btn-book::before{content:'⚡'}
  .btn-book{flex:none;width:36px;height:36px;padding:0;border-radius:50%;
    font-size:1rem;justify-content:center}
  .btn-detail .btn-text{display:none}
  .btn-detail::before{content:'›'}
  .btn-detail{width:32px;height:32px;padding:0;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:1.2rem}
  /* CTA buttons compact */
  .btn-cta-solid,.btn-cta-outline{font-size:.78rem;padding:9px 12px}
  /* combo list */
  .combo-list-desc{display:none}
  .list-card-actions{flex-direction:row!important}
  /* stats */
  .catlp-stats{width:100%}
  .catlp-stat{flex:1;padding:10px 8px}
  .catlp-stat-value{font-size:1rem}
}

/* ══════════════════════════════════════════════════════════
   DESKTOP BREAKPOINTS – tất cả grid responsive
══════════════════════════════════════════════════════════ */
@media(min-width:600px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .pkg-grid{grid-template-columns:repeat(2,1fr)}
  .ooh-grid{grid-template-columns:repeat(2,1fr)}
  .inf-grid{grid-template-columns:repeat(3,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .taxi-grid{grid-template-columns:repeat(2,1fr)}
  .event-grid{grid-template-columns:repeat(2,1fr)}
  .media-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .newsletter-inner{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .footer-brand{grid-column:1} /* reset on desktop: brand = col1 only */
}
@media(min-width:900px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .pkg-grid{grid-template-columns:repeat(3,1fr)}
  .ooh-grid{grid-template-columns:repeat(3,1fr)}
  .inf-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid{grid-template-columns:repeat(4,1fr)}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(3,1fr)}
  .taxi-grid{grid-template-columns:repeat(3,1fr)}
  .event-grid{grid-template-columns:repeat(3,1fr)}
  .media-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
  .newsletter-inner{grid-template-columns:1fr 1fr}
}
@media(min-width:1100px){
  .svc-grid{grid-template-columns:repeat(4,1fr)}
  .case-grid{grid-template-columns:repeat(3,1fr)}
  .taxi-grid{grid-template-columns:repeat(3,1fr)}
  .event-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr}
}

/* ══════════════════════════════════════════════════════════
   CRITICAL DESKTOP FIXES
══════════════════════════════════════════════════════════ */

/* Hero 2-cột desktop */
@media(min-width:900px){
  .hero-inner{grid-template-columns:1fr 400px}
}

/* Ẩn mobile bottom nav trên desktop */
@media(min-width:769px){
  .mobile-bottom-nav{display:none!important}
  .hamburger{display:none!important}
  body{padding-bottom:0!important}
}

/* Hiện hamburger + ẩn main nav trên mobile */
@media(max-width:768px){
  .hamburger{display:flex}
  .main-nav{display:none}
  body{padding-bottom:64px}
}
