/*--------------------------------------------------------------------------
|  Header
--------------------------------------------------------------------------*/
body {
    font-family: "Inter", sans-serif;
    background: #f3f3f3;
}

.social-section a {
    color: black;
}

.entire-action-header {
    position: relative;
}

.entire-action-header .form-dropdown {
    position: absolute;
    padding: 10px;
    background-color: #ffffff;
    width: 300px;
    top: 100%;
    left: auto;
    right: 0;
    z-index: 1000;
    margin-bottom: 0;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    filter: opacity(0);
    visibility: hidden;
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
}

.entire-action-header:hover .form-dropdown {
    -webkit-animation: nav_menu_anim_open 0.3s both;
    -o-animation: nav_menu_anim_open 0.3s both;
    animation: nav_menu_anim_open 0.3s both;
    opacity: 1;
    filter: opacity(1);
    visibility: visible;
    pointer-events: unset;
}

.tophead-info-website {
    display: flex;
    align-items: center;
}

.tophead-info-website p {
    margin: 0;
    margin-left: 1rem;
    font-size: 1.3rem;
}

.language-picker {
    font-size: 1.3rem;
}

.language-picker {
    font-size: 1.3rem;
}

/*--------------------------------------------------------------------------
|  Main
--------------------------------------------------------------------------*/
.swiper-pagination-bullet {
    width: 20px;
    height: 4px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.swiper-pagination-bullet::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0.4);
}

.swiper-pagination-bullet-active::before {
    background-color: white;
    -webkit-animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
    animation: slide-progress 5s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}

.swiper-paused .swiper-pagination-bullet-active::before {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.swiper-slider-main .swiper-pagination {
    position: relative;
    bottom: 0;
    left: 0;
    width: auto;
    text-align: left;
    margin-top: 2rem;
}
.swiper-slide--description-customer{
font-size:2.2rem;
line-height:1.7;
font-weight:400;
}

@-webkit-keyframes slide-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide-progress {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

.prd-cate-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 3rem 1.5rem;
    background: linear-gradient(180deg, #FFFFFF00 30%, #FFFFFFE3 100%);
}

.baner-html {
    position: relative;
}

.banner-image:before {
    content: "";
    background: #FFFFFF;
    opacity: 0.77;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.banner-info {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 3rem;
    z-index: 2;
}

.title-banner {
    font-size: 3rem;
    letter-spacing: 5.7px;
    font-weight: 300;
}

.desc-banner {
    color: darkgray;
}

.bg-review {
    background-image: radial-gradient(at center center, #FFFFFF 0%, #FBE7DF 57%);
    padding: 6rem 0;
}

.ratio-avatar-customer img {
    width: 50px;
    aspect-ratio: 1/1;
}

/*--------------------------------------------------------------------------
|  Footer
--------------------------------------------------------------------------*/
footer {
    position: relative;
    background: white;
}

.back-footer {
    position: relative;
    padding-top: 27vh;
    overflow: hidden;
    background-repeat: repeat;
    background-position: top left;
}

.bg-footer {
    position: absolute;
    width: 100%;
    height: 100%;
}

footer .logo-section {
    margin-bottom: 3rem;
}
.footer-line{
width:100%;
border:none;
border-top:4px solid #ccc;
margin: 5px 0;
}
footer .footer-col{
text-align:left;
color:#000;
text-decoration:none;
}

footer .footer-col h4{
text-align:left;
font-size:18px;
font-weight:600;
margin-bottom:15px;
}

footer .footer-col p{
text-align:left;
margin-bottom:10px;
font-size:15px;
}
footer .footer-col a{
color:#000;
text-decoration:none;
}

footer .footer-col a:hover{
color:#000;
}
footer .social-section{
font-size:22px;
}
footer h4{
font-size: 25px;
font-weight:700;
margin-bottom:10px;
}

/*--------------------------------------------------------------------------
|  Responsive
--------------------------------------------------------------------------*/

.is-mobile .title-section {
    font-size: 3rem;
}

.is-mobile .big-bread {
    font-size: 3rem;
}

.is-mobile .title-banner {
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .banner-One .ratio-1-1, .banner-Four .ratio-1-1 {
        padding-top: 48%;
    } 
    
    footer .list-inline {
        justify-content: center;
    }
}
@media (max-width: 767px) {
    /* Ép khung chứa banner có tỷ lệ phù hợp với mobile */
    .banner-One .ratio-1-1, .banner-Four .ratio-1-1 {
        padding-top: 100% !important; /* Biến banner thành hình vuông trên mobile để thấy hết ảnh */
        background-size: contain !important; /* Đảm bảo thấy toàn bộ ảnh, không bị mất góc */
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    /* Ẩn các khối chữ đè lên ảnh vì ảnh của bạn đã có sẵn chữ */
    .banner-info, .title-banner, .desc-banner {
        display: none !important;
    }

    /* Chỉnh lại khoảng cách header để không đè lên banner */
    .tophead-info-website {
        padding-bottom: 10px !important;
    }
}
.lucky-gift{
position:fixed;
right:30px;
top:300px;
width:90px;
height:90px;
cursor:pointer;
z-index:9999;
animation: giftShake 2s infinite;
}

.lucky-gift img{
width:100%;
height:100%;
border-radius:50%;
}

/* hiệu ứng rung */

@keyframes giftShake{
0%{transform:rotate(0deg);}
25%{transform:rotate(5deg);}
50%{transform:rotate(-5deg);}
75%{transform:rotate(3deg);}
100%{transform:rotate(0deg);}
}


/* popup nền */

.gift-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}


/* box popup */

.gift-box{
text-align:center;
position:relative;
background:transparent;
padding:0;
}


/* nút đóng */

.gift-close{
position:absolute;
top:-30px;
right:-10px;
font-size:22px;
cursor:pointer;
color: red;
}


/* ảnh voucher */

.gift-image{
width:500px;
max-width:100%;
display:block;
margin: 20px auto;
position: relative;
z-index: 5;
}

/* nút nhận quà */

.gift-btn{
margin-top:20px;
background:#e8c37a;
border:none;
padding:14px 40px;
border-radius:12px;
font-size:18px;
font-weight:600;
cursor:pointer;
}
#fireworks{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:20;
}
/* --- PHẦN STICKER (BIỂU TƯỢNG RUNG RINH) --- */
.lucky-gift-2 {
    position: fixed;
    right: 30px;      /* Cùng lề phải với Sticker 1 */
    top: 680px;        /* Nằm dưới Sticker 1 (300px + 110px) */
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 9999;     /* Ưu tiên hiển thị trên các thành phần web */
    animation: giftShake2 2s infinite;
}

.lucky-gift-2 img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Hiệu ứng rung rinh riêng cho Sticker 2 */
@keyframes giftShake2 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    50% { transform: rotate(-8deg); }
    75% { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* --- PHẦN POPUP NỀN --- */
#giftPopup2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Nền tối hơn một chút để nổi bật Voucher 2 */
    display: none; /* Mặc định ẩn */
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

/* Box chứa nội dung quà tặng */
.gift-box-2 {
    text-align: center;
    position: relative;
    background: transparent;
    padding: 0;
    width: 90%;
    max-width: 500px;
}

/* Nút đóng (X) */
.gift-close-2 {
    position: absolute;
    top: -65px;
    right: 0px;
    font-size: 26px;
    cursor: pointer;
    color: #ffffff;
    font-weight: bold;
    transition: 0.3s;
}

.gift-close-2:hover {
    color: #ff4d4d;
    transform: scale(1.2);
}

/* Ảnh Voucher 2 */
.gift-image-2 {
    width: 100%;
    display: block;
    margin: 0 auto 35px auto; /* tạo khoảng cách với nút */
    position: relative;
    z-index: 5;
    border-radius: 10px;
}
/* --- DÒNG CHỮ CHÚC MỪNG --- */
#congratsText2 {
    display: none; 
    color: #ffffff; 
    margin: 20px 0; 
    font-size: 28px; 
    font-weight: bold;
    text-shadow: 0 0 10px #ff0000, 2px 2px 5px #000;
    animation: bounceIn 0.5s ease;
}

/* --- NÚT NHẬN QUÀ 2 --- */
.gift-btn-2 {
    margin-top: 45px;
    background: linear-gradient(180deg, #ff6a6a 0%, #ff2a2a 100%);
    color: white;
    border: none;
    padding: 15px 45px;
    border-radius: 40px;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 60, 60, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;

    animation: pulseBtn 1.2s infinite;
}
/* Hiệu ứng phập phồng */
@keyframes pulseBtn {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 70, 70, 0.6);
    }
    40% {
        transform: scale(1.12);
        box-shadow: 0 0 25px 10px rgba(255, 70, 70, 0.25);
    }
    70% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 70, 70, 0);
    }
}
.gift-btn-2:hover {
    transform: scale(1.15);
    box-shadow: 0 15px 35px rgba(0,0,0,0.35);
}

/* --- PHÁO HOA CANVAS --- */
#fireworks2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Nằm dưới ảnh và nút */
}

/* Hiệu ứng xuất hiện dòng chữ */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* Tối ưu cho di động */
@media (max-width: 768px) {
    .lucky-gift-2 {
        width: 70px;
        height: 70px;
        right: 15px;
        top: 380px; /* Điều chỉnh lại vị trí trên mobile */
    }
#congratsText2 {
        font-size: 20px;
    }
    .gift-btn-2 {
        padding: 12px 30px;
        font-size: 16px;
    }
}
/* ===== POPUP TRANG CHỦ ===== */
.home-popup-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999 !important;
  padding: 20px;
  box-sizing: border-box;
}

.home-popup-overlay.show{
  display: flex;
}

.home-popup-box{
  position: relative;
  width: min(420px, 92vw);
  animation: popupFadeIn 0.35s ease;
  z-index: 2;
}

.home-popup-content{
  position: relative;
  width: 100%;
}

.home-popup-image{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.home-popup-close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 26px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  padding: 0;
}

.home-popup-close:hover{
  transform: scale(1.06);
}

/* ===== NÚT CTA TÌM HIỂU THÊM ===== */
.popup-cta-btn{
  position: absolute;
  left: 50%;
  bottom: 38px;
  transform: translateX(-50%);
  display: inline-block;
  min-width: 210px;
  padding: 12px 24px;
  border-radius: 32px;
  border: 2px solid #f0c36a;
  background: linear-gradient(180deg, #fff2cc 0%, #ffe09a 100%);
  color: #c62828;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: all 0.25s ease;
  z-index: 3;
  box-sizing: border-box;
}

.popup-cta-btn:hover{
  transform: translateX(-50%) scale(1.05);
  text-decoration: none;
}

.popup-cta-btn:focus{
  outline: none;
}

/* ===== HIỆU ỨNG XUẤT HIỆN ===== */
@keyframes popupFadeIn{
  from{
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes popupPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.home-popup-box.pulse {
  animation: popupPulse 0.8s ease;
}

.home-popup-box.attention {
  animation: popupAttention 0.6s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px){
  .home-popup-box{
    width: min(380px, 92vw);
  }

  .popup-cta-btn{
    min-width: 190px;
    font-size: 15px;
    padding: 11px 20px;
    bottom: 30px;
  }
}

@media (max-width: 480px){
  .home-popup-overlay{
    padding: 14px;
  }

  .home-popup-box{
    width: 92vw;
  }

  .home-popup-image{
    border-radius: 14px;
  }

  .home-popup-close{
    top: -10px;
    right: -6px;
    width: 34px;
    height: 34px;
    font-size: 24px;
    line-height: 34px;
  }

  .popup-cta-btn{
    min-width: 170px;
    font-size: 14px;
    padding: 10px 18px;
    bottom: 24px;
    border-radius: 28px;
  }
}