/* Dropdown tự dựng thay danh sách mặc định của <select> — xem static-assets/js/dlv-select.js.
   Kích thước/viền/bo góc bám theo .btr-field select của trang đặt tour để nhìn không lệch:
   cao 42px, viền 1.5px #e0e0e0, bo 10px, chữ 14px. */

.dlvsel { position: relative; }

/* <select> gốc GIỮ LẠI trong form (submit/validate không đổi), chỉ ẩn khỏi mắt.
   Không dùng display:none — vài thư viện validate bỏ qua field display:none.
   height !important: trang đặt tour có `.btr-field select{height:42px !important}`; !important
   thắng mọi declaration thường BẤT KỂ specificity, nên muốn thu về 1px phải dùng !important lại.
   (Không có nó thì select ẩn vẫn giữ hộp 42px — position:absolute + opacity:0 + pointer-events:none
   nên vô hại về mặt layout, nhưng để 1px cho sạch và an toàn khi dùng ở trang khác.) */
.dlvsel > select.dlvsel-native {
    position: absolute;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    opacity: 0;
    pointer-events: none;
    border: 0;
    padding: 0;
    margin: 0;
}

.dlvsel-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 42px;
    padding: 0 34px 0 12px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #000;
    font-family: inherit;
    /* 14px an toàn: iOS chỉ tự phóng to khi focus INPUT/SELECT/TEXTAREA, <button> thì không. */
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.dlvsel-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* line-height 1.4 (không kế thừa 1 của .dlvsel-btn): overflow:hidden + line-height:1 làm
       hộp dòng ngắn hơn glyph → cắt đuôi "g" và mũ dấu tiếng Việt ("ô","ộ"…). 1.4 chừa đủ chỗ. */
    line-height: 1.4;
    padding: 1px 0;
}

/* Mũi tên: dựng bằng border nên không cần ảnh, đổi màu theo trạng thái mở. */
.dlvsel-caret {
    position: absolute;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s, border-color .15s;
}

.dlvsel.is-open .dlvsel-btn {
    border-color: #ed007f;
    box-shadow: 0 0 0 3px rgba(214, 36, 140, .1);
}
.dlvsel.is-open .dlvsel-caret {
    border-color: #ed007f;
    transform: translateY(2px) rotate(-135deg);
}
.dlvsel-btn:focus-visible {
    outline: none;
    border-color: #ed007f;
    box-shadow: 0 0 0 3px rgba(214, 36, 140, .1);
}

.dlvsel-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;              /* trên các card của form, dưới modal (9999) */
    padding: 4px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(17, 24, 39, .14);
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* cuộn hết danh sách không kéo theo cả trang */
}
/* Ô nằm cuối màn hình → JS gắn .is-up để danh sách lật lên trên, không bị mép dưới cắt. */
.dlvsel.is-up .dlvsel-list { top: auto; bottom: calc(100% + 6px); }
.dlvsel-list[hidden] { display: none; }

.dlvsel-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.dlvsel-opt:hover,
.dlvsel-opt:focus-visible { outline: none; background: #fdf0f7; color: #ed007f; }
.dlvsel-opt.is-sel { color: #ed007f; font-weight: 700; }
.dlvsel-opt[disabled] { color: #b0b0b0; cursor: not-allowed; }

/* Dấu ✓ LUÔN chiếm chỗ (chỉ ẩn/hiện) để chữ các dòng thẳng cột nhau. */
.dlvsel-tick {
    flex: 0 0 auto;
    width: 14px;
    text-align: center;
    color: #ed007f;
    visibility: hidden;
}
.dlvsel-tick::before { content: "\2713"; }
.dlvsel-opt.is-sel .dlvsel-tick { visibility: visible; }