/* Thẻ tour trang chủ — dulichonline.com.vn (10/11/2026)
 * File được nạp từ view/mod_tour/dlo-card-info.php. Dùng class dlo-* riêng để không đụng style.css / style-new.css. */

/* Thẻ cao bằng nhau trong carousel */
#tour-best .owl-stage, #tour-flash .owl-stage { display: flex; }
#tour-best .owl-item, #tour-flash .owl-item { display: flex; }
#tour-best .item, #tour-flash .item { display: flex; flex-direction: column; width: 100%; height: auto; }
#tour-flash .bottom-flash { display: flex; flex-direction: column; flex: 1 1 auto; }

.dlo-bl { display: flex !important; flex-direction: column; flex: 1 1 auto; height: auto !important; min-height: 0 !important; padding: 14px 16px 16px !important; background: #fff; }
.dlo-card { display: flex; flex-direction: column; flex: 1 1 auto; gap: 12px; container-type: inline-size; }

.dlo-card .dlo-title { margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1.35 !important; min-height: 2.7em; }
.dlo-card .dlo-title a { color: #0B3F73; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dlo-card .dlo-title a:hover { color: #C2410C; }

/* Ô thông tin: 3 ô nhỏ + 1 hàng ngày đi */
.dlo-facts { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dlo-facts li { min-width: 0; margin: 0; padding: 8px 9px; border-radius: 10px; background: #F3F7FB; display: flex; flex-direction: column; gap: 2px; }
.dlo-facts li > i { color: #F26B0F; font-size: 14px; line-height: 1; margin-bottom: 2px; }
.dlo-facts small { font-size: 11px; line-height: 1.3; color: #5B6B7F; text-transform: uppercase; letter-spacing: .03em; }
.dlo-facts b { font-size: 13.5px; line-height: 1.3; color: #0B3F73; font-weight: 600; overflow-wrap: anywhere; }
.dlo-facts .dlo-dates-li { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: #FFF7F1; }
.dlo-facts .dlo-dates-li > i { margin: 0; }
.dlo-dates { display: flex; flex-wrap: wrap; gap: 5px; }
.dlo-dates span { padding: 2px 9px; border: 1px solid #F7B58A; border-radius: 999px; background: #fff; color: #C2410C; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.dlo-dates span.first { border-color: #F26B0F; background: #F26B0F; color: #fff; }
.dlo-dates span.more { border-style: dashed; border-color: #B8C4D2; color: #5B6B7F; font-weight: 500; }
.dlo-dates span.none { border-color: #DCE5EE; color: #5B6B7F; }

/* Giá + nút */
.dlo-foot { margin-top: auto; padding-top: 12px; border-top: 1px dashed #DCE5EE; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dlo-price { min-width: 0; }
.dlo-old { margin: 0 0 3px !important; display: flex; align-items: center; gap: 6px; font-size: 13px; color: #8593A3; }
.dlo-old em { padding: 1px 6px; border-radius: 4px; background: #FFF1E7; color: #C2410C; font-size: 12px; font-style: normal; font-weight: 700; }
.dlo-now { margin: 0 !important; font-size: 22px; line-height: 1.15; font-weight: 800; color: #C2410C; white-space: nowrap; }
.dlo-now small { margin-left: 3px; font-size: 12px; font-weight: 500; color: #5B6B7F; }
.dlo-now.dlo-contact { font-size: 18px; }
.dlo-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: #0B3F73; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s; }
.dlo-btn:hover, .dlo-btn:focus { background: #F26B0F; }

/* Thẻ hẹp (Top tour trên desktop, điện thoại nhỏ): nút chỉ còn mũi tên tròn để giá không bị che */
@container (max-width: 330px) {
    .dlo-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
    .dlo-btn span { display: none; }
    .dlo-now { font-size: 20px; }
    .dlo-facts li { padding: 7px; }
    .dlo-facts b { font-size: 13px; }
}

@media (max-width: 400px) {
    .dlo-facts { gap: 5px; }
    .dlo-facts small { font-size: 10.5px; letter-spacing: 0; }
}