@font-face{font-family:"DVN Teko";src:url("../assets/fonts/DVNTeko-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DVN Teko";src:url("../assets/fonts/DVNTeko-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
/* =========================================================
   Super Pet Fest 2026 — Landing page
   Màu & font lấy theo trang 2024 (vsava.com/pet-health-month)
   ========================================================= */
:root{
  --red:#9A3324;
  --red-deep:#7A2419;
  --red-light:#B8463A;
  --navy:#133E8C;
  --navy-deep:#0C2D6B;
  --pink:#FFE0D9;
  --sky:#D1DAE8;
  --ink:#222;
  --white:#fff;

  --f-head:"DVN Teko", "Arial Narrow", sans-serif;
  --f-body:"Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:1200px;
  --topbar-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--topbar-h)}
body{margin:0;font-family:var(--f-body);color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font:600 .95rem/1 var(--f-body);text-decoration:none;white-space:nowrap;
  padding:.8em 1.5em;border-radius:999px;border:0;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--red{background:var(--red);color:var(--white);box-shadow:0 4px 12px rgba(154,51,36,.28)}
.btn--red:hover{background:var(--red-deep)}
.btn--navy{background:var(--navy);color:var(--white);box-shadow:0 6px 0 var(--navy-deep),0 10px 24px rgba(0,0,0,.25)}
.btn--navy:hover{background:#1A4DA8;box-shadow:0 8px 0 var(--navy-deep),0 14px 28px rgba(0,0,0,.28)}
.btn--navy:active{box-shadow:0 2px 0 var(--navy-deep),0 4px 10px rgba(0,0,0,.2);transform:translateY(4px)}
.btn--lg{font-size:1.1rem;padding:1em 2.4em;letter-spacing:.02em}

/* =========================================================
   THANH THÔNG TIN (sticky)
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--sky);
  transition:box-shadow .25s ease;
}
.topbar.is-scrolled{box-shadow:0 4px 16px rgba(19,62,140,.15)}
.topbar__inner{
  max-width:var(--wrap);margin:0 auto;min-height:var(--topbar-h);
  padding:10px 20px;display:flex;align-items:center;gap:24px;
}
.topbar__fb{flex:none;display:block;width:40px;height:40px;border-radius:50%;transition:transform .2s}
.topbar__fb:hover{transform:scale(1.08)}
.topbar__info{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px;flex:1;min-width:0}
.topbar__info li{display:flex;align-items:center;gap:8px;font-size:.78rem;line-height:1.3;color:var(--navy);font-weight:500}
.topbar__info .ico{width:20px;height:20px;flex:none;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.two-line{display:inline-block}
.topbar__cta{flex:none;margin-left:auto}

.date-short{display:none}
@media (max-width:980px){
  .topbar__info .topbar__venue{display:none}
}
@media (max-width:640px){
  :root{--topbar-h:58px}
  .topbar__inner{gap:12px;padding:8px 14px}
  .topbar__fb{width:34px;height:34px}
  .topbar__info{gap:14px}
  .topbar__info li{font-size:.7rem}
  .topbar__info .ico{width:16px;height:16px}
  .topbar__cta{font-size:.78rem;padding:.7em 1em}
}
@media (max-width:520px){
  .topbar__info li:first-child{display:none}
  .date-long{display:none}
  .date-short{display:inline;white-space:nowrap}
}

/* =========================================================
   ẢNH 1 · KEY VISUAL
   ========================================================= */
.hero{position:relative;background:var(--red);line-height:0}
.hero__img{width:100%;height:auto;aspect-ratio:3546/1313}
@media (max-width:640px){.hero__img{aspect-ratio:2163/1313}}

/* =========================================================
   KHỐI ĐẾM NGƯỢC
   ========================================================= */
.countdown{
  position:relative;background:var(--pink);overflow:hidden;
  padding:26px 20px;
}
/* mây trang trí nhẹ như bản 2024 */
.countdown::before,.countdown::after{
  content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;
}
.countdown::before{width:220px;height:70px;left:-40px;top:-30px;box-shadow:120px 10px 0 -10px rgba(255,255,255,.4)}
.countdown::after{width:180px;height:60px;right:-30px;bottom:-28px;box-shadow:-110px 6px 0 -12px rgba(255,255,255,.4)}

.countdown__inner{
  position:relative;z-index:1;max-width:980px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:40px;
}
.countdown__title{
  margin:0;text-align:center;color:var(--red);
  font:500 1.35rem/1.25 var(--f-body);
}
.countdown__boxes{display:flex;gap:16px}
.cd-box{
  width:104px;padding:14px 8px 12px;background:var(--white);border-radius:14px;text-align:center;
  box-shadow:0 2px 0 rgba(154,51,36,.08),0 8px 20px rgba(154,51,36,.10);
}
.cd-num{
  display:block;font:700 2.1rem/1 var(--f-body);color:#1d1d1d;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.cd-num.tick{animation:tick .35s ease}
@keyframes tick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}
.cd-lbl{display:block;margin-top:8px;font-size:.85rem;color:#555}

@media (max-width:760px){
  .countdown__inner{flex-direction:column;gap:16px}
  .countdown__title{font-size:1.1rem}
  .countdown__title br{display:none}
  .countdown__boxes{gap:10px}
  .cd-box{width:74px;padding:11px 4px 9px;border-radius:12px}
  .cd-num{font-size:1.6rem}
  .cd-lbl{font-size:.72rem;margin-top:6px}
}

/* =========================================================
   ẢNH 2 · NỀN ĐỎ CÓ CHIỀU SÂU + CTA
   Nhiều lớp: vignette tối viền → vệt sáng giữa → họa tiết paw
   2 cỡ (xa/gần) → paw & tim nổi có bóng ở tiền cảnh.
   ========================================================= */
.welcome{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(80px,11vw,140px) 20px clamp(90px,12vw,150px);
  color:var(--white);text-align:center;
  background:
    radial-gradient(ellipse 55% 60% at 50% 45%, rgba(255,180,150,.20), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 45%, rgba(60,10,5,.45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23ffffff' fill-opacity='.05'%3E%3Cg transform='translate(30 40) rotate(-18)'%3E%3Cellipse cx='20' cy='26' rx='9' ry='7.5'/%3E%3Cellipse cx='9.5' cy='17' rx='3.6' ry='4.6'/%3E%3Cellipse cx='16' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='24' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='30.5' cy='17' rx='3.6' ry='4.6'/%3E%3C/g%3E%3Cg transform='translate(140 130) rotate(22)'%3E%3Cellipse cx='20' cy='26' rx='9' ry='7.5'/%3E%3Cellipse cx='9.5' cy='17' rx='3.6' ry='4.6'/%3E%3Cellipse cx='16' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='24' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='30.5' cy='17' rx='3.6' ry='4.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23000000' fill-opacity='.07' transform='translate(80 20) rotate(35) scale(.7)'%3E%3Cellipse cx='20' cy='26' rx='9' ry='7.5'/%3E%3Cellipse cx='9.5' cy='17' rx='3.6' ry='4.6'/%3E%3Cellipse cx='16' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='24' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='30.5' cy='17' rx='3.6' ry='4.6'/%3E%3C/g%3E%3C/svg%3E") 60px 90px/140px 140px,
    linear-gradient(160deg, var(--red-light) 0%, var(--red) 45%, var(--red-deep) 100%);
}
/* mép sóng: hồng (khối đếm ngược) chảy xuống trên, trắng (section kế) phía dưới */
.welcome::before,.welcome::after{
  content:"";position:absolute;left:0;right:0;height:clamp(36px,5vw,70px);z-index:-1;
  background-repeat:no-repeat;background-size:100% 100%;
}
.welcome::before{
  top:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23FFE0D9' d='M0 0h1440v34c-120 26-260 40-420 22S700 6 540 14 240 70 0 44z'/%3E%3C/svg%3E");
}
.welcome::after{
  bottom:-1px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 80h1440V36c-160-30-330-34-500-12S620 70 440 60 140 18 0 40z'/%3E%3C/svg%3E");
}

.welcome__decor{position:absolute;inset:0;z-index:-1;pointer-events:none}
.deco{position:absolute;filter:drop-shadow(0 10px 14px rgba(40,5,0,.35))}
.deco--paw1{width:120px;left:6%;top:22%;fill:rgba(255,224,217,.16);transform:rotate(-22deg)}
.deco--paw2{width:84px;right:8%;top:16%;fill:rgba(255,224,217,.20);transform:rotate(18deg)}
.deco--paw3{width:150px;right:4%;bottom:14%;fill:rgba(0,0,0,.10);transform:rotate(-8deg);filter:none}
.deco--heart1{width:46px;left:16%;bottom:22%;fill:#FFE0D9;opacity:.85}
.deco--heart2{width:30px;right:11%;top:16%;fill:#fff;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .deco--heart1{animation:float 6s ease-in-out infinite}
  .deco--heart2{animation:float 5s ease-in-out -2s infinite}
  .deco--paw2{animation:float 7s ease-in-out -1s infinite}
}
@keyframes float{50%{translate:0 -12px}}

.welcome__inner{position:relative;max-width:1060px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(36px,5vw,56px)}
.welcome__title{
  margin:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px);
  font:600 clamp(1.15rem,2.2vw,1.65rem)/1.45 var(--f-body);
  text-shadow:0 2px 10px rgba(60,10,5,.35);
}
.welcome__title > span{max-width:900px}
.welcome__title strong{font-weight:700;color:#FFE9C7}
.welcome__paw{flex:none;width:clamp(34px,4vw,54px);fill:var(--red-deep);filter:drop-shadow(0 1px 0 rgba(255,255,255,.25));transform:rotate(-16deg)}
.welcome__paw--r{transform:rotate(16deg)}
@media (max-width:560px){
  .welcome__paw{display:none}
  .deco--heart2,.deco--paw2{display:none}
  .deco--paw1{width:80px;left:-14px;top:12%}
}

/* =========================================================
   DÙNG CHUNG CHO CÁC SECTION
   ========================================================= */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section-title{margin:0 0 36px;text-align:center;font:600 clamp(2rem,4vw,3rem)/1 var(--f-head);text-wrap:balance}
.section-title--red{color:var(--red)}
.section-title--navy{color:var(--navy)}
.block-title{margin:0 0 16px;font:600 1.7rem/1 var(--f-head);color:var(--navy)}
.block-title--red{color:var(--red)}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;fill:currentColor}

/* hiện dần khi cuộn — chỉ bật khi JS chạy, không có JS vẫn thấy đủ nội dung */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* =========================================================
   SLIDE 2 · INTERACTIVE TIMELINE
   ========================================================= */
.timeline{
  position:relative;padding:40px 0 110px;overflow:hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%23E6ECF5' d='M0 180c260 40 380 260 700 300s560-60 740-20v440H0z'/%3E%3Cpath fill='%23D1DAE8' d='M0 360c200 10 360 170 640 250s560 40 800 0v290H0z'/%3E%3C/svg%3E") bottom/100% 85% no-repeat,
    var(--white);
}
.timeline__lead{max-width:760px;margin:0 auto 36px;text-align:center;color:var(--navy);font-weight:500;line-height:1.6}
.tl-hint{max-width:860px;margin:-20px auto 20px;text-align:center;font-size:.9rem;color:#556}
.tl-list{list-style:none;margin:0 auto;padding:0;max-width:860px;display:flex;flex-direction:column;gap:16px}
.tl-card{
  --accent:var(--navy);
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:18px;
  background:linear-gradient(90deg,#fff 0%,#fff 45%,rgba(255,255,255,.75) 100%);
  border-left:6px solid var(--accent);box-shadow:0 6px 20px rgba(19,62,140,.10);
  transition:transform .25s ease,box-shadow .25s ease;
}
.tl-card:hover{transform:translateX(4px);box-shadow:0 10px 26px rgba(19,62,140,.16)}
.tl-card:has(.tl-card__head[aria-expanded="true"]){transform:none;box-shadow:0 12px 30px rgba(19,62,140,.18)}
.tl-card__hd{margin:0;font:inherit}
.tl-card__head{
  display:flex;align-items:center;gap:20px;width:100%;
  padding:14px 24px 14px 16px;min-height:96px;
  background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;
}
.tl-card__head:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:14px}
.tl-card__chev{flex:none;width:26px;height:26px;margin-left:auto;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.tl-card__head[aria-expanded="true"] .tl-card__chev{transform:rotate(180deg)}
.tl-card__tag{display:inline-block;margin-bottom:4px;padding:2px 10px;border-radius:999px;background:#EEF3FB;color:var(--navy);font-size:.7rem;font-weight:600;letter-spacing:.04em}
.tl-card__detail{padding:0 24px 18px 84px}
.tl-detail{margin:0;display:grid;gap:8px;border-top:1px dashed rgba(19,62,140,.25);padding-top:14px}
.tl-detail>div{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline}
.tl-detail dt{font-weight:700;color:var(--accent)}
.tl-detail dd{margin:0;color:#334;line-height:1.5}
.tl-detail__cta{margin-top:14px}
.tl-detail__wait{margin:14px 0 0;padding-top:14px;border-top:1px dashed rgba(19,62,140,.25);color:#556}
.tl-card--online .tl-card__head{min-height:78px}
.tl-card--orange{--accent:#E0782B}
.tl-card--green{--accent:#2E8B57}
.tl-card--navy{--accent:var(--navy)}
.tl-card__pet{
  position:absolute;right:-20px;top:50%;width:260px;height:auto;transform:translateY(-50%);z-index:-1;
  opacity:.22;filter:saturate(.8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%);
}
.tl-card__logo{flex:none;width:68px;height:68px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid var(--accent);padding:2px}
.tl-card__body{min-width:0}
.tl-card__name{display:block;margin:0;font:600 1.6rem/1.05 var(--f-head);color:var(--accent)}
.tl-card__meta{display:block;margin:4px 0 0;font-size:.92rem;color:#556}
.tl-card__badge{display:inline-block;margin-bottom:4px;padding:2px 10px;border-radius:999px;background:var(--red);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* Brief vòng 3 (trang 22): làm nổi hẳn mốc lễ hội chính — nền đỏ lễ hội, băng rôn, pháo giấy */
.tl-card--main{
  --accent:#FFD66B;
  background:linear-gradient(100deg,#8E2C1C 0%,#A8392371 45%,#B4402A 100%),var(--red);
  border-left-color:#FFD66B;color:#fff;
  box-shadow:0 12px 30px rgba(122,36,25,.34);
}
.tl-card--main .tl-card__name{font-size:1.95rem;color:#fff}
.tl-card--main .tl-card__meta{color:#FFE2A8}
.tl-card--main .tl-card__badge{background:#FFD66B;color:#6b3410}
.tl-card--main .tl-card__logo{border-color:#FFD66B}
.tl-card--main .tl-card__chev{stroke:#FFD66B}
.tl-card--main .tl-card__pet{opacity:.3;filter:saturate(.7) brightness(1.1)}
.tl-card--main .tl-detail{border-top-color:rgba(255,214,107,.45)}
.tl-card--main .tl-detail dt{color:#FFD66B}
.tl-card--main .tl-detail dd{color:#F6E8E4}
.tl-card--main .tl-detail__cta{background:#FFD66B;color:#6b3410}
.tl-card--main .tl-detail__cta:hover{background:#FFE08F}
/* băng rôn góc trên + pháo giấy rắc quanh thẻ */
.tl-card--main::before{
  content:"Sự kiện chính";position:absolute;top:24px;right:-58px;z-index:3;width:210px;text-align:center;
  transform:rotate(40deg);transform-origin:center;
  background:#FFD66B;color:#6b3410;font:700 .66rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  padding:7px 0;box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.tl-card__confetti{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85;
  background-image:
    radial-gradient(circle,#FFD66B 42%,transparent 44%),
    radial-gradient(circle,#F4A6A0 42%,transparent 44%),
    radial-gradient(circle,#9DBBE8 42%,transparent 44%),
    radial-gradient(circle,#A8D8B0 42%,transparent 44%);
  background-size:9px 9px,7px 7px,8px 8px,7px 7px;
  background-position:9% 20%,22% 72%,58% 14%,78% 80%;
  background-repeat:no-repeat;
}
.tl-detail__theme{
  margin:14px 0 0;padding-top:14px;border-top:1px dashed rgba(255,214,107,.45);
  font:600 1.5rem/1.15 var(--f-head);color:#fff;
}
.tl-detail__theme span{color:#FFD66B}
.tl-card--main .tl-detail{border-top:0;padding-top:10px}
@media (max-width:560px){
  .tl-card__head{gap:12px;padding:12px 12px 12px 10px;min-height:86px}
  .tl-card__logo{width:54px;height:54px}
  .tl-card__name{font-size:1.35rem}
  .tl-card--main .tl-card__name{font-size:1.55rem}
  .tl-card__meta{font-size:.82rem}
  .tl-card__pet{width:180px;right:-40px}
  .tl-card__chev{width:20px;height:20px}
  .tl-card__detail{padding:0 14px 16px 14px}
  .tl-detail>div{grid-template-columns:1fr;gap:2px}
  .tl-detail dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
}

/* Brief vòng 3 (trang 21): hai mốc trực tuyến không có nút mở rộng */
.tl-card__head--static{display:flex;align-items:center;gap:20px;width:100%;padding:14px 24px 14px 16px;min-height:78px}
.tl-card:has(.tl-card__head--static):hover{transform:none}
/* Brief vòng 3 (trang 19): câu chào ngắt đúng 2 dòng, nút đăng ký to hơn */
/* Brief vòng 3 (trang 19): câu chào ngắt đúng hai dòng, không để chữ rơi lẻ xuống dòng cuối.
   Từ 820px trở xuống không đủ chỗ cho dòng hai, nên bỏ dấu ngắt thủ công và cho trình duyệt
   tự chia đều các dòng. */
.welcome__text{display:block;text-wrap:pretty}
@media (max-width:820px){
  .welcome__text br{display:none}
  .welcome__text{text-wrap:balance}
}
.btn--hero{font-size:1.28rem;padding:0 42px;min-height:64px;border-radius:999px;box-shadow:0 10px 24px rgba(19,62,140,.28)}
@media (max-width:560px){

  .btn--hero{font-size:1.1rem;min-height:56px;padding:0 26px}
  .tl-card__head--static{gap:12px;padding:12px 12px 12px 10px;min-height:72px}
}

/* =========================================================
   SLIDE 3 · TỔNG QUAN SỐ LIỆU
   ========================================================= */
.overview{
  position:relative;padding:70px 0 80px;
  background:url("../assets/img/ph-overview-bg-01.webp") top center/100% auto no-repeat,var(--pink);
}
.overview__grid{display:grid;grid-template-columns:minmax(240px,1fr) 2.6fr;gap:22px;align-items:stretch}
.overview__brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:30px 20px;
  border-radius:24px;color:#fff;text-align:center;
  background:radial-gradient(ellipse at 50% 30%,var(--red-light),var(--red) 60%,var(--red-deep));
  box-shadow:0 14px 30px rgba(122,36,25,.28);
}
/* Logo Pet Health Vietnam đã có nền đỏ riêng — không lồng thêm khung trắng */
.overview__logo{width:150px;height:150px;border-radius:26px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.overview__logo img{width:100%;height:100%;object-fit:cover}
.overview__brand-title{margin:0;font:600 clamp(2rem,3.4vw,2.8rem)/.95 var(--f-head);letter-spacing:.02em;text-transform:uppercase}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  padding:24px 14px;border-radius:20px;background:rgba(255,255,255,.92);
  box-shadow:0 6px 18px rgba(154,51,36,.10);backdrop-filter:blur(4px);
}
.stat__ico{width:40px;height:40px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat__num{font:700 clamp(2.2rem,3.6vw,3rem)/1 var(--f-head);color:var(--red);font-variant-numeric:tabular-nums}
.stat__lbl{font-size:.9rem;line-height:1.35;color:#555;max-width:22ch}
@media (max-width:900px){
  .overview__grid{grid-template-columns:1fr}
  .overview__brand{flex-direction:row;padding:20px}
  .overview__logo{width:96px;height:96px;border-radius:18px}
}
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:18px 10px}
}

/* Máy nhỏ (iPhone SE và tương đương): bốn hộp đếm ngược cố định 74px và nhãn số liệu
   khoá 22ch làm hai khối này rộng hơn màn hình, sinh cuộn ngang. Cho chúng co lại. */
@media (max-width:400px){
  .countdown__boxes{gap:6px;width:100%}
  .cd-box{width:auto;flex:1 1 0;min-width:0;padding:10px 2px 8px}
  .stat{min-width:0;padding:16px 8px}
  .stat__lbl{max-width:none}
  .overview__brand-title{font-size:1.7rem}
}

/* =========================================================
   SLIDE 4 · HIGHLIGHTS
   ========================================================= */
.highlights{
  padding:80px 0 90px;
  background:url("../assets/img/ph-overview-bg-02.webp") center/1200px auto repeat,var(--sky);
}
/* Brief vòng 2: bỏ viền bo góc của dải ảnh */
.gallery{background:rgba(255,255,255,.7);border-radius:0;padding:30px 0 22px;margin-bottom:56px;box-shadow:0 8px 24px rgba(19,62,140,.08)}
.gallery__title,.activities__title{margin:0 0 20px;text-align:center;font:600 clamp(1.7rem,3vw,2.3rem)/1 var(--f-head);color:var(--red);text-transform:uppercase;letter-spacing:.02em}
.gallery__viewport{position:relative}
.gallery__track{
  list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{flex:0 0 20%;aspect-ratio:4/3;scroll-snap-align:start;overflow:hidden}
.gallery__slide img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery__slide:hover img{transform:scale(1.05)}
.gallery__slide.tbd-box{display:grid;place-items:center;background:repeating-linear-gradient(45deg,#EEF2F8 0 14px,#E3E9F3 14px 28px);border-right:2px solid #fff;color:#7a86a0;font-weight:600;font-size:.85rem}
.gallery__nav,.rail-nav{
  position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;display:grid;place-items:center;transition:transform .2s;
}
.gallery__nav:hover,.rail-nav:hover{transform:scale(1.08)}
.gallery__nav svg,.rail-nav svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gallery__nav--prev{left:12px}.gallery__nav--next{right:12px}
/* Brief vòng 2: nút chuyển ảnh trong suốt, nhỏ gọn */
.gallery__nav{width:34px;height:34px;margin-top:-17px;background:rgba(255,255,255,.35);backdrop-filter:blur(4px);box-shadow:none;border:1px solid rgba(19,62,140,.18)}
.gallery__nav:hover{background:rgba(255,255,255,.6)}
.gallery__nav svg{width:16px;height:16px;stroke-width:2.2}
.gallery__dots{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px;max-width:520px;margin-inline:auto}
.gallery__dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#B9C3D6;cursor:pointer;transition:background .2s,transform .2s}
.gallery__dots button[aria-current="true"]{background:var(--navy);transform:scale(1.3)}
@media (max-width:900px){.gallery__slide{flex-basis:33.333%}}
@media (max-width:560px){.gallery__slide{flex-basis:70%}.gallery__nav{display:none}}

.activities{
  position:relative;padding:40px 24px;border-radius:28px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='%23F4A6A0' d='M30 40c6-8 14-8 16 0 2-8 10-8 16 0-6 8-16 14-16 14S36 48 30 40z'/%3E%3Cpath stroke='%23F7C95C' d='M200 30l5 10 11 2-8 8 2 11-10-5-10 5 2-11-8-8 11-2z'/%3E%3Cpath stroke='%239DBBE8' d='M150 150h40M152 144a6 6 0 1 1 0 12M188 144a6 6 0 1 0 0 12'/%3E%3Cpath stroke='%23A8D8B0' d='M40 190c10-10 20 10 30 0s20 10 30 0'/%3E%3Ccircle cx='230' cy='210' r='6' stroke='%23F4A6A0'/%3E%3Cpath stroke='%23F7C95C' d='M100 90l6 6M106 90l-6 6'/%3E%3C/svg%3E") 0 0/260px 260px,
    #FFF9F2;
  box-shadow:0 8px 24px rgba(19,62,140,.08);
}
.activities__note{margin:-8px 0 22px;text-align:center;font-size:.92rem;color:#556}
.activities__note b{color:var(--navy)}
.act-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.act{
  --c:var(--navy);--bg:#EEF4FC;--ink:#444;
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:20px 20px 24px;border-radius:18px;background:var(--bg);color:var(--ink);
  border:2.5px solid #1d1d1d;box-shadow:6px 6px 0 #1d1d1d;
  transition:transform .25s ease,box-shadow .25s ease;
}
.act:nth-child(odd){rotate:-1.2deg}
.act:nth-child(even){rotate:1.2deg}
.act:hover{rotate:0deg;transform:translate(-2px,-4px);box-shadow:9px 10px 0 #1d1d1d}

/* Brief vòng 3 (trang 16): màu nền và sticker theo khung giờ diễn ra
   — buổi sáng nền sáng + mặt trời, buổi tối nền tối + mặt trăng, cả ngày trung tính + cả hai */
.act--sang{--c:#C2610F;--bg:#FFF4D6;--ink:#4a3b1c}
.act--toi{--c:#FFD66B;--bg:#22315B;--ink:#DDE4F2}
.act--suot{--c:var(--navy);--bg:#F0F3F8;--ink:#41495c}
.act--toi{border-color:#0d1730;box-shadow:6px 6px 0 #0d1730}
.act--toi:hover{box-shadow:9px 10px 0 #0d1730}

.act__when{
  align-self:flex-start;display:inline-flex;align-items:center;gap:5px;
  padding:3px 11px 3px 8px;border-radius:999px;
  background:rgba(255,255,255,.72);color:var(--c);
  font-size:.74rem;font-weight:700;letter-spacing:.03em;
}
.act--toi .act__when{background:rgba(255,255,255,.14)}
.act__ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.act--suot .act__ico:last-of-type{margin-left:-2px}

.act__name{align-self:stretch;margin:0;text-align:left;font:600 1.35rem/1.12 var(--f-head);color:var(--c)}
.act__img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 0 0 2.5px var(--c)}
.act--toi .act__img{border-color:#2f3f6d}
.act__img--empty{display:grid;place-items:center;background:#fff;color:#999;font-size:.8rem}
.act__desc{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink)}
/* Brief vòng 4 (trang 13): nút tham gia vòng 1 online ngay trên thẻ hoạt động */
.act__cta{
  margin-top:4px;display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:999px;background:var(--c);color:#fff;
  font:700 .85rem/1 var(--f-body);text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .15s,box-shadow .15s;
}
.act__cta::after{content:"→";font-size:1.05em}
.act__cta:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(0,0,0,.24)}
.act--toi .act__cta{color:#22315B}
@media (max-width:900px){.act-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.act-grid{grid-template-columns:1fr;gap:20px}.activities{padding:30px 14px}.act:nth-child(n){rotate:0deg}}

/* =========================================================
   SLIDE 5 · MAP + AGENDA & EXHIBITORS
   ========================================================= */
.event{padding:80px 0 90px;background:#fff}
.event__head{display:flex;align-items:center;gap:22px;margin-bottom:36px;flex-wrap:wrap}
.event__date{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(19,62,140,.15)}
.event__date span:first-child{background:#D8E3F5;color:var(--navy);font:700 1.6rem/1 var(--f-body);padding:10px 18px}
.event__date span:last-child{background:var(--navy);color:#fff;font:700 1.35rem/1 var(--f-body);padding:8px 18px;text-align:center}
.event__name{margin:0;font:700 clamp(2.6rem,5vw,3.6rem)/.9 var(--f-body);color:var(--red);letter-spacing:-.01em}
.event__place{margin:6px 0 0;color:var(--navy);font-size:.95rem;line-height:1.4}

.event__lists{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;margin-top:40px;align-items:start}
.map-wrap{max-width:860px;margin:0 auto 10px}

/* Brief vòng 3 (trang 24): bối cảnh quanh sơ đồ — bãi giữ xe, hai mặt đường, lối check-in */
.map-frame{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto 1fr auto auto;gap:8px 10px;align-items:stretch}
.map-parking{
  grid-column:2;display:grid;place-items:center;height:52px;border-radius:14px;
  background:repeating-linear-gradient(135deg,#E7EBF2 0 10px,#DFE4EE 10px 20px);
  color:#5a6478;font-weight:700;font-size:.86rem;box-shadow:inset 0 -2px 0 #CED5E2;
}
.map-street{display:grid;place-items:center;background:#EDEFF4;color:#5a6478;font-weight:700;font-size:.8rem;border-radius:10px}
.map-street--left{grid-column:1;grid-row:2}
.map-street--left span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.04em}
.map-street--bottom{grid-column:2;grid-row:3;height:34px}
.map-entry{grid-column:2;grid-row:4;margin:0;display:flex;align-items:center;gap:7px;color:var(--red);font-weight:700;font-size:.84rem}
.map-entry svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg)}

.map-scroll{grid-column:2;grid-row:2;overflow-x:auto;padding-bottom:6px}
/* Brief vòng 3 (trang 25): các khối có chiều sâu, chìm/nổi như sơ đồ mặt bằng hội chợ */
.map{
  display:grid;grid-template-columns:repeat(12,minmax(40px,1fr));grid-template-rows:repeat(15,40px);gap:5px;
  min-width:620px;padding:18px;border-radius:18px;border:2px solid #C9D6EA;
  background:
    linear-gradient(#FFFFFF80,#FFFFFF80),
    repeating-linear-gradient(90deg,#E9EFF8 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,#E9EFF8 0 1px,transparent 1px 34px),
    #F6F9FD;
  box-shadow:inset 0 2px 10px rgba(19,62,140,.08);
}
.m{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:7px;font:700 .8rem/1.1 var(--f-body);text-align:center}
.m small{font-size:.58rem;font-weight:700;letter-spacing:.03em}
.m-wc{grid-area:1/3/2/12;background:#DCE4F0;color:#556}
.m-backdrop{background:#FFF1B8;color:#8a6d00;font-size:.62rem}
.m-bd1{grid-area:2/5/3/6}.m-led{grid-area:2/6/3/8;background:#FFE27A;color:#6d5400}.m-bd2{grid-area:2/8/3/9}
.m-stage{grid-area:3/5/5/9;background:linear-gradient(135deg,#FF9C8F,#F07565);color:#fff;font-size:1.05rem;box-shadow:0 6px 14px rgba(240,117,101,.35)}
.m-med{grid-area:3/1/5/2;background:#BFEDE8;color:#138a80;font-size:1.4rem}
.m-foh{grid-area:3/2/4/3;background:#4a4a4a;color:#fff;font-size:.65rem}
.m-seat{grid-column:4/10;background:#FFE0DA;color:#b0473a;font-size:.68rem}
.m-seat1{grid-row:5}.m-seat2{grid-row:6}.m-seat3{grid-row:7}
.b{background:#E3EEFC;border:1.5px solid #A9C6EE;color:var(--navy)}
.b--hl{background:#FFE4DF;border-color:#F09A8C;color:var(--red)}
.z{font-size:.68rem;border:1.5px dashed transparent}
.z--photo{background:#FFF3C4;border-color:#F2C94C;color:#8a6d00}
.z--checkin{background:#D9F5DF;border-color:#6FCF97;color:#1f7a45}
.z--game{background:#FFE5CC;border-color:#F2994A;color:#a4561a}
.z--diy{background:#EEE3FF;border-color:#B794F6;color:#6b46c1}
.gate{background:none;color:var(--red);font-size:.72rem;font-weight:700}
/* khối nổi + icon (trang 25) */
.m{box-shadow:0 2px 0 rgba(19,62,140,.10),0 4px 10px rgba(19,62,140,.08)}
.m-wc,.m-seat{box-shadow:inset 0 -2px 0 rgba(19,62,140,.08)}
.gate{box-shadow:none}
.m__ico{width:16px;height:16px;margin-bottom:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.m-stage .m__ico{width:22px;height:22px;stroke:#fff}
/* Brief vòng 4 (trang 8–9): khu thăm khám phủ lên booth 10–18 nhưng vẫn phải đọc được số hiệu,
   nên vẽ khung nền trước rồi đặt booth đè lên, và tô nhạt từng booth trong khu. */
.z--vet-area{
  background:rgba(95,191,174,.14);border:2px dashed #5FBFAE;border-radius:12px;box-shadow:none;
}
/* Brief vòng 6: booth AFIA giữ nguyên kích thước, chỉ gắn dấu máy ảnh ở góc để
   báo bên trong có khu chụp hình lấy liền; chú thích đầy đủ nằm ở phần ghi chú sơ đồ. */
.b--afia{position:relative}
.b__cam{position:absolute;top:2px;right:3px;width:12px;height:12px;fill:none;stroke:#a33a63;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg--cam{background:#FFE9F1;border:1.5px solid #F09ABB}
.b--exam{background:#E4F4F0;border-color:#5FBFAE;color:#0f6b5c}
.b--exam.b--hl{background:#FFE4DF;border-color:#F09A8C;color:var(--red)}
/* Booth AFIA to gấp đôi vì chứa khu chụp hình lấy liền */
.lg--exam{background:#E4F4F0;border:1.5px dashed #5FBFAE}
@media (max-width:560px){
  .map-frame{grid-template-columns:26px 1fr}
  .map-street--left span{font-size:.7rem}
  .map-parking{height:42px;font-size:.78rem}
}
.map-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8rem;color:#555}
.map-legend li{display:flex;align-items:center;gap:6px}
.lg{width:14px;height:14px;border-radius:4px;display:inline-block}
.lg--booth{background:#E3EEFC;border:1.5px solid #A9C6EE}.lg--hl{background:#FFE4DF;border:1.5px solid #F09A8C}
.lg--stage{background:#F07565}.lg--zone{background:#FFE5CC;border:1.5px dashed #F2994A}.lg--checkin{background:#D9F5DF;border:1.5px dashed #6FCF97}

/* Brief vòng 3 (trang 26): agenda chia 3 khung giờ + lọc nhanh */
.ag-filter{margin:0 0 18px}
.ag-filter__lead{margin:0 0 10px;font-size:.9rem;color:#6b5048}
.ag-filter__lead b{color:var(--red)}
.ag-filter__row{display:flex;flex-wrap:wrap;gap:8px}
.ag-chip{
  --chip:#B0483A;
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--chip);background:#fff;color:var(--chip);
  font:700 .84rem/1 var(--f-body);
  box-shadow:0 2px 0 var(--chip);
  transition:background .18s,color .18s,transform .12s,box-shadow .12s;
}
/* dấu chấm tròn phía trước cho giống ô chọn — nhìn là biết bấm được */
.ag-chip::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:2px solid var(--chip);background:#fff;flex:none;
}
.ag-chip:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--chip)}
.ag-chip:active{transform:translateY(1px);box-shadow:0 1px 0 var(--chip)}
.ag-chip.is-on{background:var(--chip);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.ag-chip.is-on::before{background:#fff;border-color:#fff;box-shadow:inset 0 0 0 3px var(--chip)}
.ag-chip--sang{--chip:#C2610F}
.ag-chip--chieu{--chip:#1F7A45}
.ag-chip--toi{--chip:#2C3E70}
.ag-chip--suot{--chip:#7A4FBF}
.ag[hidden]{display:none}

@media (max-width:560px){.ag-chip{font-size:.76rem;padding:6px 11px}}

.agenda-card,.exhibitor-card{position:relative;border-radius:24px;padding:30px 26px 26px}
.agenda-card{grid-column:1/-1;background:#FFF4F1;border:2px solid #FFD5CC;margin-top:70px}
.exhibitor-card{grid-column:1/-1;background:#EDF3FC;border:2px solid #CFDDF3;margin-top:20px}
.pet-perch{position:absolute;display:grid;place-items:center;text-align:center;font-size:.72rem;color:#8a6d00;padding:8px}
/* Hình chó/mèo 2D — bản mẫu do bên thực hiện vẽ, chờ artwork chính thức của Ecreati */
}
.pet-perch--dog{left:50%;top:-78px;width:300px;height:82px;transform:translateX(-50%)}
.pet-perch--cat{left:14px;bottom:14px;width:150px;height:180px}
/* Brief vòng 6 (trang 1): đọc từ trên xuống dưới trước rồi mới sang cột phải.
   Dùng cột báo chí thay cho lưới, vì lưới xếp theo hàng ngang. */
.agenda{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.agenda .ag{break-inside:avoid;-webkit-column-break-inside:avoid}
/* Brief vòng 6 (trang 2): ngắt một nhịp nhẹ trước nhóm hoạt động cả ngày */
.ag-break{
  display:flex;align-items:center;gap:14px;margin:26px 0 14px;
  font:600 1rem/1 var(--f-body);color:var(--red);white-space:nowrap;
}
.ag-break::before,.ag-break::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#F3C4BA,transparent)}
.ag-break span{display:flex;align-items:center;gap:8px}
.ag-break span::before{content:"";width:16px;height:16px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='26' rx='9' ry='7.5'/%3E%3Cellipse cx='9.5' cy='17' rx='3.6' ry='4.6'/%3E%3Cellipse cx='16' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='24' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='30.5' cy='17' rx='3.6' ry='4.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='26' rx='9' ry='7.5'/%3E%3Cellipse cx='9.5' cy='17' rx='3.6' ry='4.6'/%3E%3Cellipse cx='16' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='24' cy='11.5' rx='3.3' ry='4.6'/%3E%3Cellipse cx='30.5' cy='17' rx='3.6' ry='4.6'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.agenda{columns:1}.ag-break{font-size:.92rem}}
.ag{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:start;padding:8px 0;border-bottom:1px dashed #F3C4BA}
.ag time{
  display:inline-block;justify-self:start;padding:4px 10px;border-radius:999px;
  font:600 .8rem/1.3 var(--f-body);font-variant-numeric:tabular-nums;color:#fff;background:var(--agc,#888);white-space:nowrap;
}
.ag b{display:block;font-size:.92rem;color:#2a2a2a;line-height:1.35}
.ag span{display:block;margin:2px 0 4px;font-size:.8rem;color:var(--red);font-style:italic;line-height:1.35}
.ag--main{--agc:var(--red)}.ag--talk{--agc:var(--navy)}.ag--game{--agc:#E0782B}.ag--checkin{--agc:#2E8B57}.ag--free{--agc:#9AA3B2}
.ag--main b{color:var(--red)}
.ag-legend{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem;color:#555}
.ag-legend li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--agc)}
.exh{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px}
.exh h4{margin:10px 0 4px;font:600 1.25rem/1 var(--f-head);color:var(--navy)}
.exh ol{margin:0;padding-left:22px;font-size:.9rem;line-height:1.7;color:#333}
/* Danh sách đơn vị triển lãm 2026: số thứ tự lấy đúng theo file của Ban tổ chức,
   có đơn vị chưa được đánh số nên không dùng <ol> tự đánh số. */
.exh__list{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.65;color:#333}
.exh__list li{display:flex;gap:8px}
.exh__no{flex:none;width:22px;text-align:right;color:var(--navy);font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .event__lists{grid-template-columns:1fr}
  .agenda{grid-template-columns:1fr}
  .exhibitor-card{padding-left:26px;padding-top:30px}
  .pet-perch--cat{display:none}
  .exh{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .ag{grid-template-columns:1fr;gap:4px}
  .exh{grid-template-columns:1fr}
  .pet-perch--dog{width:220px}
}

/* =========================================================
   SLIDE 6, 7 · GIỮ NGUYÊN: lưu ý quà tặng, CTA, đối tác
   ========================================================= */
.notice{padding:10px 0 50px;background:#fff}
.notice__box{margin:0;padding:22px 30px;border-radius:22px;background:var(--sky);color:var(--navy);text-align:center;font-weight:700;font-size:.95rem;line-height:1.55}
/* Brief vòng 4–5: khối lưu ý dưới Agenda phải trải hết chiều ngang.
   Không có grid-column thì nó rơi vào cột đầu của lưới và chỉ rộng ~630px. */
.notice__box--agenda{grid-column:1/-1;margin:22px 0 0;padding:24px 34px;text-align:left;font-size:1rem;line-height:1.6}
/* Brief vòng 3 (trang 27): nút đang tệp vào dải nền đỏ — đổi sang vàng lễ hội, thêm viền và bóng */
.btn--gold{background:#FFD66B;color:#6b3410;font-weight:700}
.btn--gold:hover{background:#FFE08F}
.cta__btn{min-height:58px;padding:0 34px;border-radius:999px;border:2px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.cta{background:url("../assets/img/ph-cta-bg-01.webp") right bottom/cover no-repeat,var(--pink)}
.cta__inner{min-height:clamp(260px,26vw,380px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding-top:40px;padding-bottom:70px}
.cta__text{margin:0;max-width:560px;font:600 clamp(1.25rem,1.9vw,1.55rem)/1.3 var(--f-head);color:var(--red)}
@media (max-width:760px){
  .cta{background-size:250% auto;background-position:88% bottom}
  .cta__inner{padding-bottom:calc(250vw * 667 / 2560 - 20px)}
  .cta__text{max-width:none}
}

.logos{padding:70px 0 60px;background:#fff}
.logos .section-title{margin-bottom:24px}
.logos__second{margin-top:50px}
/* Brief vòng 3 (trang 8): dải logo tự chạy liên tục sang phải, không có nút bấm.
   JS nhân đôi danh sách nên khi chạy hết một vòng là khớp lại đúng chỗ, không thấy mối nối. */
.logo-rail{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.logo-track{
  --gap:18px;--per-view:7;list-style:none;margin:0;padding:6px 0;display:flex;gap:var(--gap);
  width:max-content;
}
.logo-rail.is-running .logo-track{animation:rail-run var(--dur,60s) linear infinite}
.logo-rail.is-running:hover .logo-track,
.logo-rail.is-running:focus-within .logo-track{animation-play-state:paused}
@keyframes rail-run{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--shift,50%)))}
}
.logo-track li{
  flex:0 0 var(--item-w);height:96px;display:grid;place-items:center;padding:8px;
  border-radius:14px;background:#fff;border:1px solid #EEF1F6;transition:box-shadow .2s,transform .2s;
}
.logo-track li:hover{box-shadow:0 6px 16px rgba(19,62,140,.12);transform:translateY(-2px)}
.logo-track img{max-width:100%;max-height:74px;object-fit:contain}

/* Chưa có JS, hoặc người xem tắt hiệu ứng chuyển động: quay về dải cuộn tay */
.logo-rail:not(.is-running) .logo-track{width:auto;overflow-x:auto;scrollbar-width:none}
.logo-rail:not(.is-running) .logo-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){
  .logo-rail.is-running .logo-track{animation:none;width:auto;overflow-x:auto}
}
@media (max-width:900px){.logo-track{--per-view:4}}
@media (max-width:560px){.logo-track{--per-view:3}.logo-track li{height:80px}}

/* =========================================================
   SLIDE 8 · REGULATIONS
   ========================================================= */
.rules{
  position:relative;padding:80px 20px 90px;overflow:hidden;
  background:
    url("../assets/img/ph-overview-bg-03.webp") left 4% top 40px/260px auto no-repeat,
    url("../assets/img/ph-overview-bg-04.webp") right -40px top 30%/260px auto no-repeat,
    url("../assets/img/ph-overview-bg-05.webp") left -30px bottom -40px/240px auto no-repeat,
    #F4EFE7;
}
.rules__stage{position:relative;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:170px 1fr 170px;align-items:center;gap:0}
.rules__card{
  position:relative;padding:54px clamp(22px,4vw,54px) 40px;border-radius:32px;background:#fff;
  box-shadow:0 20px 50px rgba(90,60,30,.16);
}
.rules__pin{position:absolute;left:50%;top:-22px;width:52px;height:52px;margin-left:-26px;fill:#7A5A43;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.rules__title{margin:0 0 12px;text-align:center;font:700 clamp(2.4rem,4.4vw,3.2rem)/1 var(--f-head);color:#7A5A43;letter-spacing:.03em;text-transform:uppercase}
.rules__intro{margin:0 auto 26px;max-width:70ch;text-align:center;color:#555;line-height:1.6}
.rule{display:grid;grid-template-columns:62px 1fr;gap:18px;padding:16px 0;border-top:1px solid #EFE7DC}
.rule img{width:62px;height:62px}
.rule h3{margin:0 0 6px;font:600 1.45rem/1.05 var(--f-head);color:var(--navy)}
.rule ul{margin:0;padding-left:18px;color:#444;font-size:.92rem;line-height:1.6}
.rule li+li{margin-top:4px}
.pet-lean{height:320px;display:grid;place-items:center;text-align:center;font-size:.72rem;color:#8a6d00;padding:10px}
.pet-lean--dog{margin-right:-20px;grid-column:1}.pet-lean--cat{margin-left:-20px;grid-column:3}
/* Khối Quy định luôn nằm ở cột giữa. Không có dòng này thì khi tạm gỡ hai hình chó/mèo
   (brief vòng 4, trang 5) khối rơi xuống cột 170px và vỡ layout. */
.rules__card{grid-column:2}

/* Brief vòng 5 (trang 4): hai bé chó/mèo tách nền đứng hai bên khối Quy định,
   chân và đầu ló đè lên mép khung — theo đúng ảnh mẫu khách hàng gửi.
   Đặt tuyệt đối so với cả khối nên không tham gia lưới, không làm lệch cột. */
.rules__pet{
  position:absolute;z-index:0;width:auto;pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(70,45,20,.26));
}
/* Khung nội dung nằm trên, hai bé nằm dưới — phần thân bị khung che, chỉ ló ra hai bên */
.rules__card{z-index:1}
/* Căn giữa theo chiều dọc của cả khối, và đẩy ra sát mép màn hình cho ló nhiều hơn.
   max() giữ cho hai bé không bao giờ vượt ra ngoài màn hình: khi cửa sổ rộng hơn 1100px
   thì mép ảnh bám đúng mép màn hình, hẹp hơn thì tự thu vào. */
.rules__pet{top:50%;transform:translateY(-50%)}
.rules__pet--dog{left:max(calc((1100px - 100vw) / 2), -96px);height:clamp(320px,38vw,520px)}
.rules__pet--cat{right:max(calc((1100px - 100vw) / 2), -96px);height:clamp(300px,35vw,480px)}
@media (max-width:1180px){
  .rules__pet--dog{height:300px;left:0}
  .rules__pet--cat{height:280px;right:0}
}
@media (max-width:980px){
  .rules__stage{grid-template-columns:1fr}
  .pet-lean{display:none}
  .rules__pet{display:none}
}

/* =========================================================
   TIN TỨC — giữ nguyên
   ========================================================= */
.news{padding:70px 0 80px;background:#fff}
.news__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post{display:flex;flex-direction:column;gap:10px}
.post__img{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#eee}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post:hover .post__img img{transform:scale(1.04)}
.post h3{margin:6px 0 0;font:600 1rem/1.4 var(--f-body)}
.post h3 a{text-decoration:none;color:#222}
.post h3 a:hover{color:var(--navy)}
.post p{margin:0;font-size:.85rem;line-height:1.6;color:#666;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.post__more{font-size:.85rem;font-weight:600;color:var(--red);text-decoration:none}
@media (max-width:900px){.news__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.news__grid{grid-template-columns:1fr}}

/* =========================================================
   SLIDE 9 · FOOTER & CONTACT
   ========================================================= */
.contact{padding:70px 0;background:#E3E8EF}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.contact__title{margin:0 0 26px;font:600 clamp(1.5rem,2.4vw,1.9rem)/1.2 var(--f-body);color:var(--red);text-wrap:balance}
.contact__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.contact__list li{display:flex;align-items:center;gap:14px;color:var(--navy);font-weight:500}
.contact__list svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact__list a{text-decoration:none}
.contact__list a:hover{text-decoration:underline}
.contact__form{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:22px;background:#F5F7FA;box-shadow:0 10px 30px rgba(19,62,140,.10)}
.contact__form-title{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:600 1.1rem/1.2 var(--f-body);color:var(--navy)}
.contact__form-title svg{width:22px;height:22px;fill:none;stroke:var(--navy);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.field input,.field textarea{
  width:100%;padding:12px 18px;border:1.5px solid #EAD3D3;border-radius:14px;background:#fff;
  font:500 .95rem/1.4 var(--f-body);color:#222;transition:border-color .2s,box-shadow .2s;resize:vertical;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(19,62,140,.15)}
.field .is-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(154,51,36,.15)}
.contact__msg{margin:0;min-height:1.2em;font-size:.85rem;font-weight:500}
.contact__msg.ok{color:#1f7a45}.contact__msg.err{color:var(--red)}
@media (max-width:860px){.contact__inner{grid-template-columns:1fr}}

.footer{background:var(--pink)}
.footer__grass{width:100%;height:auto;margin-bottom:-2px}
.footer__main{background:var(--red);color:#fff}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;padding-bottom:32px}
.footer__logo{height:72px;width:72px;border-radius:14px;object-fit:cover}
.footer__links{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap;font-size:.9rem}
.footer__links a{color:#fff;text-decoration:none;opacity:.92}
.footer__links a:hover{opacity:1;text-decoration:underline}
.footer__lang{display:flex;gap:14px;font-size:.85rem}
.footer__lang a{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;opacity:.75}
.footer__lang a[aria-current]{opacity:1;font-weight:600}
.footer__lang img{width:20px;height:auto;border-radius:2px}

.messenger{
  position:fixed;right:18px;bottom:18px;z-index:55;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#00B2FF,#006AFF);box-shadow:0 8px 22px rgba(0,106,255,.4);transition:transform .2s;
}
.messenger:hover{transform:scale(1.08)}
.messenger svg{width:28px;height:28px;fill:#fff}

/* =========================================================
   BẢN NHÁP — đánh dấu thông tin chờ KH xác nhận
   Gỡ class "draft" trên <html> là toàn bộ phần này ẩn đi.
   ========================================================= */
.draft .tbd{background:#FFF3B0;color:#6b4e00;border-radius:3px;box-shadow:0 0 0 2px #FFF3B0;outline:1px dashed #C9A200;outline-offset:2px}
.draft .welcome .tbd,.draft .btn .tbd{color:#6b4e00}
.draft .tbd-link{outline:2px dashed #FFE066;outline-offset:3px}
.draft-tag,.draft-legend{display:none}
/* khung chờ ảnh: chỉ hiện ở bản nháp, bản chính thức tự ẩn nếu chưa có ảnh */
.tbd-box{position:relative}
html:not(.draft) .pet-perch.tbd-box,html:not(.draft) .pet-lean.tbd-box{visibility:hidden}
.draft .tbd-box{outline:2px dashed #C9A200;outline-offset:-2px;background-color:#FFF8D6}
.draft .pet-perch.tbd-box,.draft .pet-lean.tbd-box{border-radius:14px}
.draft .draft-tag{
  display:block;position:absolute;left:12px;bottom:12px;line-height:1.2;
  font:600 .72rem/1.2 var(--f-body);background:#FFF3B0;color:#6b4e00;padding:6px 10px;border-radius:6px;
  outline:1px dashed #C9A200;
}
@media (max-width:640px){.draft .draft-tag{font-size:.62rem;padding:4px 7px;left:8px;bottom:8px}}
.draft .draft-legend{
  display:block;position:fixed;left:12px;bottom:12px;z-index:60;
  font:500 .75rem/1.3 var(--f-body);background:#fff;color:#444;padding:8px 12px;border-radius:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}