.gradient-bg { background: linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%); }
.hero-section { height: calc(100vh); min-height: 900px; background-image: url('https://ik.imagekit.io/brz4w2pfk/Assets/banner%20ncs%20event%202.webp?updatedAt=1750845901261'); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; }
.hero-section-survey{
    background-image: url('https://ik.imagekit.io/brz4w2pfk/banner-desktop.jpg');
    background-position: left bottom;
}
.mobile-hero-section { position: relative; padding-top: 80px; background-color: #f8f9fa; }
.mobile-banner-container { width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; }
.mobile-banner-image { width: 100%; max-width: 400px; height: auto; display: block; border-radius: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); }
.mobile-button-container { width: 100%; padding: 8px 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)); backdrop-filter: blur(10px); }
.ncs .display-4 { font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.3; }
.ncs .display-3 { font-size: clamp(1.5rem, 5vw, 3rem); line-height: 1.2; word-wrap: break-word; hyphens: auto; }
.text-responsive { color: #777; word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; }
.lead { font-size: clamp(1rem, 2.5vw, 1.25rem); }
h1, h2 { font-size: clamp(1.3rem, 3vw, 1.5rem); }
h3 { font-size: 20px; }
.tour-title { line-height: 30px; min-height: 86px; }
.mt-custom { margin-top: clamp(200px, 30vw, 440px); }
.ms-custom { margin-right: clamp(0px, 35vw, 512px); }
.floating-animation { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.pulse-animation { animation: pulse 2s infinite; }
.card-hover { transition: all 0.3s ease; border-radius: 15px !important; height: 100%; cursor: pointer; position: relative; }
.card-hover:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); border-width: 2px; }
.card-hover:hover .card-body { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)); }
.card-hover:active, .card-hover.clicked, .card-hover.touching { transform: translateY(-3px); transition: all 0.1s ease; }
.tour-link { cursor: pointer; transition: all 0.2s ease; padding: 8px 12px; border-radius: 8px; display: inline-block; }
.tour-link:hover { transform: translateX(3px); text-decoration: underline; }
.tour-link i { transition: transform 0.2s ease; }
.tour-link:hover i { transform: translateX(2px); }
.card-hover:hover::before { content: "👆 Click để xem chi tiết"; position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 15px; font-size: clamp(10px, 2vw, 12px); z-index: 10; animation: fadeInTooltip 0.3s ease; }
@keyframes fadeInTooltip { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.ncs .btn-primary-custom { background: linear-gradient(45deg, #FF6B35, #FF8E53); border: none; transition: all 0.3s ease; border-radius: 48px; color: white; padding: clamp(8px, 2vw, 16px) clamp(20px, 4vw, 32px); font-size: clamp(0.85rem, 2vw, 1rem); font-weight: 500; }
.ncs .btn-primary-custom i { margin-right: 8px; }
.ncs .btn-primary-custom:hover { background: linear-gradient(45deg, #E55A2B, #FF6B35); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3); color: white; }
.btn-hero { padding: clamp(12px, 3vw, 24px) clamp(30px, 5vw, 40px); font-size: clamp(1rem, 3vw, 1.6rem); font-weight: 600; border-radius: 60px; box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4); }
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 107, 53, 0.5); }
.zalo-float { position: fixed; bottom: clamp(15px, 3vw, 20px); right: clamp(15px, 3vw, 20px); z-index: 1000; animation: bounce 2s infinite; width: clamp(50px, 8vw, 60px); height: clamp(50px, 8vw, 60px); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
.qr-code { max-width: clamp(150px, 25vw, 200px); height: auto; width: 100%; transition: all 0.3s ease; border-radius: 16px; }
.zalo-qr-link { display: inline-block; transition: all 0.3s ease; position: relative; border-radius: 15px; overflow: hidden; }
.zalo-qr-link:hover { transform: translateY(-5px); text-decoration: none; }
.zalo-qr-link:hover .qr-code { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); }
.zalo-qr-link::before { content: "👆 Click để mở Zalo"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: clamp(4px, 1vw, 5px) clamp(10px, 2vw, 12px); border-radius: 20px; font-size: clamp(10px, 2vw, 12px); opacity: 0; transition: opacity 0.3s ease; z-index: 10; }
.zalo-qr-link:hover::before { opacity: 1; }
.zalo-highlight { color: #0068FF; transition: all 0.3s ease; }
.zalo-qr-link:hover + .zalo-qr-text .zalo-highlight { color: #FF6B35; font-weight: 700; }
.success-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: clamp(10px, 3vw, 20px); }
.success-modal.show { opacity: 1; visibility: visible; }
.success-content { background: white; padding: clamp(20px, 5vw, 40px); border-radius: 15px; text-align: center; max-width: min(500px, 90vw); margin: clamp(10px, 3vw, 20px) auto; animation: modalSlideIn 0.5s ease; max-height: 90vh; overflow-y: auto; }
@keyframes modalSlideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.navbar-custom { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(10px); transition: all 0.3s ease; }
.navbar-toggler { border: 2px solid #FF6B35 !important; border-radius: 12px !important; padding: 8px 12px !important; background: linear-gradient(45deg, #FF6B35, #FF8E53) !important; transition: all 0.3s ease; position: relative; overflow: hidden; }
.navbar-toggler:hover { background: linear-gradient(45deg, #E55A2B, #FF6B35) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.25) !important; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
.ncs .nav-link { font-weight: 500; padding: 10px 20px !important; margin: 0 5px; border-radius: 25px !important; transition: all 0.3s ease; position: relative; overflow: hidden; color: white !important; cursor: pointer;}
.ncs .nav-link.orange { background-color: #fb714f; }
.ncs .nav-link.blue { background-color: #004A70; }
.ncs .nav-link.green { background-color: #0DAA72; }
.nav-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2); }
.nav-link:active { transform: translateY(0); }
.nav-item.active .nav-link, .nav-link.active { background: linear-gradient(45deg, #fb714f, #004A70, #0DAA72) !important; color: white !important; }
.ncs footer { background-color: #F7F8FA; }
.ncs footer .logo-dmc { width: 120px; }
.ncs .copyright { color: #c4c4c4; font-size: 14px; }
.hero-content { position: relative; z-index: 10; }
.combo-card { border: 2px solid; border-radius: 15px; overflow: hidden; }
.combo-card-1 { border-color: #FED7D7; }
.combo-card-2 { border-color: #C6F6D5; }
.combo-card-3 { border-color: #BEE3F8; }
.combo-card-4 { border-color: #E9D5FF; }
.combo-header-1 { background: linear-gradient(135deg, #FF6B35, #4ECDC4); }
.combo-header-2 { background: linear-gradient(135deg, #20B2AA, #4169E1); }
.combo-header-3 { background: linear-gradient(135deg, #32CD32, #20B2AA); }
.combo-header-4 { background: linear-gradient(135deg, #9333EA, #C084FC); }
.section-padding { padding: clamp(30px, 8vw, 80px) 0; }
.text-orange-500 { color: #FF6B35; }
.text-teal-500 { color: #20B2AA; }
.text-green-500 { color: #32CD32; }
.text-purple-500 { color: #9333EA; }
.bg-orange-100 { background-color: #FED7D7; }
.bg-teal-100 { background-color: #E6FFFA; }
.bg-green-100 { background-color: #F0FFF4; }
.bg-purple-100 { background-color: #F3E8FF; }
.bg-yellow-100 { background-color: #FFFBEB; }
.bg-pink-100 { background-color: #FDF2F8; }
.promo-code-box { background: linear-gradient(135deg, #FF6B35, #FF8E53); color: white; padding: clamp(20px, 4vw, 30px); border-radius: 10px; margin: 20px 0; }
.promo-code-box .h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.step-number { background: #FF6B35; color: white; width: clamp(35px, 6vw, 40px); height: clamp(35px, 6vw, 40px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: clamp(0.85rem, 2vw, 1rem); margin-right: clamp(10px, 2vw, 15px); flex-shrink: 0; }
.gift-item { padding: clamp(12px, 2vw, 15px); border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: clamp(0.85rem, 2vw, 1rem); }
.form-control:focus { border-color: #FF6B35; box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25); }
.form-group label { font-size: clamp(0.85rem, 2vw, 1rem); }
.form-control { font-size: clamp(0.85rem, 2vw, 1rem); }
.logo { max-width: 100%; height: auto; }
.image-gallery-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.ncs .image-gallery-image { height: 260px; overflow: hidden; }
.combo-card .card-body { display: flex; flex-direction: column; justify-content: space-between; }
.combo-card a { margin-top: auto; display: inline-block; }
.ncs .img-responsive { max-width: 100%; height: auto; }
a, button, .card { transition: all 0.3s ease; }
.section-spacing { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.card-body { padding: 16px; }
.mb-3 { margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; }
.py-3 { padding-top: clamp(1rem, 2vw, 1.5rem) !important; padding-bottom: clamp(1rem, 2vw, 1.5rem) !important; }
.px-5 { padding-left: clamp(1.5rem, 3vw, 3rem) !important; padding-right: clamp(1.5rem, 3vw, 3rem) !important; }
#minigame .qr-code{max-width: 200px; border-radius: 8px;}
.ncs .color-error { color: #dc3545; }
.ncs .border-error { border-color: #dc3545; }
.ncs .text-error { color: #dc3545; font-size: 13px;}
.ncs .react-tel-input .form-control{width: 100%; height: 42px;  border-color: #ced4da; font-family: Montserrat, sans-serif; font-size: 16px;}
.ncs .react-tel-input .form-control.border-error{border-color: #dc3545;}
.ncs .react-tel-input .flag-dropdown,
.ncs .react-tel-input .flag-dropdown.open,
.ncs .react-tel-input .flag-dropdown:focus {border-top-left-radius: 25px; border-bottom-left-radius: 25px; background-color: transparent; border: none; padding-left: 10px; height: 35px; top: 4px}
.ncs .react-tel-input .selected-flag {border-top-left-radius: 25px; border-bottom-left-radius: 25px; border-color: #e5e5e5 !important}
.ncs .react-tel-input .selected-flag:hover {border: none;background: none;}
.ncs .section-care{background-color: #f8f9fa;}
.ncs .section-care .text-responsive{color: #555;}
.ncs .btn-zalo-oa{background: #0773FF; box-shadow: 0 8px 24px rgba(7, 115, 255, 0.4)!important; outline:none!important}
.ncs .btn-zalo-oa:hover{background: #005cd1!important;}
.ncs .google-form-container{width: 100%;}
.ncs .btn-survey{padding:24px 24px}
.ncs .section-survey{
    position: relative;
    background-image: url('https://ik.imagekit.io/brz4w2pfk/survey/survey-banner.png?updatedAt=1752721782857');
    background-size: 75% auto; background-repeat: no-repeat;background-position: center center;
    padding-top: 16px; padding-bottom: 16px; margin-bottom: 40px;
}
.ncs .section-survey .wrap{background-color: rgba(255,255,255,0.75); border-radius: 16px; padding: 250px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);}


/*.section-wheel{background: linear-gradient(135deg, #6C00FF, #FF46A5);*/
.section-wheel{background: linear-gradient(135deg, #FF6B35 0%, #4ECDC4 100%);
    display: flex;
        align-items: center;
        /* Căn giữa theo chiều dọc */
        justify-content: center;
        /* Căn giữa theo chiều ngang */
        color: white;
        position: relative; padding: 36px 0px
}
.box-wheel {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 24px;
        padding: 32px 128px 32px 128px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        /* hoặc auto/80% nếu muốn responsive */
        text-align: center;     
}
.wheel-title{font-size: 36px; font-weight: 700; color: #fff;}
@keyframes bounce_result {
    0%, 100% {
      transform: translateY(0);
    }
    30% {
      transform: translateY(-10px);
    }
    50% {
      transform: translateY(0px);
    }
    70% {
      transform: translateY(-5px);
    }
    90% {
      transform: translateY(0);
    }
}
  .result {
      background: linear-gradient(to right, #f59877, #FF6B35); border:none; color: white; padding: 16px 24px; border-radius: 8px; font-size: 18px;
      font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); outline: none!important;   animation: bounce_result 1.5s ease infinite;
    }
    .btn-offer-now{
       color:#fff; background: linear-gradient(to right, #0ec585, #0DAA72); border: none;font-size: 20px;
        font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); outline: none !important; padding: 16px 24px; border-radius: 30px;
    }
    .btn-spin-start{
        color:#fff; background: linear-gradient(to right, #0f71a3, #004A70); border: none;font-size: 22px;
         font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); outline: none !important; padding: 20px 36px; border-radius: 40px;
    }
    .wheel-code{font-size: 20px; font-weight: 600; }
    .ncs .modal-register{max-width: 640px;}
    .ncs .form-control-lg{height: 42px; font-size: 14px;}
    .ncs .btn-regis-now-mb{font-size: 24px; padding:16px}
    .ncs-swal-html-container{border-radius: 16px;}
    .btn-cancel-now{
        color:#fff; background: linear-gradient(to right, #6d757c, #6c757d); border: none;font-size: 20px;
         font-weight: bold; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); outline: none !important; padding: 16px 24px; border-radius: 30px;
     }
/* Mobile phones - 0-575px */
@media (max-width: 575.98px) {
    .mobile-hero-section{padding-top: 64px;}
    .ncs .menu .nav-item{margin-top: 8px; text-align: center;}
    .mobile-banner-image { max-width: 100%; box-shadow: none; }
    .ncs .combo-header{margin-bottom: 16px!important;}
    .ncs .btn-primary-custom { width: 100%; margin-bottom: 10px; font-size: 18px; box-shadow: 0 8px 8px rgba(255, 107, 53, 0.4) !important; }
    .btn-hero { width: 90%; }
    .tour-title { height: auto; min-height: auto; margin-bottom: 16px!important; }
    .combo-card .card-body { justify-content: flex-start; }
    .tour-link { padding: 6px 10px; }
    #minigame .qr-code{max-width: 100%; border-radius: 8px;}
    #minigame .display-4{margin-bottom: 24px!important;}
    .ncs .image-gallery-image{height: calc(100vw / 1.5);}
    .ncs .register-header{margin-bottom: 24px!important;}
    .ncs .connect-zalo-header{margin-bottom: 24px!important;}
    .ncs .modal-register{width: auto!important;}
    .wheel-title{font-size: 24px; padding: 24px 0px 16px 0px;}
    .wheel-title-sapo{font-size: 14px;}
    .hc-luckywheel-wraper{margin-bottom: 36px; }
    .box-wheel{padding:8px; width: calc(100vw - 32px);}
    .wheel-code{font-size: 16px;}
    .swal2-title{font-size: 20px;}
    .swal2-html-container .result{ font-size: 13px; width: 100%; padding: 16px 0px;}
    .ncs .qr-code{max-width: 60%;}
    .ncs .hc-luckywheel-item-text{font-size: 10px; max-width: 80px;}
    .ncs .btn-zalo-oa{box-shadow: 0 8px 8px rgba(7, 115, 255, 0.4) !important;}
    .ncs .btn-survey{font-size: 12px; text-align: center; padding:20px 8px}
    .ncs .section-survey{background-image: url('https://ik.imagekit.io/brz4w2pfk/survey/survey_mobile.jp2?updatedAt=1752654650006');
        background-size: 165% auto; background-position: center center; }
    .ncs .section-survey::before{content: ""; position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.4);}
    .ncs .section-survey .wrap{background-color:transparent; padding: calc(113vw / 1.5) 15px; z-index: 2; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);}
}

@media (max-width: 375px) {
    .ncs .hc-luckywheel-btn{font-size: 12px;}
}

/* Extra small devices (portrait phones, less than 320px)*/
@media (max-width: 320px) {
    .ncs .hc-luckywheel-wraper {margin-bottom: 36px;}
    .ncs .hc-luckywheel-item-text{font-size: 9px; max-width: 70px;}
    .ncs .display-4 {font-size: 22px;}
    .ncs .tour-title{font-size: 16px; line-height: 24px;}
    .ncs .wheel-title{font-size: 20px;}
    .ncs .wheel-title-sapo{font-size: 12px;}
    .swal2-html-container .result{font-size: 10px;}
    .ncs .btn-primary-custom {font-size: 16px; }
    .ncs .hc-luckywheel-btn{font-size: 12px;}
    .ncs .btn-survey{font-size: 12px; text-align: center; padding:20px 8px}
}

/* Tablets portrait - 576-767px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .mobile-banner-image { max-width: 100%; }
    .mobile-button-container { padding: 15px 10px; }
    .swal2-title{font-size: 20px;}
    .swal2-html-container .result{ font-size: 12px; width: 100%; padding: 16px 0px;}
    .ncs .hc-luckywheel-item-text{font-size: 12px; max-width: 80px;}
    .box-wheel{padding:8px; width: calc(100vw - 32px);}
    .wheel-title{font-size: 28px; padding: 24px 0px 16px 0px;}
}

/* Tablets landscape - 768-991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav { text-align: center; padding-top: 15px; }
    .navbar-nav .nav-link { padding: 10px 0; border-bottom: 1px solid #eee; }
    .hero-section{height: calc(100vw / 1.5); min-height: auto;}
    .hero-content{position: absolute; bottom:24px; left:auto}
    .footer-top .col-md-3 { margin-bottom: 2rem; }
    .hc-luckywheel-item-text{font-size: 16px;}
}

/* Small desktops - 992-1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-section{height: auto; min-height: 550px;}
    .combo-grid .col-lg-4 { flex: 0 0 50%; max-width: 50%; margin-bottom: 2rem; }
    .ncs .image-gallery-image{height: calc(100vw / 2.8);}
    .hc-luckywheel-item-text{font-size: 16px;}
}

/* Large desktops - 1200px+ */
@media (min-width: 1200px) {
    .ncs .container { max-width: 100%; }
    .hero-section{height: auto; min-height: 700px;}
    .combo-grid .col-lg-4:nth-child(4) { flex: 0 0 25%; max-width: 25%; }
    .combo-grid .col-lg-4:nth-child(1), .combo-grid .col-lg-4:nth-child(2), .combo-grid .col-lg-4:nth-child(3) { flex: 0 0 25%; max-width: 25%; }
    .logo { max-width: 120px; }
}

/* Extra large desktops - 1400px+ */
@media (min-width: 1400px) {
    .ncs .container { max-width: 1354px; }
    .hero-section{height: 100vh; min-height: 900px;}
    .hero-section-survey{margin-top: 60px; min-height: 800px;}
}

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .floating-animation, .pulse-animation { animation: none; }
    .card-hover:hover { transform: none; }
    .btn-hero:hover, .btn-primary-custom:hover { transform: none; }
}

/* Accessibility - High contrast */
@media (prefers-contrast: high) {
    .text-responsive { color: #000; }
    .card-hover { border: 2px solid #000; }
}

/* Print styles */
@media print {
    .zalo-float, .navbar, .success-modal { display: none !important; }
    .hero-section { height: auto; min-height: auto; background: none; }
    body { font-size: 12pt; color: #000; }
    .section-padding { padding: 1rem 0; }
}