.primary-form {}
.primary-form .form-control {background:none; border-bottom:1px solid #444; padding-left:0; padding-right:0}
.primary-form label {padding-left:0;}
.primary-form .form-control:focus ~ label, .primary-form .form-floating>.form-control:not(:placeholder-shown)~label {left:-3px}
.primary-form textarea.form-control {height: auto;}
.primary-form .form-control:focus {border-color:var(--main-color); border-width:2px}
.primary-form .cta-btn a:hover .cta-ico:before {transform: scale(6);}
.primary-form .form-check {padding-left: 1.75em;cursor: pointer;}
.primary-form .form-check-label {cursor: pointer;}
.primary-form .form-check .form-check-input {margin-top: 3px;margin-left: -1.75em;width: 1.2em;height: 1.2em;border-radius: 2px;}
.form-check-input:focus, .form-control:focus, .form-select:focus {box-shadow:none}
.form-check-input:checked {background-color:var(--main-color); border-color: var(--main-color)}


.search-input {background-color: #fff;border-radius: 3px;height: 35px; width: 70%; border-radius: 100px}
.search-input input, .search-input input:focus, .search-input .input-group-text, .select-input .input-group-text {background: none; font-size: 14px;}
.select-input {position:relative}
.select-input {border: 1px solid #ced4da; border-radius: 3px;}
.select-input select {border: none;height: 46px;background-color: transparent;font-size: 14px;cursor: pointer;}
.select-input .input-group-text + select {margin-left: -44px !important; padding-left: 40px;}
.select-input i, .search-input i {font-size:20px}


.floating-label {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 999;
    box-shadow: rgba(16, 25, 40, 0.05) 0px 5px 13px -5px;
}
.floating-label .form-floating .form-select {font-size:14px;background-position: right .75rem top .75rem;}
.floating-label .form-floating label {font-size:13px}
.floating-label .btn-circle, .sec-search .btn-circle.btn-toggle {width: 30%; border-radius: 100px; font-size: 1rem; background:var(--main-color);padding:0;color:#fff; padding-bottom: 3px; display: flex;justify-content: center;align-items: center;margin-left: auto;}
.floating-label .form-control {height:35px}

option:hover,
option:focus,
option:active,
option:checked {background-color: var(--main-color) !important; color: #fff;}

.datepicker {position: relative;}
.datepicker i {pointer-events: none;} 
.datepicker img {position:absolute; width:20px; right:8px; top:8px}
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

.form-switch {display:flex;justify-content: space-between;padding: 0;margin-bottom: 1rem;align-items: center;}
.form-switch label {flex:1}
.form-switch .form-check-input {width: 2.8em;height: 1.6em;}

.sec-fiter-search.floating-label .search-input input {padding-left: 0;}

.sec-fiter-search .col-lg-4{ display:flex; border:1.5px solid var(--main-color); border-radius:100px; padding:0 }

.sec-fiter-search .hero-search-wrap { padding:8px 0px; align-items: center; }
.sec-fiter-search .d-lg-flex{ justify-content: space-evenly; }

.form-control {border-radius:.25rem;height: auto;}

.search-input .dropdown-menu {left:0 !important; right: 0 !important;padding: 12px;box-shadow: 0 2px 8px rgb(0 0 0 / 22%);transform: none !important;top: 100% !important;border: none;}
.search-input .dropdown-menu li, .search-input .dropdown-menu a {display: block;}
.search-input .dropdown-menu a {display: block; color:#444; padding: 12px 12px 14px;font-size: 14px;-webkit-text-stroke-width: 0.12px;margin: 0 -12px;}
.search-input .dropdown-menu a:hover {background-color: #0a5597; color: #fff;}

.search-input .dropdown-menu input {border: 1px solid #8b8b8b;margin-bottom: 8px;padding-left: 12px !important;height: 44px;}
.search-input .dropdown-menu input:focus {border-color:var(--main-color)}

.select2 {/* padding-top: 1.625rem; */}
.select2 .select2-selection {border: none !important;background: none !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {padding-left: 12px !important; color: #212529!important; line-height: 1.35rem !important;font-size: 14px !important;padding-top: 1.625rem;}
.select2-results__option {display:block}
.select2-container--default .select2-results__option::first-child {background-color: #ddd !important;}
.select2-container .select2-selection--single {margin-bottom:30px}
.select2-container.select2-container--default.select2-container--open {z-index: 10000;}
.select2-container--open .select2-dropdown--below {box-shadow: 0 2px 8px rgb(0 0 0 / 22%); border-radius: 5px !important; font-size:14px;border-top: 1px solid #aaa !important;}

.select2-container--default .select2-selection--single .select2-selection__arrow b {font-family: 'icomoon' !important; font-style: normal; border: none !important; font-size: 22px;color: #555;top: 8px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b::before {content: "\e903";}
.select2-search--dropdown .select2-search__field {outline-offset: unset; box-shadow: none; outline-width: 0;}

.form-floating .select2-container.select2-container--default.select2-container--open {margin-top: 0px;}

.select-input .select2-container.select2-container--default {flex:1; width:auto !important; margin-left: -44px !important;}

.select-input .select2-container .select2-selection--single {margin-bottom:0}
.select-input .select2-container--default .select2-selection--single .select2-selection__arrow {right:16px; top:6px}
.select-input .select2-container .select2-selection--single {height:46px;padding-left: 44px;}
.select-input .select2-container--default .select2-selection--single .select2-selection__rendered {padding-top:0 !important; line-height: 46px !important;padding-left: 0 !important;}

.form-more {height:100%; display:flex; flex-wrap: wrap; align-items:center;justify-content: center;}
.form-more .dropdown-menu .form-select {font-size: 14px;}
.form-more .dropdown-menu {min-width: 24rem; padding: 12px;box-shadow: 0 0 4px rgba(0,0,0,.1);border: none;}
.form-more .form-more-btn {cursor:pointer; font-size:14px; display:flex; align-items:center;padding: 5px;border-radius: .25rem; border:1px solid rgb(10 85 151 / 0%);flex: 0 0 auto;width: 100%;justify-content: center;}

.form-more .form-more-btn span {margin-bottom:4px;user-select: none!important; position: relative;}
.form-more .form-more-btn span::before {content:'xem thêm';}



.form-more .form-more-btn i {font-size:20px; margin-left:6px}
.form-more .select2.select2-container {padding-top: 0 !important; width: 100%; display: block !important; height: 100% !important; border: 1px solid #ced4da; border-radius: 0.25rem;}
.form-more .select2-container--default .select2-selection--single .select2-selection__arrow {right:16px !important; top:0 !important}
.form-more .select2-container--default .select2-selection--single {height: 100% !important;margin-bottom: 0 !important; display: flex !important; align-items: center;}
.form-more .select2-container .select2-selection--single .select2-selection__rendered {padding-top: 0!important;}

.form-more .dropdown-menu .datepicker {border: 1px solid #ced4da; border-radius: 0.25rem; height: 100%;}
.form-more .dropdown-menu .datepicker input {padding-top: 5px; font-size: 14px; height: auto; }
.form-more .dropdown-menu .datepicker img {top:5px}
.form-more .dropdown-menu .btn {background:var(--sub-color); border-color:var(--sub-color); margin-top:12px; padding:4px 12px 6px}

.hero-search {pointer-events: all;}
.hero-search-wrap {display: flex;flex-wrap: nowrap;justify-content: end; width:100%;border-radius:40px;background: #fff;padding:10px; justify-content: space-between; align-items: center;}
.hero-search-wrap select {height:100%;border:none;border-radius:40px 0 0 40px;max-width: 88%;margin: auto;font-size: 14px;}
.hero-search-wrap button {background-color: var(--main-color);border-radius: 40px !important;color: var(--sub-color);position: relative;
    -webkit-line-clamp: 1;
    width: 135px;
    padding: 9px;
}
.hero-search-wrap button:hover {color:#fff}
.hero-search-wrap button i {font-size:20px;vertical-align:-2px;padding-right:4px;}
.hero-search-wrap .input-group {height:48px}
.hero-search-wrap .input-group span {display: flex;align-items: center;flex:1;color: #666;}
.hero-search-wrap .input-group span i {font-size:20px}
.hero-search-wrap .input-group span input {padding-left:6px}
.hero-search-wrap .form-group { padding:0px 20px; border-right:1px solid #ddd; }
.border-none{ border-right:none !important }
.hero-search-wrap label{ color:var(--main-color); text-align:left; width:100%; font-weight:bold; }
.hero-search-wrap input{ padding:0 }
.hero-search-wrap input::placeholder {
    color: #999; /* Màu placeholder */
}
.margin-padding-none{ padding:0; margin:0 }

.hero-search ul {justify-content: center;margin-bottom: 16px;}
.hero-search ul li button {border: none;padding: 5px 20px 7px;background-color: rgba(0,0,0,.36);border: 1px solid rgba(255,255,255,.72);color: rgba(255,255,255,.72);text-transform: uppercase;border-radius: .25rem;margin: 0 6px 20px;font-weight: bold;}
.hero-search ul li button:hover {background-color:var(--main-color); border-color:var(--main-color); color:#fff}
.hero-search ul li button.active {background-color: var(--sub-color);border-color:  var(--sub-color);position: relative;color: #fff;}
.hero-search ul li button.active::after {
    width: 0;
    border-style: solid;
    border-width: 8px 6px 0px 6px !important;
    border-color: var(--sub-color) transparent transparent transparent;
    content:''; position: absolute; bottom: -8px; margin: auto; left: 0; right: 0;}

.hero-search .btn-expand {color:rgba(255 255 255 / 70%);font-size:15px;position:relative;display: flex;align-items: center;-webkit-text-stroke-width: 0.4px;letter-spacing: .4px;width: 128px;margin-left: auto;margin-top: 8px;}
.hero-search .btn-expand::before {content:''; position:absolute; width:32px; height:1px; background:rgba(255 255 255 / 80%); top:0; bottom:0; margin:auto; left:-32px}
.hero-search .btn-expand i, .sec-tcg .tcg-submit .btn i {display:flex;width: 28px;height: 28px;border: 1.6px solid;border-radius: 50%;justify-content: center;align-items: center;margin-left: 12px;font-size: 24px;flex: 0 0 auto;}
.hero-search .btn-expand i::before, .sec-tcg .tcg-submit .btn i::before {content: '+';font-style: normal;line-height: 1;margin-top: -9px;-webkit-text-stroke-width: 0;}
.hero-search .btn-expand:hover {color:rgba(255 255 255 / 100%)}
.hero-search .btn-expand span {flex:0 0 68px}
.hero-search .btn-expand span::before, .sec-tcg .tcg-submit .btn.collapsed span::before {content:'Mở rộng'}
.hero-search .btn-expand.active span::before, .sec-tcg .tcg-submit .btn span::before {content:'Thu gọn'}
.hero-search .btn-expand.active span + i::before, .sec-tcg .tcg-submit .btn i::before, .offcanvas.show ~ .hero-content .hero-search .btn-expand span + i::before {content:'-'}

.sec-hero .hero-slider .container{ position:relative; }
.hero-search .btn-button{ font-size:1.3rem; padding:15px 40px }
.sec-hero .hero-slider .container .slider-content{ text-align:center; color:#fff }
.sec-hero .hero-slider .container .slider-content h2{font-size: 4rem; font-weight: bold; color: var(--sub-color);}
.sec-hero .hero-slider .container .slider-content h3{ font-size:2.5rem; color: var(--sub-color) }
.sec-hero .hero-slider .container .slider-content p{ font-size:1.2rem }

.hero-search .hero-search-wrap{ position:relative; }
.hero-search .list-diadiem{ position:absolute; top:90px; left:0; border-radius:3px; background:#fff; color:#000; width:100%; display:none; }
.hero-search .active{ display:block; }

#diadiem{ min-width:300px }

@media (min-width: 992px) {
    .multi-form .col-lg-1 {width: 13.8888889%;}

    .floating-label .col-lg-1 {width: 5%;padding: 0;}
    .floating-label .col-lg-2 {width: 14%;}

    .floating-label .row > div {position:relative;}
    .floating-label .row.justify-content-lg-end > div:nth-of-type(n+2)::after {position:absolute; content:''; top:12px; bottom:12px; right:0; width:1px; background:#edebeb}
    .floating-label .row > div:nth-last-of-type(-n+2)::after {display:none}

    .floating-label .form-floating .form-select {border: none;line-height: unset;}
    .form-more .form-more-btn.show {background-color: rgb(10 85 151 / 7%); color: var(--main-color); border-color:rgb(10 85 151 / 16%);}
}


@media (max-width: 820px) {
    .sec-fiter-search.floating-label div[data-bs-toggle=button], .sec-search div[data-bs-toggle=button] {display:block !important}
    .sec-fiter-search .row > *, .sec-search .row > * {margin-top: 0;margin-bottom: .6rem;width: 100%;}
    .sec-fiter-search .row .row {margin-top: 0}
    
    .floating-label .btn-circle, .sec-search .btn-circle.btn-toggle {border-radius:.25rem; width:100%}
    .floating-label .btn-circle i {display:none}
    .floating-label .btn-circle::after, .sec-search .btn-circle.btn-toggle::after {content:'Tìm kiếm' !important; font-size:16px; margin-left:8px}

    .floating-label form .btn-circle {padding:0;background: var(--main-color) !important;color: #fff;text-align: center;flex-direction: initial;justify-content: center;margin-top: 40px;}
    .floating-label .select2-container--default .select2-selection--single .select2-selection__rendered {border: 1px solid #ced4da;border-radius: 0.25rem;padding-bottom: 0.625rem;}
    .select2-container--default .select2-selection--single .select2-selection__arrow b {left: 0 !important;margin-left: -10px !important;}
    

    .form-switch .form-check-input:focus {border-color: rgba(0,0,0,.25);}
    .sec-search .sec-search-wrap {padding: 6px 12px 12px !important;min-height: 64px;}
    .sec-fiter-search {padding-bottom:1rem; margin-top: 0;}
    .sec-fiter-search form, .sec-search form {position: fixed;top:0;bottom:0;left:0;right:0;background:#fff;z-index: 9999;padding: 72px 20px 20px;transition: all .3s;transform: translateX(100%);opacity: 0;height: 100vh;overflow-y: auto;flex-direction: column;}
    
    .sec-fiter-search .active .btn-toggle, .sec-search .active .btn-toggle {position: fixed;top:0;right: 5px;width: 48px;height:48px;display: flex;align-items: center;justify-content: center;z-index: 10000;background: none !important;border: none;}
    .sec-fiter-search .active .btn-toggle span, .sec-search .active .btn-toggle span {display:none !important}
    .sec-fiter-search .active .btn-toggle::before, .sec-fiter-search .active .btn-toggle::after, .sec-search .active .btn-toggle::before, .sec-search .active .btn-toggle::after {height: 2.4px;width: 48%;background: #aeaeae;content:'';transform:rotate(45deg);position:absolute;border-radius: 8px;}
    .sec-fiter-search .active .btn-toggle::after, .sec-search .active .btn-toggle::after {content:'' !important;transform:rotate(-45deg);margin-left: 0;}
    .sec-fiter-search .active ~ form, .sec-search .active ~ form {opacity: 1; transform: translateX(0%)}
    .select-input .select2-container--default .select2-selection--single .select2-selection__arrow {right:1px}

    .form-more {/* justify-content: flex-end; */}
    .form-more .form-more-btn {padding-right: 0; -webkit-text-stroke-width: 0.4px;letter-spacing: .4px;color: var(--main-color);font-size: 13px;justify-content: flex-end;}
    .form-more .form-more-btn .icon-menu::before {content: '+';}
    .form-more .form-more-btn i {margin-bottom:5px}

    .form-more .form-more-btn span::before {content:'mở rộng'}
    .form-more .form-more-btn.show span::before {content:'rút gọn'}
    .form-more .form-more-btn.show .icon-menu::before {content: '-';}
    
    .form-more .dropdown-menu {box-shadow:none; position: static!important; transform: none !important; padding: 5px;/* margin-top: 8px !important; */width: 100%;}
    .form-more .row > .col-6 {width: 50%;}
    .floating-label .form-more .select2-container--default .select2-selection--single .select2-selection__rendered {border:none; padding-bottom: 0;}
    .form-more .select2-container--default .select2-selection--single .select2-selection__arrow {right:1px !important}
}