@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

    .font-main{ font-family: 'Manrope', sans-serif !important; }
    .font-secondary{ font-family: 'Newsreader', sans-serif !important; }

    /* Body Options */
    body{ font-family: 'Manrope', sans-serif; font-weight: 400; letter-spacing: 0px; font-size:19px; }
    body *{outline:none;}


    ::selection{color:white;background-color:#363636;}

    .colored,.colored-hover:hover,.colored-active.active,
    .plyr--full-ui input[type=range],
    .modern-nav.link-hover-01 .nav-container .nav-menu .nav-links li:not(.extra-links):hover>a.nav-link,
    .modern-nav.link-hover-01 .nav-container li.extra-links>a.nav-link:hover,
    .modern-nav.link-hover-01 .nav-container li.active>a.nav-link,
    .modern-nav.link-hover-01 .nav-container li>a.nav-link.active{
        color:#5A2A5A !important;
    }
    /* Colored1 */
    .colored1,.colored1-hover:hover,.colored1-active.active{
        color:#745b18 !important;
    }
    /* Colored2 */
    .colored2,.colored2-hover:hover,.colored2-active.active{
        color:#FFEFF8 !important;
    }
    .text-gradient-yellow {
        /* Tạo dải màu chuyển từ Vàng sáng (Gold) sang Cam/Vàng đậm */
        background: linear-gradient(90deg, #FFD700 0%, #FF8C00 100%);
        
        /* Cắt background theo viền chữ */
        -webkit-background-clip: text;
        background-clip: text;
        
        /* Làm trong suốt màu chữ gốc để lộ background gradient phía sau */
        -webkit-text-fill-color: transparent;
        color: transparent; 
        
        /* Giúp gradient hiển thị chính xác trên thẻ span (inline) */
        display: inline-block; 
    }
/* ==============================================
    BACKGROUND COLORS
============================================== */

    /* bg-colored */
    .bg-colored,.bg-colored-hover:hover,.bg-colored-active.active,.bg-colored-hover-trigger:hover .bg-colored-hover-target,
    .modern-nav .nav-links .nav-link:before,
    .irs-from, .irs-to, .irs-single, .irs-line-left, .irs-line-mid, .irs-line-right,
    .dots-colored-active:not(.dots-circle) .slick-dots li.slick-active:before,
    .plyr__control--overlaid,
    .plyr__volume .plyr__control:hover,
    .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true],
    .twentytwenty-handle:active,
    .underline-slide.underline-colored:before,.underline-slide.underline-colored:after{
        background-color:#5A2A5A !important;
    }
    /* bg-colored1 */
    .bg-colored1,.bg-colored1-hover:hover,.bg-colored1-active.active,.bg-colored1-hover-trigger:hover .bg-colored1-hover-target{
        background-color:#745b18 !important;
    }
    /* bg-colored2 */
    .bg-colored2,.bg-colored2-hover:hover,.bg-colored2-active.active,.bg-colored1-hover-trigger:hover .bg-colored1-hover-target{
        background-color:#FFEFF8 !important;
    }

    .bg-gradient-new{
        background: linear-gradient(135deg, #C5A048 0%, #745B18 100%);
        box-shadow: 0 4px 20px -5px rgba(116, 91, 24, 0.4);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    /* Soft backgrounds - colored Tones */
    .bg-soft-colored:before,.bg-soft-colored-hover:hover:before,.bg-soft-colored-active.active:before,.bg-soft-colored9:before,.bg-soft-colored9-hover:hover:before,.bg-soft-colored9-active.active:before{background-color:rgba(219,36,27,0.9);}
    .bg-soft-colored1:before,.bg-soft-colored1-hover:hover:before,.bg-soft-colored1-active.active:before{background-color:rgba(219,36,27,0.1);}
    .bg-soft-colored2:before,.bg-soft-colored2-hover:hover:before,.bg-soft-colored2-active.active:before{background-color:rgba(219,36,27,0.2);}
    .bg-soft-colored3:before,.bg-soft-colored3-hover:hover:before,.bg-soft-colored3-active.active:before{background-color:rgba(219,36,27,0.3);}
    .bg-soft-colored4:before,.bg-soft-colored4-hover:hover:before,.bg-soft-colored4-active.active:before{background-color:rgba(219,36,27,0.4);}
    .bg-soft-colored5:before,.bg-soft-colored5-hover:hover:before,.bg-soft-colored5-active.active:before{background-color:rgba(219,36,27,0.5);}
    .bg-soft-colored6:before,.bg-soft-colored6-hover:hover:before,.bg-soft-colored6-active.active:before{background-color:rgba(219,36,27,0.6);}
    .bg-soft-colored7:before,.bg-soft-colored7-hover:hover:before,.bg-soft-colored7-active.active:before{background-color:rgba(219,36,27,0.7);}
    .bg-soft-colored8:before,.bg-soft-colored8-hover:hover:before,.bg-soft-colored8-active.active:before{background-color:rgba(219,36,27,0.8);}
    .bg-soft-colored10:before,.bg-soft-colored10-hover:hover:before,.bg-soft-colored10-active.active:before{background-color:rgba(219,36,27,1);}

/* ==============================================
    BORDER COLORS
============================================== */

    /* b-colored */
    .b-colored,.b-colored-hover:hover,.b-colored-active.active,
    .strip-timeline .dates div:hover:after, .strip-timeline .dates div.active:after,
    .interactive-packages .selector{
        border-color:#fcbd0b !important;
    }
    /* b-colored1 */
    .b-colored1,.b-colored1-hover:hover,.b-colored1-active.active{
        border-color:#0068FF !important;
    }
    /* b-colored2 */
    .b-colored2,.b-colored2-hover:hover,.b-colored2-active.active{
        border-color:#811712 !important;
    }

/* ==============================================
    SVG COLORS
============================================== */

/* Fills */
    /* fill-colored */
    .fill-colored,.fill-colored-hover:hover,.fill-colored-active.active{
        fill:#fcbd0b !important;
    }
    /* fill-colored1 */
    .fill-colored1,.fill-colored1-hover:hover,.fill-colored1-active.active{
        fill:#0068FF !important;
    }
    /* fill-colored2 */
    .fill-colored2,.fill-colored2-hover:hover,.fill-colored2-active.active{
        fill:#811712 !important;
    }

/* Strokes */
    /* stroke-colored */
    .stroke-colored,.stroke-colored-hover:hover,.stroke-colored-active.active{
        stroke:#fcbd0b !important;
    }
    /* stroke-colored1 */
    .stroke-colored1,.stroke-colored1-hover:hover,.stroke-colored1-active.active{
        stroke:#0068FF !important;
    }
    /* stroke-colored2 */
    .stroke-colored2,.stroke-colored2-hover:hover,.stroke-colored2-active.active{
        stroke:#811712 !important;
    }

/* ==============================================
    GRADIENT BACKGROUNDS
============================================== */

    /* bg-gradient, hover, active, bg-soft-gradient */
    .bg-soft-gradient:before,.bg-gradient,.bg-gradient-hover:hover,.bg-gradient-active.active{
        background-image: #202a3e !important; background-image: linear-gradient(45deg, #202a3e 0%, #5b2c2c 100%) !important;
    }
    /* bg-gradient1, hover, active, bg-soft-gradient1 */
    .bg-soft-gradient1:before,.bg-gradient1,.bg-gradient1-hover:hover,.bg-gradient1-active.active{
        background-image: #ba2922 !important; background-image: linear-gradient(45deg, #ba2922 0%, #1a4c98 100%) !important;
    }
    /* bg-gradient2, hover, active, bg-soft-gradient2 */
    .bg-soft-gradient2:before,.bg-gradient2,.bg-gradient2-hover:hover,.bg-gradient2-active.active{
        background-image: #37191f !important; background-image: linear-gradient(-90deg, #37191f 0%, #1f2b4f 100%) !important;
    }
    /* bg-gradient3, hover, active, bg-soft-gradient3 */
    .bg-soft-gradient3:before{ opacity: 0.92;}
    .bg-soft-gradient3:before,.bg-gradient3,.bg-gradient3-hover:hover,.bg-gradient3-active.active{
        background-image: #7CD8AC !important; background-image: linear-gradient(-90deg, #7CD8AC 0%, #57AF82 100%) !important;
    }
    /* bg-gradient4, hover, active, bg-soft-gradient4 */
    .bg-soft-gradient4:before,.bg-gradient4,.bg-gradient4-hover:hover,.bg-gradient4-active.active{
        background-image: #131313 !important; background-image: linear-gradient(45deg,  #131313 0%,#282828 100%) !important;
    }


#content p,
#content h2,
#content h3,
#content h4,
#content h5{
    margin-bottom: 15px;
}
#content img{
    max-width: 100%;
    margin-bottom: 5px;

}
#content ul,
#content ol{
    list-style: disc;
    padding-left: 15px;
}

figure h4{
/*      overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  */
}


/* Container */
.floating-cta {
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px; /* khoảng cách giữa các nút */
    z-index: 999;
  }
  
  /* Base button */
  .cta-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    text-decoration: none;
  }
  
  /* Icon chung */
  .cta-btn span {
    color: #fff;
    font-size: 16px;
  }
  
  /* Zalo */
  .cta-btn.zalo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  
  /* Call */
  .cta-btn.call {
    background: #fcbd0b;
  }
  
  /* Layout */
  .cta-btn.layout {
    background: #1D6F41;
  }
  
  /* Ripple effect */
  .cta-btn::before,
  .cta-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0.5;
    animation: ripple 1.8s infinite;
  }
  
  .cta-btn::after {
    animation-delay: 0.8s;
  }
  
  /* Set màu ripple theo button */
  .cta-btn.call {
    color: #fcbd0b;
  }
  .cta-btn.layout {
    color: #1D6F41;
  }
  .cta-btn.zalo {
    color: #0068ff;
  }
  
  /* Animation ripple */
  @keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.6);
      opacity: 0;
    }
  }
  
  /* Icon nháy nhẹ cho layout */
  .cta-btn.layout span {
    animation: shake 1.2s infinite;
  }
  
  /* Shake */
  @keyframes shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
  }


    .card-hover {
        transition: all 0.4s ease;
    }
    .card-hover:hover {
        background: rgba(0, 0, 0, 0.03);
    }
    
    .icon-wrap {
        width: 90px;
        height: 90px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .icon-wrap i {
        color: #6c757d;
        transition: all 0.3s ease;
    }
    
    .card-hover:hover .icon-wrap {
        background: #5A2A5A; /* primary */
        border-color: #5A2A5A;
    }
    
    .card-hover:hover .icon-wrap i {
        color: #fff;
    }
    .feature-list .number {
        font-size: 24px;
        font-style: italic;
        color: #6c757d;
        opacity: 0.5;
        transition: all 0.3s ease;
        min-width: 50px;
        padding-top: 8px !important;
    }
    .ratio-9x16 {
        --bs-aspect-ratio: 177.77%; /* 16:9 đảo lại = 9:16 */
      }
    .group-item:hover .number {
        opacity: 1;
        color: #0d6efd; /* primary */
    }
    
    .group-item {
        transition: all 0.3s ease;
    }
    .promo-box {
        background: linear-gradient(135deg, #2A0845 0%, #4B1248 50%, #68205F 100%);
    }
    
    .promo-title {
        color: #e2c073;
        font-size: clamp(24px, 4vw, 32px);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        line-height: 1.4;
    }
    
    .promo-sub {
        color: #f0f0f0;
    }
    
    .promo-inner {
        background: rgba(0, 0, 0, 0.25);
        border: 2px solid #E2C073;
    }
    
    .promo-highlight {
        color: #e2c073;
        font-size: clamp(18px, 3vw, 24px);
        text-transform: uppercase;
    }
    
    .promo-item {
        background: rgba(226, 192, 115, 0.1);
        border: 1px solid rgba(226, 192, 115, 0.5);
        padding: 15px;
        border-radius: 8px;
    }
    
    .promo-note {
        font-style: italic;
        color: #ccc;
    }
    .overview-box {
        background: #fdfafc;
        border: 1px solid #e0d0e0;
    }
    
    .overview-title span {
        color: #4b1248;
        text-transform: uppercase;
        font-size: 24px;
        border-bottom: 3px solid #E2C073;
        padding-bottom: 8px;
    }
    
    .overview-item {
        padding: 12px 0;
        border-bottom: 1px dashed #d5c5d5;
    }
    
    .overview-item:last-child {
        border-bottom: none;
    }
    
    .label {
        color: #68205f;
    }
    
    .content {
        color: #444;
        line-height: 1.6;
    }

.gap-20 { gap: 20px; }
.countdown-item {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 10px;
    min-width: 90px;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}
.countdown-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 576px) {
    .gap-10-sm { gap: 10px; }
    .countdown-item { min-width: 70px; padding: 10px 5px; }
}
.fw-bold { font-weight: 700; }
.opacity-8 { opacity: 0.8; }

.colored-new {
    background: linear-gradient(
        120deg,
        #B8962E 0%,
        #E2C073 25%,
        #FFF3C4 50%,
        #E2C073 75%,
        #B8962E 100%
    );
    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: goldShine 4s linear infinite;
}

@keyframes goldShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.img-utility {
    width: 100%;
    /* Thiết lập tỷ lệ khung hình cố định (Chiều rộng / Chiều cao) */
    aspect-ratio: 3 / 2; 
    /* Giúp hình ảnh không bị móp/méo, tự động cắt trung tâm */
    object-fit: cover;
    /* Đảm bảo hình ảnh hiển thị sắc nét */
    object-position: center; 
    display: block;
}

/* Tùy chỉnh thêm để đồng bộ chiều cao của khối nội dung bên dưới (nếu cần) */
.custom-slider .bg-colored {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.custom-slider .px-30 {
    flex-grow: 1; /* Giúp các ô nội dung có chiều cao bằng nhau */
}