:root {
    --ink: #000;
    --yel: #f6d115
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #fff;
    color: #000;
    font: 400 24px/32px 'Afacad',sans-serif;
    overflow-x: hidden
}

img {
    width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    cursor: pointer
}

header {
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 34px 0 18px;
    gap: 0
}

.logo {
    width: 344px;
    height: 70px;
    object-fit: contain
}

nav {
    display: flex;
    gap: 0;
    margin: 0 auto 0 max(20px,calc(41.35vw - 367px));
    font: 400 20px/24px 'ABeeZee',sans-serif
}

nav a {
   float:left;
   padding: 5px 20px;
}
nav a:hover {
    color: #b89a00
}

nav a:nth-child(1) {
    /* width: 138.8px; */
}

nav a:nth-child(2) {
    /* width: 128.6px; */
}

nav a:nth-child(3) {
    /* width: 133.4px; */
}

.search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 306px;
    height: 57px;
    background: rgba(242,206,19,.07);
    border-radius: 99px;
    padding: 0 18px
}

.search input {
    border: 0;
    background: none;
    outline: 0;
    width: 100%;
    font: 400 20px/24px 'Inter',sans-serif
}

.search input::placeholder {
    color: #000;
    opacity: .35
}

.ib {
    background: none;
    border: 0;
    padding: 0;
    display: grid;
    place-items: center;
    color: #000
}

.flag {
    width: 64px;
    height: 41px;
    margin-left: 23px;
    border: 0;
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    background: none
}

.flag img {
    width: 100%;
    height: 100%
}

.cart {
    position: relative;
    width: 35px;
    height: 35px;
    margin-left: 38px
}

.cart b {
    position: absolute;
    top: -6px;
    right: -8px;
    background: #da251d;
    color: #fff;
    border-radius: 9px;
    font: 700 11px/16px 'Inter';
    min-width: 16px;
    text-align: center;
    display: none
}

#user {
    margin-left: 31px;
    width: 36px;
    height: 36px
}

.hero {
    max-width: 1425px;
    margin: 0 auto;
    text-align: center;
    position: relative
}

.paws {
    width: 128px;
    height: 129px;
    margin: 60px auto 2px
}

.tags {
    display: flex;
    justify-content: center;
    gap: 70px;
    font: 700 24px/32px 'Afacad'
}

.tags span {
    min-width: 80px
}

h1 {
    font: 800 min(10.4vw,200px)/1.05 'Baloo 2';
    margin: 12px 0 -.61em;
    position: relative;
    z-index: 2
}

h1 b {
    color: var(--yel);
    font-weight: 800
}

.dog {
    width: 100%;
    position: relative;
    z-index: 1
}

h2.c {
    font: 700 40px/53px 'Afacad';
    text-align: center;
    margin: 33px 0 10px;
    position: relative;
    z-index: 3
}

.w {
    max-width: 1530px;
    margin: 0 auto;
    padding: 0 15px
}

.col {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px
}

.col>div {
    aspect-ratio: 500/600;
    border-radius: 20px;
    background-size: cover!important
}

.c1 {
    /* background: url(images/bg-29.png) center,radial-gradient(ellipse at 30% 20%,#e3362b,#8c0b0b 70%); */
}

.c2 {
    /* background: url(images/le-2-9.jpg) center,radial-gradient(ellipse at 60% 30%,#e3362b,#8c0b0b 70%); */
}

.c3 {
    /* background: url(images/vietnamita.jpg) center,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23ffeb0a' points='50,5 61,38 96,38 68,58 79,92 50,71 21,92 32,58 4,38 39,38'/%3E%3C/svg%3E") center/62% no-repeat,#da251d; */
}

.slider {
    margin-top: 36px;
    aspect-ratio: 1530/630;
    border-radius: 30px;
    overflow: hidden;
    position: relative
}

.sl {
    display: flex;
    height: 100%;
    transition: transform .6s
}

.s {
    flex: 0 0 100%;
    background-size: cover!important;
    background-position: center
}

.s1 {
    background: url(images/box-topview.png),linear-gradient(135deg,#bbb,#777)
}

.s2 {
    background: url(images/box.png),linear-gradient(135deg,#333,#111)
}

.s3 {
    background: url(images/le-2-9.jpg),radial-gradient(ellipse,#e3362b,#8c0b0b)
}

.dots {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px
}

.dots i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff8;
    cursor: pointer
}

.dots i.on {
    background: var(--yel)
}

.about {
    max-width: 1920px;
    margin: 57px auto 0;
    padding: 0 71px 0 clamp(20px,12vw,229px);
    display: grid;
    grid-template-columns: 876px minmax(0,1fr);
    gap: 0
}

.ttl {
    width: 470px;
    max-width: 100%;
    height: auto;
    margin: 53px 0 45px
}

.about h3 {
    font: 700 40px/53px 'Afacad';
    text-transform: uppercase;
    margin: 0 0 8px
}

.about p {
    margin: 0;
    max-width: 861px;
    letter-spacing: -.03em
}

.about .tag {
    letter-spacing: 0;
    font: 500 32px/43px 'Afacad';
    margin: 5px 0 83px
}

.sit {
    width: calc(100% + 28px);
    margin-left: -28px
}

.moments {
    position: relative;
    max-width: 1360px;
    margin: 150px auto 62px
}

.moments h2 {
    font: 700 32px/43px 'Afacad';
    color: #231f20;
    text-align: center;
    margin: 0 0 34px;
    position: relative;
    z-index: 2
}

.hd {
    position: relative;
    display: inline-block
}

.hd img {
    position: absolute;
    left: -25px;
    top: -28px;
    width: 78px;
    transform: rotate(13deg);
    z-index: -1
}

.tw {
    position: relative;
    z-index: 1
}

.pale {
    position: absolute;
    width: 51.1%;
    left: 22.3%;
    top: -3%;
    transform: rotate(-6deg);
    z-index: 0
}

.track {
    display: flex;
    gap: 55px;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    position: relative;
    z-index: 1
}

.track::-webkit-scrollbar {
    display: none
}

.m {
    flex: 0 0 413px;
    height: 620px;
    background: #d9d9d9;
    border-radius: 32px
}

.cat1 {
    position: absolute;
    left: -136px;
    bottom: 0;
    width: 189px;
    z-index: 3
}

.cat2 {
    position: absolute;
    left: 1073px;
    top: -198px;
    width: 296px;
    z-index: 3
}

footer {
    border-top: 2px solid var(--yel);
    position: relative
}

.top {
    max-width: 1920px;
    margin: 0 auto;
    padding: 49px 0 0 clamp(20px,11vw,210px);
    display: grid;
    grid-template-columns: 809px 319px 271px 1fr;
    height: 328px;
    margin-bottom: 0;
    font: 400 15px/20px 'Afacad'
}

footer h4 {
    font: 700 15px/20px 'Afacad';
    margin: 0 0 7px
}

footer .lk a {
    display: block;
    line-height: 30px
}

footer .lk a:hover {
    text-decoration: underline
}

.top h4 {
    margin-top: 0
}

.in {
    display: block;
    width: 100%;
    max-width: 627px;
    border: .25px solid #000;
    border-radius: 134px;
    height: 49px;
    padding: 0 12px;
    margin-bottom: 26px;
    font: 400 15px 'Roboto',sans-serif;
    background: #fff;
    outline: 0;
    line-height: 43px
}

.top .in.s {
    height: 43px;
    border-radius: 40px;
    margin-bottom: 20px
}

.msg {
    min-height: 0;
    margin: -18px 0 14px 12px;
    color: #b00;
    font-size: 13px
}

.msg.ok {
    color: #2a8a3a
}

.help {
    margin-top: -2px
}

.bot {
    max-width: 1920px;
    margin: 0 auto;
    padding: 16px 0 11px clamp(20px,11vw,210px);
    position: relative;
    /* min-height: 221px; */
    font: 400 15px/18px 'Roboto',sans-serif
}

.info div {
    margin-bottom: 11px
}

.pay {
    position: absolute;
    left: min(1275px,66.4%);
    top: 18px;
    display: flex;
    align-items: center;
    gap: 84px;
}

.pay img {
    max-height: 50px;
}

.soc {
    position: absolute;
    left: min(1281px,66.7%);
    top: 90px;
    display: flex;
    align-items: center
}

.soc img {
    display: block;
    max-height: 50px;
    max-width: 50px;
}

.soc .fb {
    width: 53px
}

.soc .ig {
    width: 52px;
    margin-left: 57px
}

.soc .yt {
    margin-left: 70px
}

.soc .sp {
    width: 70px;
    margin-left: 56px
}

#toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: #231f20;
    color: #fff;
    padding: 10px 20px;
    border-radius: 24px;
    font: 400 16px 'Afacad';
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 99
}

#toast.on {
    opacity: 1
}

@media(max-width: 1500px) {
    .about {
        grid-template-columns:1fr 1fr;
        gap: 30px
    }

    .sit {
        width: 100%;
        margin-left: 0
    }
}

@media(max-width: 1100px) {
    .cat1,.cat2 {
        display:none
    }

    .about,.top {
        grid-template-columns: 1fr;
        height: auto;
        padding-right: 20px
    }

    .pay,.soc {
        position: static;
        flex-wrap: wrap;
        padding: 10px 20px
    }

    .bot {
        min-height: 0
    }

    header {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 16px;
        gap: 12px
    }

    nav {
        order: 5;
        width: 100%;
        margin: 0;
        gap: 28px
    }

    .search {
        width: 100%;
        order: 6
    }

    .m {
        flex-basis: 70vw;
        height: auto;
        aspect-ratio: 413/620
    }

    .hero .paws {
        margin-top: 20px
    }

    .tags {
        gap: 24px
    }
}

/* ===== Hiệu ứng 3D & tương tác ===== */
.rv {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s ease,transform .8s ease
}

.rv.vis {
    opacity: 1;
    transform: none
}

.tilt {
    position: relative;
    /* transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s; */
    /* will-change: transform; */
}

.tilt.on {
    /* transition: transform .08s linear,box-shadow .3s; */
    box-shadow: 0 26px 44px rgba(0,0,0,.28);
    z-index: 2
}
.tilt img {
    border-radius:15px;
}
.tilt::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.38),transparent 55%);
}

.tilt.on::after {
    opacity: 1
}

.hero h1,.hero .dog,.hero .paws {
    transition: transform .25s ease-out,text-shadow .25s
}

.pb {
    position: fixed;
    width: 22px;
    pointer-events: none;
    z-index: 100
}

@keyframes bump {
    40% {
        transform: scale(1.35) rotate(-8deg)
    }

    70% {
        transform: scale(.9)
    }
}

.cart.bump {
    animation: bump .45s
}

@media(prefers-reduced-motion:no-preference) {
    .ib,.flag {
        transition: transform .18s
    }

    .ib:hover,.flag:hover {
        transform: translateY(-3px) scale(1.12)
    }

    .ib:active,.flag:active {
        transform: scale(.9)
    }

    nav a:hover {
        text-decoration: underline;
        text-decoration-color: var(--yel);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px
    }

    .search {
        transition: box-shadow .25s,background .25s
    }

    .search:focus-within {
        background: #fff7d6;
        box-shadow: 0 0 0 2px var(--yel)
    }

    .cat1,.cat2,.sit {
        transition: transform .4s cubic-bezier(.34,1.56,.64,1)
    }

    .cat1:hover {
        
    }

    .cat2:hover {
        
    }

    .sit:hover {
        
    }

    .soc a,.pay img {
        transition: transform .2s
    }

    .soc a:hover,.pay img:hover {
        transform: translateY(-4px) scale(1.1)
    }
}

/* Ảnh không bôi đen / kéo thả được; ảnh trang trí nằm chìm phía sau */
img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none
}

.pale,.hd img,.hp,.paws {
    pointer-events: none
}
#lang {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    width: 50px; /* Đặt chiều rộng cố định cho nút */
    height: 35px; /* Đặt chiều cao cố định cho nút */
    perspective: 1000px;
}

#lang img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0.2, 0.2, 1);
    backface-visibility: hidden;
}

/* Cờ VN */
#lang img:nth-child(1) {
    transform: rotateY(0deg);
}

/* Cờ EN ẩn sẵn ở góc quay 180 độ */
#lang img:nth-child(2) {
    transform: rotateY(-180deg);
}

/* Khi hover */
#lang:hover img:nth-child(1) {
    transform: rotateY(180deg);
}

#lang:hover img:nth-child(2) {
    transform: rotateY(0deg);
}
/* Mặc định trên Điện thoại / Màn hình nhỏ: Giữ nguyên trạng thái tự nhiên, không fixed */
header {
    width: 100%;
    background-color: #ffffff;
}

/* Chỉ áp dụng hiệu ứng khi màn hình từ 1024px trở lên (Máy tính / Laptop) */
@media screen and (min-width: 1024px) {
    header {
        transition: all 0.3s ease-in-out;
    }

    header.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        animation: slideDown 0.3s ease-in-out;
        border-bottom: 1px solid #a9a3a3;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
.col.rv.vis {
  perspective: 1000px; /* Bắt buộc để kích hoạt hiệu ứng không gian 3D */
}

/* 2. Thiết lập cho thẻ bao quanh sản phẩm (có class là tilt) */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 3. Hiệu ứng khi di chuột vào khối .tilt (hoặc bạn có thể chọn .tilt:hover img) */
.tilt:hover {
  /* Đẩy toàn bộ khung hoặc thẻ tiến về phía trước trên trục Z mà không scale ảnh */
  transform: translateZ(40px);
  
  /* Tăng độ bóng để tạo cảm giác nổi lên */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  z-index: 10; /* Đảm bảo khối nổi lên hiển thị đè lên các khối khác */
}

/* 4. (Tùy chọn) Nếu bạn chỉ muốn đẩy riêng bức ảnh bên trong tiến về trước */
.tilt:hover img {
  transform: translateZ(30px);
  transition: transform 0.4s ease;
}
#track {
  /* Ép trình duyệt sử dụng phần cứng GPU để render, giúp khung hình không bị khựng */
  transform: translateZ(0);
  will-change: scroll-position;
  
  /* Ẩn thanh cuộn mặc định nhưng vẫn giữ chức năng cuộn */
  scrollbar-width: none; 
  -ms-overflow-style: none;
}

#track::-webkit-scrollbar {
  display: none;
}

/* Đảm bảo các item bên trong không bị ép layout lại khi cuộn */
#track .m.tilt {
  flex-shrink: 0;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.menu_bb_scr.is-sticky
{

}
.menu_bb_scr.is-sticky .logo
{

}