/* CSS riêng cho trang Gia Sư (gia-su.html) + Hồ Sơ Gia Sư (gia-su-ho-so.html).
   Lưới và kích thước card sao chép đúng theo Preply (đo trực tiếp trên preply.com/en/online/math-tutors
   ở viewport 1280px): card 4 cột 160px / 1fr / 244px / 48px, 3 hàng 32px / 104px / 104px,
   gap 8px 16px, padding 24px, avatar 160×160. Màu sắc và bo góc vẫn theo DESIGN_SYSTEM.md
   (navy/gold, góc sắc) chứ không lấy hồng/đen của Preply. */

/* ===== Hàng kết quả: card bên trái + khung video bên phải ===== */
.tutor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: 16px;
    /* start giống Preply: khung video giữ tỉ lệ 16:9 nên cao hơn card một chút, không bị bóp dẹt */
    align-items: start;
}
@media (max-width: 1023px) {
    .tutor-row { grid-template-columns: minmax(0, 1fr); }
    .tutor-row .tutor-video-panel { display: none; }
}

/* ===== Card gia sư ===== */
.tutor-card {
    display: grid;
    /* Cột giữa có sàn 200px để không bị bóp thành 3-4 chữ mỗi dòng trên màn 1200-1280px */
    grid-template-columns: 160px minmax(200px, 1fr) 244px 48px;
    grid-template-rows: 32px auto auto;
    grid-template-areas:
        "avatar heading  indicators favorite"
        "avatar maininfo indicators favorite"
        "avatar maininfo actions    actions";
    gap: 8px 16px;
    padding: 24px;
    background: #fff;
    /* Border luôn 2px để lúc hover chỉ đổi màu, không đẩy lệch layout (Preply cũng làm vậy) */
    border: 2px solid #E7E5E4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tutor-row:hover .tutor-card,
.tutor-row:focus-within .tutor-card {
    border-color: #0D1F33;
}

.tutor-card__avatar     { grid-area: avatar; }
.tutor-card__heading    { grid-area: heading; }
.tutor-card__maininfo   { grid-area: maininfo; min-width: 0; }
.tutor-card__indicators { grid-area: indicators; }
.tutor-card__favorite   { grid-area: favorite; }
.tutor-card__actions    { grid-area: actions; }

.tutor-card__photo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    background: #EEF2F6;
}

/* Cắt phần mô tả còn tối đa 3 dòng như Preply, phần còn lại mở bằng "Xem thêm" */
.tutor-card__bio {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tutor-card__bio--open { -webkit-line-clamp: unset; overflow: visible; }

/* Trên màn hẹp, xếp dọc lại thay vì giữ 4 cột cố định */
@media (min-width: 1024px) and (max-width: 1279px) {
    .tutor-card {
        grid-template-columns: 128px minmax(180px, 1fr) 200px 40px;
    }
    .tutor-card__photo { width: 128px; height: 128px; }
}

@media (max-width: 767px) {
    .tutor-card {
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "avatar heading"
            "avatar indicators"
            "maininfo maininfo"
            "actions actions";
        padding: 16px;
    }
    .tutor-card__favorite { display: none; }
    .tutor-card__photo { width: 96px; height: 96px; }
}

/* ===== Khung video bên phải — phát khi rê chuột vào card ===== */
/* Khung video chỉ hiện khi rê chuột vào đúng hàng của gia sư đó — mặc định cả trang
   không bày sẵn video của toàn bộ gia sư. Vẫn giữ nguyên ô chiếm chỗ (chỉ ẩn hình,
   không dùng display:none) để lúc hiện ra không đẩy card xê dịch. */
.tutor-video-panel {
    background: #fff;
    border: 2px solid #0D1F33;
    padding: 24px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}
.tutor-row:hover .tutor-video-panel,
.tutor-row:focus-within .tutor-video-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.tutor-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0D1F33;
}
.tutor-video video,
.tutor-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Ảnh bìa phóng nhẹ khi hover để khung video có phản hồi ngay cả khi gia sư chưa có video */
.tutor-video img { transition: transform 0.6s ease; }
.tutor-row:hover .tutor-video img { transform: scale(1.06); }

/* Ảnh bìa nằm đè lên video, mờ dần đi khi video bắt đầu chạy */
.tutor-video__poster {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.tutor-video--playing .tutor-video__poster { opacity: 0; pointer-events: none; }

.tutor-video__play {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C08A2E;
    color: #0D1F33;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.tutor-row:hover .tutor-video__play { transform: scale(1.1); }
.tutor-video--playing .tutor-video__play { opacity: 0; pointer-events: none; }

.tutor-video__note {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(13, 31, 51, 0.85);
    color: #F2EBDC;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 8px;
}

/* ===== Thanh điểm theo tiêu chí (dùng ở cả 2 trang) ===== */
.criteria-bar {
    height: 4px;
    background: #E7E5E4;
    overflow: hidden;
}
.criteria-bar__fill {
    height: 100%;
    background: #0D1F33;
    transition: width 0.6s ease;
}

/* ===== Ô lọc + dropdown tự dựng =====
   Dùng thay cho <select> native: hộp thả của macOS/Windows không nhận được font, màu và
   góc sắc của design system nên trông như của một site khác dán vào. */
.filter-box { position: relative; }

.filter-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid #D6D3D1;
    padding: 8px 40px 8px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.filter-trigger:hover { border-color: #8FA4BB; }
.filter-trigger--open { border-color: #0D1F33; }

.filter-trigger__value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0D1F33;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-trigger__chevron {
    position: absolute;
    right: 16px;
    bottom: 14px;
    font-size: 10px;
    color: #A8A29E;
    pointer-events: none;
    transition: transform 0.15s ease;
}
.filter-trigger--open .filter-trigger__chevron { transform: rotate(180deg); }

.filter-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    z-index: 30;
    background: #fff;
    border: 1px solid #D6D3D1;
    box-shadow: 0 8px 24px rgba(13, 31, 51, 0.12);
    padding: 8px 0;
}
/* Ô cuối hàng: neo panel về bên phải để không tràn khỏi mép phải trang */
.filter-panel--right { left: auto; right: 0; }

.filter-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    text-align: left;
    font-size: 14px;
    color: #44403C;
    white-space: nowrap;
    transition: background-color 0.12s ease;
}
.filter-option:hover { background: #F2EBDC; }
.filter-option--active { font-weight: 700; color: #0D1F33; }

/* Dấu tick chiếm chỗ sẵn kể cả khi ẩn, để chữ các dòng thẳng hàng nhau */
.filter-option__check { font-size: 10px; width: 12px; visibility: hidden; }
.filter-option--active .filter-option__check { visibility: visible; }

/* ===== Panel học phí: biểu đồ cột + thanh trượt 2 đầu ===== */
.filter-panel--price { padding: 24px; width: 360px; }

.price-histogram {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 64px;
    margin-bottom: 8px;
}
.price-histogram__bar {
    flex: 1;
    min-height: 2px;
    background: #C08A2E;
    transition: background-color 0.15s ease, height 0.2s ease;
}
.price-histogram__bar--dim { background: #E7E5E4; }

/* Hai <input type="range"> chồng lên nhau trên cùng một đường ray: cả thanh không nhận
   chuột (pointer-events: none), chỉ riêng 2 nút tròn nhận — nhờ vậy kéo được đầu nào
   cũng đúng, không bị thanh phía trên nuốt mất sự kiện của thanh phía dưới. */
.price-slider { position: relative; height: 24px; }

.price-slider__track,
.price-slider__fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
}
.price-slider__track { left: 0; right: 0; background: #E7E5E4; }
.price-slider__fill { background: #0D1F33; }

.price-slider__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.price-slider__input:focus { outline: none; }

.price-slider__input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0D1F33;
    cursor: grab;
    pointer-events: auto;
}
.price-slider__input::-webkit-slider-thumb:active { cursor: grabbing; }
.price-slider__input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0D1F33;
    cursor: grab;
    pointer-events: auto;
}
.price-slider__input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(192, 138, 46, 0.4); }

.price-input {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #D6D3D1;
    padding: 8px 12px;
    transition: border-color 0.15s ease;
}
.price-input:focus-within { border-color: #0D1F33; }
.price-input__field {
    width: 100%;
    min-width: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #0D1F33;
}
.price-input__field:focus { outline: none; }
.price-input__unit { font-size: 12px; font-weight: 600; color: #A8A29E; }