/* crv-spa.css 2026-11-05: SPA-feel (view transitions, reveal, press). Khong doi mau, bo cuc. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* Reveal: chi ap khi JS da gan class crv-spa-on len <html>; khong JS = noi dung hien binh thuong */
@media (prefers-reduced-motion: no-preference) {
  html.crv-spa-on .crv-rv { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s ease-out, transform .5s ease-out; }
  html.crv-spa-on .crv-rv.crv-rv-in { opacity: 1; transform: none; }
  html.crv-spa-on .crv-press { transition: transform .12s ease-out; }
  html.crv-spa-on .crv-press.crv-pressed { transform: scale(.97); }
}
/* ===== v2 2026-11-05: hieu ung + kich co kieu Netflix. KHONG doi mau (chi bong do trung tinh). ===== */
:root { --crv-r: 12px; --crv-sh: 0 10px 28px rgba(0,0,0,.18); }
/* Bo goc the dong nhat */
.news-item .news-img, .news-slide-item .news-img, .product-item .product-image { border-radius: var(--crv-r); overflow: hidden; }
.news-item, .product-item { border-radius: var(--crv-r); }
/* Hover nang + scale 1.03 + zoom anh: chi chuot that */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.crv-spa-on .news-item, html.crv-spa-on .product-item {
    transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; will-change: transform; }
  html.crv-spa-on .news-item:hover, html.crv-spa-on .product-item:hover {
    transform: translate3d(0,-3px,0) scale(1.03); box-shadow: var(--crv-sh); position: relative; z-index: 2; }
  html.crv-spa-on .news-item img, html.crv-spa-on .product-item img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  html.crv-spa-on .news-item:hover img, html.crv-spa-on .product-item:hover img { transform: scale(1.03); }
}
/* Anh hien dan: chi khi JS gan crv-img-wait (anh chua tai, ngoai man hinh dau); bot/khong JS khong bao gio an */
@media (prefers-reduced-motion: no-preference) {
  html.crv-spa-on img.crv-img-wait { opacity: 0; }
  html.crv-spa-on img.crv-img-fade { transition: opacity .45s ease-out; }
}
/* Header dinh: bong nhe (khong blur: tranh vo position:fixed ben trong) khi cuon, khong doi mau nen */
html.crv-spa-on .crv-sph { transition: box-shadow .25s ease; }
html.crv-spa-on .crv-sph.crv-sph-sc { box-shadow: 0 4px 18px rgba(0,0,0,.14); }
/* Chu: giu nguyen co chu/khoang cach, chi chong tran chu + vung cham 44px */
html.crv-spa-on body { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
html.crv-spa-on .content-main, html.crv-spa-on .content-main p, html.crv-spa-on .content-main li { overflow-wrap: break-word; }
html.crv-spa-on .content-main img, html.crv-spa-on .content-main table { max-width: 100%; height: auto; }
@media (max-width: 767px) {
  html.crv-spa-on .content-main h1 { overflow-wrap: anywhere; }
  html.crv-spa-on a.btn:not(form a) { min-height: 44px; }
  html.crv-spa-on .content-main table { display: block; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html.crv-spa-on .crv-sph, html.crv-spa-on img.crv-img-fade { transition: none; }
}
/* ===== v2b: hieu ung chuyen nghiep (chi transform/opacity, khong doi mau) ===== */
@media (prefers-reduced-motion: no-preference) {
  html.crv-spa-on .crv-st { opacity: 0; transform: translate3d(0,16px,0); transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.7,.2,1); transition-delay: var(--crv-d, 0ms); }
  html.crv-spa-on .crv-st.crv-st-in { opacity: 1; transform: none; }
  html.crv-spa-on .crv-pulse { animation: crv-pulse 6s ease-in-out 3s infinite; }
  html.crv-spa-on.crv-touched .crv-pulse { animation: none; }
  @keyframes crv-pulse { 0%, 88%, 100% { transform: none; } 92% { transform: scale(1.04); } 96% { transform: scale(.99); } }
}
/* ===== v2c: tinh chinh kieu nen tang (bong trung tinh, focus ro, goc dong nhat) ===== */
html.crv-spa-on .news-item, html.crv-spa-on .product-item { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); }
html.crv-spa-on .btn, html.crv-spa-on .app-hero-btn, html.crv-spa-on .product-act { transition: transform .15s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { html.crv-spa-on .app-hero-btn:hover, html.crv-spa-on .product-act:hover { box-shadow: 0 6px 16px rgba(0,0,0,.14); } }
html.crv-spa-on a:focus-visible, html.crv-spa-on .btn:focus-visible, html.crv-spa-on .app-hero-btn:focus-visible, html.crv-spa-on .product-act:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
/* ===== v3: the xe trang chu 1 hang (.swiper-product-grid), giu kich thuoc/mau ===== */
.swiper-product-grid > .swiper-wrapper { flex-wrap: nowrap !important; flex-direction: row !important; }
.swiper-product-grid .swiper-slide { margin-top: 0 !important; height: auto; }
.swiper-product-grid .swiper-slide > .product-item { height: 100%; }
.swiper-product-grid { touch-action: pan-y; }