/*
Theme Name: Võ Phục Quốc Tế
Theme URI: https://vophucquocte.com
Description: Giao diện giới thiệu võ phục Karate và đồ bảo hộ. Khách xem sản phẩm rồi đặt hàng qua Zalo và TikTok. Có sẵn mục Sản phẩm, Thương hiệu, Nhóm sản phẩm trong trang quản trị.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: vophuc
*/

:root{--accent:#C8281F;--ink:#14161A;--muted:#4B5058;--line:#E4E6EA;--soft:#F4F5F7}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* Ảnh giữ chỗ khi chưa có ảnh */
.ph{background:repeating-linear-gradient(135deg,#ECEDEF 0,#ECEDEF 12px,#E4E6EA 12px,#E4E6EA 24px);display:flex;align-items:center;justify-content:center;text-align:center;color:#555B63;font-size:14px;padding:12px}

/* Nút */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:6px;font-family:inherit;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-lg{min-height:52px;padding:0 28px;font-size:16px}
.btn-sm{min-height:44px;padding:0 12px;font-size:14px;border-width:1.5px}
.btn-accent{background:var(--accent);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline-light{border-color:#fff;color:#fff;background:transparent}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{max-width:1200px;margin:0 auto;padding:14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:38px;height:38px;border-radius:6px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px}
.logo-text{font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase}
.logo img{max-height:48px;width:auto}
.main-nav{display:flex;flex-wrap:wrap;gap:4px 22px;flex:1 1 320px}
.main-nav a{min-height:44px;display:flex;align-items:center;font-size:15px;font-weight:600}
.main-nav a:hover{color:var(--accent)}
.search-form{display:flex;flex-wrap:wrap;gap:12px}
.search-form input[type=search]{height:44px;width:220px;max-width:100%;padding:0 14px;border:1px solid #C9CDD3;border-radius:6px;font-family:inherit;font-size:14px}
.search-form .btn{min-height:44px;font-size:16px}

/* Banner */
.hero{background:var(--ink);color:#fff}
.hero-inner{max-width:1200px;margin:0 auto;padding:72px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.hero-text{flex:1 1 460px;min-width:0}
.hero-media{flex:1 1 380px;min-width:0}
.hero-media img{width:100%;border-radius:10px}
.hero-ph{min-height:420px;border:2px dashed #3A3F47;border-radius:10px;background:repeating-linear-gradient(135deg,#1C1F24 0,#1C1F24 14px,#20242A 14px,#20242A 28px);color:#B8BDC4;padding:24px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px}
.kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hero .kicker{color:#FFB4AD}
.hero-title{margin:16px 0 0;font-size:clamp(34px,5vw,58px);line-height:1.1;font-weight:800;letter-spacing:-.01em}
.hero-sub{margin:20px 0 0;font-size:18px;color:inherit;opacity:.8;max-width:520px}
.hero .btn-row{margin-top:32px}

/* Ưu điểm */
.benefits{background:var(--soft)}
.benefits-inner{max-width:1200px;margin:0 auto;padding:16px 24px;display:flex;flex-wrap:wrap}
.benefit{flex:1 1 240px;padding:24px 16px}
.benefit-n{font-size:14px;font-weight:700;color:var(--accent)}
.benefit-t{margin-top:4px;font-size:17px;font-weight:700}
.benefit-d{margin-top:6px;font-size:14px;color:inherit;opacity:.78}

/* Khối chung */
.section{padding:64px 0 72px}
.section-alt{background:var(--soft)}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:28px}
.section-title{font-size:32px;font-weight:800}
.link-accent{min-height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:700;color:var(--accent)}
.center{text-align:center}
.lead{margin:10px auto 0;max-width:560px;font-size:16px;color:inherit;opacity:.78}

/* Nhóm sản phẩm */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.cat-img{aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.cat-img img{width:100%;height:100%;object-fit:cover}
.cat-name{margin-top:12px;font-size:18px;font-weight:700}
.cat-sub{font-size:14px;color:inherit;opacity:.78}

/* Lưới sản phẩm */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.card-link{display:block;flex:1}
.card-img{aspect-ratio:1/1;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img .ph{width:100%;height:100%}
.card-body{padding:16px 16px 0}
.card-brand{font-size:12px;font-weight:700;letter-spacing:.08em;color:#555B63;text-transform:uppercase}
.card-title{margin-top:4px;font-size:16px;font-weight:600;line-height:1.35}
.card-price{margin-top:8px;font-size:15px;font-weight:700;color:var(--accent)}
.card-actions{padding:14px 16px 16px;display:flex;flex-wrap:wrap;gap:8px}
.card-actions .btn{flex:1 1 100px}
.empty{padding:40px 0;text-align:center}
.empty h2{font-size:26px;font-weight:800}
.empty p{margin:10px 0 20px;color:var(--muted)}
.pagination{margin-top:36px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{min-width:44px;min-height:44px;padding:0 14px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;font-weight:600}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Thương hiệu */
.brand-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.brand-tile{flex:1 1 200px;max-width:280px;min-height:104px;padding:12px;background:#fff;border:2px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.brand-tile:hover,.brand-tile.is-current{border-color:var(--accent)}
.brand-tile img{max-height:48px;width:auto;object-fit:contain}
.brand-name{font-size:16px;font-weight:700}
.brand-count{font-size:13px;font-weight:600;color:var(--accent)}

/* Phần đầu trang hãng / nhóm / tìm kiếm */
.page-band{background:var(--soft);border-bottom:1px solid var(--line);padding:28px 0 40px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--muted)}
.crumbs a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline}
.crumbs strong{color:var(--ink);font-weight:600}
.band-row{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px}
.band-logo{width:140px;height:96px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px}
.band-logo img{max-height:80px;width:auto;object-fit:contain}
.band-text{flex:1 1 360px;min-width:0}
.band-text h1{font-size:clamp(28px,4vw,40px);line-height:1.15;font-weight:800}
.band-desc{margin-top:10px;max-width:680px;font-size:16px;color:#3A3F47}
.band-desc p{margin:0}
.band-count{margin-top:10px;font-size:14px;font-weight:700;color:var(--accent)}

/* Chi tiết sản phẩm */
.product{padding:12px 0 56px}
.product-wrap{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start}
.product-gallery{flex:1 1 420px;min-width:0}
.product-main{aspect-ratio:1/1;border-radius:10px;overflow:hidden}
.product-main img{width:100%;height:100%;object-fit:cover}
.product-main .ph{width:100%;height:100%;font-size:15px}
.thumbs{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px}
.thumb{width:84px;height:84px;padding:0;border-radius:8px;border:3px solid var(--line);overflow:hidden;background:#fff;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.is-active{border-color:var(--accent)}
.product-info{flex:1 1 420px;min-width:0}
.product-brand{min-height:44px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.product-title{font-size:clamp(26px,3.4vw,36px);line-height:1.2;font-weight:800}
.product-price{margin-top:12px;font-size:22px;font-weight:800;color:var(--accent)}
.entry{margin-top:16px;font-size:16px;color:#3A3F47}
.entry p{margin:0 0 12px}
.specs{margin-top:24px;border-top:1px solid var(--line)}
.spec{display:flex;flex-wrap:wrap;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.spec dt{flex:0 0 140px;font-weight:700}
.spec dd{flex:1 1 200px;min-width:0;margin:0;color:#3A3F47}
.product-cta{margin-top:28px}
.product-cta .btn{flex:1 1 180px;min-height:52px;font-size:16px}
.note{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* Giới thiệu và cách đặt hàng */
.about-inner{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.about-media{flex:1 1 380px;min-width:0}
.about-media img{width:100%;border-radius:10px}
.about-media .ph{min-height:360px;border-radius:10px}
.about-text{flex:1 1 420px;min-width:0}
.about-text h2{margin-top:12px;font-size:32px;font-weight:800;line-height:1.2}
.about-text p{margin:16px 0 0;font-size:16px;color:#3A3F47}
.about-text .btn{margin-top:24px}
.steps{margin-top:36px;display:flex;flex-wrap:wrap;gap:20px}
.step{flex:1 1 280px;padding:28px;background:#fff;border:1px solid var(--line);border-radius:8px}
.step-n{font-size:40px;font-weight:800;line-height:1;color:var(--accent)}
.step-t{margin-top:14px;font-size:20px;font-weight:700}
.step-d{margin-top:8px;font-size:15px;color:#3A3F47}

/* Kêu gọi hành động */
.cta{background:var(--accent);color:#fff}
.cta-inner{max-width:1200px;margin:0 auto;padding:56px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.cta-text{flex:1 1 380px;min-width:0}
.cta-text h2{font-size:32px;font-weight:800;line-height:1.2}
.cta-text p{margin:10px 0 0;font-size:17px}

/* Chân trang */
.site-footer{background:#0E1013;color:#B8BDC4}
.footer-inner{max-width:1200px;margin:0 auto;padding:56px 24px 24px}
.footer-cols{display:flex;flex-wrap:wrap;gap:40px}
.footer-col{flex:1 1 160px;min-width:0;font-size:14px}
.footer-col.wide{flex:1.4 1 260px}
.footer-col.contact{flex:1 1 200px}
.footer-col h3{margin-bottom:12px;font-size:15px;font-weight:700;color:#fff}
.footer-col a{min-height:44px;display:flex;align-items:center;color:#B8BDC4}
.footer-col a:hover{color:#fff}
.footer-col p{margin:14px 0 0}
.footer-col .line{margin:0 0 8px}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.footer-brand .logo-mark{width:34px;height:34px;font-size:18px}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid #262A30;font-size:13px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* Nút liên hệ nổi */
.float-contact{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.float-contact a{min-height:48px;padding:0 22px;display:flex;align-items:center;border-radius:999px;font-weight:700;font-size:15px;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.float-zalo{background:var(--accent)}
.float-tiktok{background:var(--ink)}

/* Trang thường */
.page-default{padding:48px 0 72px}
.page-default h1{font-size:34px;font-weight:800;margin-bottom:20px}

@media (max-width:600px){
  .section{padding:44px 0 52px}
  .section-title,.about-text h2,.cta-text h2{font-size:26px}
  .hero-inner{padding:48px 24px}
  .search-form{width:100%}
  .search-form input[type=search]{flex:1 1 160px}
}

/* Giá, tùy chọn đặt hàng, mô tả bên dưới (v1.1) */
.price-old{margin-left:10px;font-size:.7em;font-weight:500;color:#6B7077;text-decoration:line-through}
.card-price del{margin-left:8px;font-weight:500;color:#6B7077}
.product-short{margin-top:16px;font-size:16px;color:#3A3F47}
.product-short p{margin:0 0 10px}
.order-box{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.option-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:14px}
.option-row label{flex:0 0 150px;font-size:15px;font-weight:700}
.option-row select,.option-row input[type=number]{flex:1 1 220px;max-width:340px;min-height:48px;padding:0 12px;border:1px solid #C9CDD3;border-radius:6px;background:#fff;font-family:inherit;font-size:15px;color:var(--ink)}
.order-box .product-cta{margin-top:20px}
.order-msg{min-height:22px;margin:12px 0 0;font-size:14px;color:var(--muted)}
.order-msg.is-error{color:#B3261E;font-weight:600}
.order-msg.is-ok{color:#1E6B3A;font-weight:600}
.product-detail{padding:0 0 56px}
.detail-block{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.detail-block h2{font-size:26px;font-weight:800;margin-bottom:16px}
.detail-block .entry{margin-top:0;max-width:860px}
.entry h2{font-size:22px;font-weight:800;margin:24px 0 10px}
.entry h3{font-size:18px;font-weight:700;margin:20px 0 8px}
.entry ul,.entry ol{padding-left:22px;margin:0 0 12px}
.entry img{border-radius:8px;margin:12px 0}

/* Combo, giảm giá, hoạt động, bong bóng chat (v1.2) */
.card-img{position:relative}
.badge-sale{position:absolute;top:10px;left:10px;padding:4px 8px;border-radius:4px;background:var(--accent);color:#fff;font-size:13px;font-weight:800;line-height:1.2}
.card-actions .btn{flex:1 1 70px;padding:0 8px;font-size:13px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;border:1px solid #C9CDD3;border-radius:999px;background:#fff;font-size:14px;font-weight:600}
.chip:hover{border-color:var(--ink)}
.chip.is-current{background:var(--ink);border-color:var(--ink);color:#fff}

.act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.act-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.act-link{display:block}
.act-img{aspect-ratio:3/2;overflow:hidden}
.act-img img{width:100%;height:100%;object-fit:cover}
.act-img .ph{width:100%;height:100%}
.act-body{padding:18px}
.act-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--muted)}
.act-type{padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--ink);font-weight:700}
.act-title{margin-top:10px;font-size:18px;font-weight:700;line-height:1.35}
.act-excerpt{margin:8px 0 0;font-size:14px;color:var(--muted)}
.activity{padding:12px 0 56px}
.activity-body{max-width:860px;margin:0 auto}
.activity-title{margin-top:10px;font-size:clamp(26px,3.6vw,38px);line-height:1.2;font-weight:800}
.activity-img{margin-top:20px}
.activity-img img{width:100%;border-radius:10px}
.activity-body .entry{margin:20px 0 24px}
.activity-body .entry a{color:var(--accent);text-decoration:underline}

/* Bong bóng chat Facebook / Zalo / TikTok */
.chat-bubbles{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;gap:12px}
.bubble{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .15s ease}
.bubble:hover,.bubble:focus-visible{transform:scale(1.08)}
.bubble img{width:100%;height:100%;object-fit:contain;border-radius:50%;padding:9px}
.bubble-text{color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:1.1;padding:0 4px}
.bubble-tip{position:absolute;right:68px;top:50%;transform:translateY(-50%);padding:6px 12px;border-radius:6px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease}
.bubble:hover .bubble-tip,.bubble:focus-visible .bubble-tip{opacity:1}
.bubble::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .bubble::after{animation:vp-pulse 2.4s ease-out infinite;color:inherit;border-color:rgba(255,255,255,.7)}
  .bubble-zalo::after{animation-delay:.8s}
  .bubble-tiktok::after{animation-delay:1.6s}
}
@keyframes vp-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media (max-width:600px){
  .chat-bubbles{right:12px;bottom:12px;gap:10px}
  .bubble{width:52px;height:52px}
}

/* Thông tin cố định trong khung tùy chọn (v1.3) */
.option-label{flex:0 0 150px;font-size:15px;font-weight:700}
.option-fixed{flex:1 1 220px;font-size:15px;font-weight:700;color:#1E6B3A}

/* Thẻ sản phẩm chỉ gồm ảnh, tên, giá (v1.4.1) */
.card-body{padding:16px}

/* ===== v1.5: menu cố định, hiệu ứng, logo 3 ứng dụng ===== */
html{scroll-padding-top:96px}
.site-header{position:sticky;top:0;z-index:60;transition:box-shadow .25s ease}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
@media (max-width:600px){.admin-bar .site-header{top:0}}
.site-header.is-scrolled{box-shadow:0 4px 18px rgba(0,0,0,.12)}
@media (max-width:700px){
  html{scroll-padding-top:70px}
  .header-inner{padding:10px 16px;gap:8px 16px}
  .main-nav{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:4px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{white-space:nowrap}
  .site-header.is-scrolled .search-form{display:none}
}

/* Màu chữ giữ nguyên bên trong các khối trắng khi phần ngoài đổi màu chữ */
.card,.step,.brand-tile,.act-card{color:var(--ink)}

/* Nút */
.btn{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18);filter:brightness(1.08)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn:focus-visible,.chip:focus-visible,.main-nav a:focus-visible{outline:3px solid #FFB020;outline-offset:2px}
.btn-outline:hover{background:var(--ink);color:#fff;filter:none}
.btn-outline-light:hover{background:#fff;color:var(--ink);filter:none}

/* Menu: gạch chân chạy từ giữa */
.main-nav a{position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s ease}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1)}
.logo-mark{transition:transform .3s ease}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08)}

/* Thẻ sản phẩm: nâng lên, ảnh phóng to, ảnh phụ không có nên chỉ zoom */
.card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.14);border-color:transparent}
.card-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .card-img img{transform:scale(1.08)}
.card-title{transition:color .2s ease}
.card:hover .card-title{color:var(--accent)}

/* Danh mục */
.cat-grid a{display:block}
.cat-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cat-grid a:hover .cat-img img,.cat-grid a:hover .cat-img .ph{transform:scale(1.08)}
.cat-img .ph{transition:transform .6s ease}
.cat-name{transition:color .2s ease}
.cat-grid a:hover .cat-name{color:var(--accent)}

/* Thương hiệu */
.brand-tile{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.brand-tile:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.12)}
.brand-tile img{transition:transform .35s ease}
.brand-tile:hover img{transform:scale(1.12)}

/* Hoạt động */
.act-card{transition:transform .3s ease,box-shadow .3s ease}
.act-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.14)}
.act-img img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.act-card:hover .act-img img{transform:scale(1.08)}
.act-card:hover .act-title{color:var(--accent)}

/* Cách đặt hàng, ưu điểm, ảnh banner */
.step{transition:transform .3s ease,box-shadow .3s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.1)}
.benefit{transition:transform .25s ease}
.benefit:hover{transform:translateY(-3px)}
.hero-media,.about-media{overflow:hidden;border-radius:10px}
.hero-media img,.about-media img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hero-media:hover img,.about-media:hover img{transform:scale(1.04)}
.link-accent{transition:letter-spacing .2s ease,opacity .2s ease}
.link-accent:hover{opacity:.8;letter-spacing:.02em}
.chip{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.chip:hover{transform:translateY(-2px)}

/* Trang sản phẩm: chuyển ảnh mượt, phóng to khi rê chuột, xem ảnh lớn */
.product-main{position:relative}
.product-main img{transition:opacity .22s ease,transform .25s ease;transform-origin:50% 50%}
.product-main img.is-fading{opacity:0}
.product-main.can-zoom{cursor:zoom-in}
.product-main.is-zooming img{transform:scale(2)}
.thumb{transition:border-color .2s ease,transform .2s ease}
.thumb:hover{transform:translateY(-3px);border-color:#9AA0A8}
.thumb.is-active:hover{border-color:var(--accent)}
.vp-lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,12,15,.88);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;cursor:zoom-out}
.vp-lightbox.is-open{opacity:1;visibility:visible}
.vp-lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;transform:scale(.94);transition:transform .3s ease}
.vp-lightbox.is-open img{transform:scale(1)}
.vp-lightbox-close{position:absolute;top:14px;right:18px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer}

/* Phần liên hệ: logo và đường dẫn 3 ứng dụng */
.cta-apps{display:flex;flex-wrap:wrap;gap:20px 28px}
.cta-app{display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;text-align:center;transition:transform .25s ease}
.cta-app:hover,.cta-app:focus-visible{transform:translateY(-6px)}
.cta-app-logo{width:84px;height:84px;border-radius:20px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .25s ease,box-shadow .25s ease}
.cta-app:hover .cta-app-logo{transform:scale(1.08);box-shadow:0 14px 28px rgba(0,0,0,.32)}
.cta-app-logo img{width:100%;height:100%;object-fit:contain;padding:14px}
.cta-app-logo .bubble-text{font-size:14px}
.cta-app-name{margin-top:4px;font-size:16px;font-weight:700}
.cta-app-url{max-width:100%;font-size:12px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){.cta-app{width:30%;min-width:96px}.cta-app-logo{width:72px;height:72px}}

/* Hiện dần khi cuộn tới */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal.is-in.card:hover,.reveal.is-in.act-card:hover,.reveal.is-in.step:hover{transform:translateY(-6px)}

/* Banner hiện khi tải trang */
@keyframes vp-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes vp-fade{from{opacity:0}to{opacity:1}}
.hero-text>*{animation:vp-rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-text>*:nth-child(2){animation-delay:.1s}
.hero-text>*:nth-child(3){animation-delay:.2s}
.hero-text>*:nth-child(4){animation-delay:.3s}
.hero-media{animation:vp-fade 1.1s ease .2s both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}