.result-list .result-image { width: 289px !important; height: 216px !important; }

#bodychild { }

.wrapper.header-container.active .main-header { background: #ffffff00 !important; box-shadow: none; }

.wrapper.header-container.active #menu-home .menu-home-inner { background: rgb(242 247 255 / 74%); backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); border-radius: 25px; gap: 5px; -webkit-backdrop-filter: blur(12px) saturate(160%); }

.wrapper.header-container.active #menu-home #navbarNavDropdown > .navbar-nav { background: transparent; backdrop-filter: none; box-shadow: none; border: none; border-radius: 25px; gap: 5px; -webkit-backdrop-filter: none; padding: 10px 10px 10px !important; }

.wrapper.header-container.active #menu-home #navbarNavDropdown .nav-item .nav-link { color: #063e6e; text-shadow: 0 1px 4px rgba(248, 248, 248, 0.68); }

.wrapper.header-container.active #menu-home #navbarNavDropdown .nav-item.active .nav-link { background: rgb(239, 122, 35) ; color: white !important; }

#myNavbar ul li ul { background: rgba(3, 78, 162, 0.9) !important; border-radius: 0; min-width: 100% !important; }

    #myNavbar ul li ul li a { color: #fff; }

#scrollUp:hover { opacity: 1; }

.navbar-nav { /*background: rgb(58 58 58 / 18%); backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 4px 24px rgba(0, 60, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.35);*/ border-radius: 25px; gap: 5px; -webkit-backdrop-filter: blur(12px) saturate(160%); padding: 10px 10px 10px !important; }

#menu-home ul li a { padding: 5px 10px 5px !important; }
#menu-home ul.dropdown-menu { padding: 0; margin: 0; background: rgba(0, 30, 80, 0.82); left: 50%; transform: translateX(-50%); }
#menu-home ul.dropdown-menu li a:hover { background-color: rgb(241, 118, 31); }

.nav-item { position: relative; }

.nav-link { display: flex; align-items: center; gap: 4px; border-radius: 30px; color: #fff; text-decoration: none; /*font-size: 13px;*/ font-weight: 500; white-space: nowrap; letter-spacing: 0.2px; text-shadow: 0 1px 1px rgb(0 0 0 / 68%); transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease; cursor: pointer; user-select: none; }

.navbar-nav > .nav-item.active > .nav-link { background: rgb(241, 118, 31); color: #fff !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgb(190 54 54 / 12%); font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.navbar-nav > .nav-item > .nav-link:hover { background: rgb(241, 118, 31); color: #fff !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgb(190 54 54 / 12%); font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

.nav-item.dropdown.open { display: block; animation: dropIn 0.2s ease forwards; }

.nav-item.dropdown:hover .dropdown-menu { display: block; min-width: 180px !important; top: 100%; left: 50%; /*margin-top: var(--bs-dropdown-spacer);*/ background: rgba(0, 30, 80, 0.82); overflow: hidden; /* position: absolute; */ transform: translateX(-50%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); padding: 0; }


#menu-home { /*padding: 0 !important;*/ }

    #menu-home a.logo { position: relative; z-index: 10; left: 10px; }

    #menu-home #m-menubar { /*padding-left: 9rem;*/ width: 100%; /*height: 60px; */ padding-top: 14px; font-size: 14px; }

.new_hcm_menu { position: absolute; z-index: 9; width: 100%; }

    .new_hcm_menu .container { position: relative; }

    .new_hcm_menu::before { z-index: 0; content: ' '; display: block; background: #fff; position: absolute; top: 0; right: 65%; bottom: 0; left: 0; }

    .new_hcm_menu ul { max-width: 750px; height: 42px; margin: auto; background: url(/images/menu_banner.png) no-repeat center center/cover; padding: 0; }

        .new_hcm_menu ul li { text-align: center; width: 24%; display: inline-block; vertical-align: middle; position: relative; cursor: pointer; padding: 8px 8px; white-space: nowrap; }

            .new_hcm_menu ul li a { color: #fff; font-weight: normal; font-family: K2D, sans-serif; transition: all ease-in-out 0.3s; }

    .new_hcm_menu li.hm_sub1 a { margin-left: 20px; }

    .new_hcm_menu li.hm_sub2 a { margin-left: 15px; }

    .new_hcm_menu .hm_sub1:hover a,
    .new_hcm_menu .hm_sub2:hover a,
    .new_hcm_menu .hm_sub3:hover a { border-radius: 10px; background: #fff; color: #6160ca; padding: 2px 5px; font-size: 12px; }


/*.new_hcm_menu .hm_sub2:hover a { border-radius: 10px; background: #fff; color: #DF3E43; padding: 2px 5px; }

    .new_hcm_menu .hm_sub3:hover a { border-radius: 10px; background: #fff; color: #BB3B73; padding: 2px 5px; }*/




.rm-div-htc { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 14px !important; font-family: 'Quicksand', sans-serif !important; vertical-align: baseline; z-index: 100; }

.rm-ul-htc { margin: 0 auto !important; }

.search-btn-back-color { background-color: buttonface !important; }

.login-btn-htc { top: 4px; text-transform: uppercase; position: relative; text-align: right; }

.f-size-htc { font-size: 11px !important; }

.none-boder { border: none !important; }

.padding-none { padding: 0px !important; }

.border-rad-3 { border-radius: 3px !important; }

.border-rad-2 { border-radius: 2px !important; }

.pd-btm-0 { padding-bottom: 0px !important; }

.breadcrumb-htc { float: left; position: absolute; z-index: 999; margin-left: auto; width: 100%; background-color: #eae8e8; color: black; top: 7%; }

.breadcrumb-htc-ol { float: left !important; margin-bottom: 0px !important; font-size: 16px !important; }

    .breadcrumb-htc-ol li { font-weight: normal !important; }

.active-htc { font-weight: bold !important; }

.btnCustom-htc { margin-top: 11px; text-align: center; color: #ffffff; font-size: 1.5em; font-weight: normal; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }

    .btnCustom-htc:hover,
    .btnCustom-htc:focus,
    .btnCustom-htc.focus { text-decoration: none; }

    .btnCustom-htc:active,
    .btnCustom-htc.active { background-image: none; }

.mg-top { margin-top: 88px !important; }

.mg-top-15 { margin-top: 15px !important; }

.mg-top-50 { margin-top: 50px !important; }

.bg-white-mb10 { background-color: #ffffff; margin-bottom: 10px !important; }

.language-menu button:hover { background-color: #ffffff !important; color: #D10123 !important; }

ol { margin: 0px; padding: 0px; }

#login-system { display: inline-flex; align-items: center; flex-shrink: 0; padding: 8px 16px; border-radius: 100px; background-color: var(--main-color); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; letter-spacing: 0.2px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; border: 1.5px solid rgba(255, 255, 255, 0.25); }

    #login-system:hover { background: rgb(0 98 183); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); transform: translateY(-1px); }
.header-container.scrolled #menu-home button.navbar-toggler { color: #1b5bbe !important;; }


/* ============================
   DRAWER OVERLAY
============================ */

.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 300; opacity: 0; transition: opacity 0.32s ease; }

    .drawer-overlay.active { display: block; opacity: 1; }

/* ============================
   DRAWER SIDEBAR
============================ */

.drawer { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; z-index: 400; background: rgba(0, 20, 60, 0.96); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 4px 0 32px rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overflow-x: hidden; }

    .drawer.open { transform: translateX(0); }

/* Drawer header */
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; }

.drawer-logo { display: flex; align-items: center; gap: 10px; }

    .drawer-logo .logo-circle { width: 44px; height: 44px; flex-shrink: 0; }

    .drawer-logo .logo-petals { width: 18px; height: 18px; }

    .drawer-logo .logo-text { font-size: 6px; }

.drawer-site-name { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }

.drawer-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; color: #fff; font-size: 16px; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.18s ease; flex-shrink: 0; }

    .drawer-close:hover { background: rgba(255, 255, 255, 0.2); }

/* Drawer nav list */
.drawer-nav { flex: 1; padding: 10px 0; overflow-y: auto; }

.drawer-list { list-style: none; margin: 0; padding: 0; }

.drawer-item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

.drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; color: rgba(255, 255, 255, 0.88); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease; cursor: pointer; }

    .drawer-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; padding-left: 26px; }

.drawer-item.active > .drawer-link { background: rgba(255, 255, 255, 0.12); color: #fff; font-weight: 600; border-left: 3px solid #2e9e4f; padding-left: 17px; }

.drawer-arrow { font-size: 9px; opacity: 0.7; transition: transform 0.22s ease; flex-shrink: 0; }

.drawer-item.dropdown-open > .drawer-link .drawer-arrow { transform: rotate(180deg); }

/* Drawer sub-dropdown */
.drawer-dropdown { display: none; list-style: none; background: rgba(0, 0, 0, 0.2); border-top: 1px solid rgba(255, 255, 255, 0.06); }

    .drawer-dropdown.open { display: block; }

    .drawer-dropdown li a { display: block; padding: 10px 20px 10px 34px; color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease; }

        .drawer-dropdown li a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; padding-left: 40px; }

/* Drawer footer */
.drawer-footer { padding: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; }

.wave-shape { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 20; line-height: 0; pointer-events: none; }

    .wave-shape svg { display: block; width: 100%; height: 80px; }

.hero-banner { position: relative; width: 100%; min-height: 30vh; min-height: max(30vh, 370px); overflow: hidden; }

.hero-bg { position: absolute; inset: -8%; background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; transform: scale(1.15); }

@keyframes kenBurnsOut {
    0% { transform: scale(1.15); }

    100% { transform: scale(1.00); }
}

.hero-bg.zoom-play { animation: kenBurnsOut 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }

/* Cross-fade: outgoing image */
.hero-bg.fade-out { opacity: 0; transition: opacity 0.65s ease; }

/* Dark overlay */
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.31) 55%, rgba(0, 0, 0, 0) 100%); z-index: 5; pointer-events: none; }

.hero-content { position: absolute; inset: 115px 0 90px 0; z-index: 10; display: flex; align-items: end; justify-content: center; }

.text-container { width: 100%; margin-right: auto; margin-left: auto; align-items: center; }

/* ---- label ---- */
.hero-label { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 5px; color: rgba(186, 230, 253, 0.9); margin-bottom: 18px; opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease 0.05s, transform 0.65s ease 0.05s; }

/* ---- headline ---- */
.hero-headline { font-family: 'Birthstone Bounce', cursive; font-size: 60px; font-weight: 600; margin-bottom: 20px; background: #fff; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 18px rgba(56, 189, 248, 0.30)); opacity: 0; transform: translateY(26px); transition: opacity 0.75s ease 0.15s, transform 0.75s ease 0.15s; padding: 0 0 24px 3px; letter-spacing: 14px; }

/* ---- subtitle ---- */
.hero-subtitle { font-size: 17px; font-weight: 300; color: rgba(224, 242, 254, 0.88); line-height: 1.7; margin-bottom: 36px; letter-spacing: 0.2px; max-width: 500px; opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease 0.28s, transform 0.65s ease 0.28s; }

.hero-content.is-leaving .hero-label,
.hero-content.is-leaving .hero-headline,
.hero-content.is-leaving .hero-subtitle,
.hero-content.is-leaving .hero-btn { opacity: 0; transform: translateY(-14px); transition: opacity 0.3s ease, transform 0.3s ease; }

.hero-content.is-visible .hero-label,
.hero-content.is-visible .hero-headline,
.hero-content.is-visible .hero-subtitle,
.hero-content.is-visible .hero-btn { opacity: 1; transform: translateY(0); }

/* ---- button ---- */
.hero-btn { display: inline-block; padding: 13px 42px; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; text-decoration: none; color: #fff; background: linear-gradient(135deg, rgb(72, 147, 218), rgb(0, 98, 183));; border: 1px solid rgba(125, 211, 252, 0.48); border-radius: 50px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease 0.42s, transform 0.65s ease 0.42s, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }

    .hero-btn:hover { background: linear-gradient(135deg, rgba(56, 189, 248, 0.42), rgba(14, 165, 233, 0.52)); border-color: rgba(125, 211, 252, 0.80); box-shadow: 0 8px 32px rgba(56, 189, 248, 0.28); }


/* ---Responsive---  */

@media (max-width: 1180px) {
    .nav-link { font-size: 12px; padding: 5px 8px; }

    #menu-home a.logo img { height: 70px; }

    .hero-content { padding: 0 32px; padding-top: 64px; }

    .hero-headline { font-size: 52px; }

    .hero-subtitle { font-size: 15px; }
}

@media (max-width: 990px) {
    #myNavbar ul li a { font-size: 13px; padding: 5px !important; }

    #menu-home .menu-home-inner { display: flex; flex-wrap: wrap; align-items: center; }

    #menu-home a.logo { position: relative; z-index: 10; left: 0; }

        #menu-home a.logo img { height: 50px; }

    #menu-home button.navbar-toggler { order: 1; }

    .header-container.active .main-header .header-nav .navbar { padding: 0 !important; }

    .header-container .header-nav { padding-top: 1rem; padding-bottom: 1rem; }

    .header-container.active .main-header #menu-home a.logo .main-logo { height: 50px !important; }

    #menu-home button.navbar-toggler { color: #fff !important; font-size: 28px; float: left; padding: 0; border: none !important; box-shadow: none; }

    #menu-home #m-menubar { padding-left: 0px !important; }


    .header-container.active .main-header #menu-home { height: auto; padding: 10px 0 !important; }

        .header-container.active .main-header #menu-home .navbar { height: auto; }

    .new_hcm_menu::before { right: 77%; }

    .new_hcm_menu ul { /*width: 81rem !important;*/ /*height: 27px;*/ margin-left: 0px; background: url(/Images/submenu-top-qnm_mobi.png) no-repeat center center; padding: 3px; background-size: cover; }

        .new_hcm_menu ul li { text-align: center; width: 24%; display: inline-block; vertical-align: middle; position: relative; cursor: pointer; padding: 0px 5px; line-height: 10px; white-space: nowrap; }

            .new_hcm_menu ul li a { font-size: 14px; }

    .new_hcm_menu { position: absolute; z-index: 105; width: 100%; }

        .new_hcm_menu li.hm_sub1 a { margin-left: auto; }

        .new_hcm_menu li.hm_sub2 a { margin-left: auto; }

    .hero-content { padding: 0 32px; padding-top: 64px; }

    .hero-headline { font-size: 60px; }
    .hero-headline.custome-size { letter-spacing: 7px; }
    /* .hero-headline.custome-size2 { font-size: 55px; letter-spacing: 7px} */

    .hero-subtitle { font-size: 15px; }
}


@media (max-width: 767px) {
    #menu-home .menu-home-inner a.logo img { height: 62px; }
    .hero-content { padding: 0 10px;}
    .hero-headline { font-size: 45px; }
}

@media (max-width: 576px) {

    /*.container, .container-sm { max-width: 100% !important; }*/
    .new_hcm_menu ul { display: none; }
    

    #menu-home .menu-home-inner { width: 80% !important; margin: auto; }

    .header-container .main-header { background: transparent !important; box-shadow: none !important; }

    .hero-content { padding: 0 20px; padding-top: 64px; }

    .hero-headline {    font-size: 50px; }
     .hero-headline.custome-size { font-size: 40px; letter-spacing: 2px }
    .hero-label { font-size: 10px; letter-spacing: 3.5px; }

    .hero-subtitle { font-size: 14px; margin-bottom: 28px; max-width: 100%; }

    .hero-btn { padding: 11px 30px; font-size: 12px; margin-bottom: 50px; }

    .wave-shape svg { height: 50px; }
}

@media (max-width: 480px) {
    .hero-headline {   font-size: 55px; }
    .hero-headline.custome-size {  letter-spacing: 2px }
    .hero-headline.custome-size2 { font-size: 40px; letter-spacing: 7px}
}