/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Description: Child theme của Hello Elementor cho KOJI.
 Version: 1.0.2
 Text Domain: hello-elementor-child
*/
body:not([class*=elementor-page-]) .site-main{
	margin-bottom: 80px;
	max-width: 1519px !important;
}
body:not([class*=elementor-page-]) .site-main h1.entry-title{
	margin: 80px 0 66px;
	font-size: 64px;
}
.koji-search-bar {
    display: flex;
    align-items: center;
}
.koji-search-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    white-space: nowrap;
    border-style: solid;
	border-width: 0 1px 0 0;
	border-color: rgba(0,0,0, .4);
    flex: auto;
    justify-content: center;
}
.koji-search-item:last-child{
	border: 0;
}
.koji-search-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.koji-search-bar .koji-search-item input {
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    transition: none !important;
	font-size: 18px;
	line-height: 22px;
}
.koji-search-bar .koji-search-item input:focus {
    border: none !important;
    box-shadow: none !important;
}
.koji-search-bar .koji-date-item input {
    width: 173px !important;
    cursor: pointer;
}
.koji-search-bar .koji-search-item input[name="guests"] {
    width: 180px !important;
}
.koji-search-bar .koji-search-item input[name="rooms"] {
    width: 72px !important;
}
.koji-search-bar .koji-search-item input[name="voucher"] {
    width: 112px !important;
}
@media (max-width: 768px) {
	body:not([class*=elementor-page-]) .site-main h1.entry-title{
		margin: 10px 0 20px;
		font-size: 24px;
		padding: 0;
	}
	body:not([class*=elementor-page-]) .site-main{
		padding-inline-end: 20px !important;
		padding-inline-start: 20px !important;
		margin-bottom: 10px;
	}
	
    .koji-search-bar {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-radius: 16px;
        padding: 8px;
    }
    .koji-search-item {
        width: 100%;
        border-width: 0 0 1px;
    }
    .koji-search-bar .koji-search-item input,
    .koji-search-bar .koji-date-item input,
    .koji-search-bar .koji-search-item input[name="guests"],
    .koji-search-bar .koji-search-item input[name="rooms"],
    .koji-search-bar .koji-search-item input[name="voucher"] {
        width: 100% !important;
        flex: 1 1 auto;
    }
}

/* ─────────────────────────────────────────────
   KOJI ROOM CAROUSEL (#room-carousel)
   Carousel Swiper tự khởi tạo (xem functions.php),
   không dùng widget Carousel/Nested Carousel của
   Elementor Pro. Item active có width thật to hơn
   44%, margin 46px giữ nguyên nhờ slidesPerView:'auto'
   để Swiper tự tính lại vị trí đúng - không cần hack
   margin/transform.
───────────────────────────────────────────── */
#room-carousel .swiper-button-prev,
#room-carousel .swiper-button-next {
    top: auto;
    bottom: 9px;
    width: 35px;
    height: 24px;
}
#room-carousel .swiper-button-prev {
    left: calc(50% - 60px);
}
#room-carousel .swiper-button-next {
    right: calc(50% - 60px);
}
#room-carousel .swiper-button-prev::after,
#room-carousel .swiper-button-next::after {
    font-size: 16px;
	color: rgba(0,0,0, .55)
}

@media (max-width: 768px) {
    #room-carousel .swiper-slide,
    #room-carousel .swiper-slide-active {
        width: 100%;
    }
}