/* =========================================
   THDP - Responsive Mobile Landscape Base
   Bản nền chung cho điện thoại ngang
   Không ép layout cụ thể từng page
========================================= */

:root {
    --rm-safe-vh: 100dvh;

    --rm-gap: 8px;
    --rm-gap-tight: 6px;

    --rm-pad-y: 8px;
    --rm-pad-x: 8px;

    --rm-radius: 10px;
    --rm-radius-sm: 8px;

    --rm-btn-h: 34px;
    --rm-btn-h-compact: 30px;

    --rm-title: 0.88rem;
    --rm-subtitle: 0.72rem;
    --rm-text: 0.68rem;
    --rm-small: 0.58rem;
}

/* -----------------------------------------
   Lớp shell chung
----------------------------------------- */
html,
body {
    min-height: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page-shell,
.app-shell,
.screen-shell {
    min-height: var(--rm-safe-vh);
}

/* -----------------------------------------
   Utility chung
----------------------------------------- */
.rm-allow-y {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.rm-no-y {
    overflow-y: hidden !important;
}

.rm-fill-height {
    min-height: 0;
    height: 100%;
}

.rm-title {
    font-size: var(--rm-title);
    line-height: 1.15;
}

.rm-subtitle {
    font-size: var(--rm-subtitle);
    line-height: 1.2;
}

.rm-text {
    font-size: var(--rm-text);
    line-height: 1.3;
}

.rm-small {
    font-size: var(--rm-small);
    line-height: 1.25;
}

/* -----------------------------------------
   Rule an toàn cho màn hình thấp
----------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --rm-safe-vh: 100dvh;

        --rm-gap: 6px;
        --rm-gap-tight: 4px;

        --rm-pad-y: 6px;
        --rm-pad-x: 6px;

        --rm-radius: 8px;
        --rm-radius-sm: 7px;

        --rm-btn-h: 30px;
        --rm-btn-h-compact: 28px;

        --rm-title: 0.80rem;
        --rm-subtitle: 0.64rem;
        --rm-text: 0.62rem;
        --rm-small: 0.54rem;
    }

    html,
    body {
        min-height: 100dvh;
    }

    /* Title chung */
    h1, h2, h3, h4 {
        line-height: 1.12;
    }

    /* Button chung */
    button,
    .btn,
    .btn-back,
    .phase-tab,
    .admin-tab-btn,
    .review-btn {
        min-height: var(--rm-btn-h);
    }

    /* Card/block chung */
    .module-card,
    .hub-card,
    .lesson-card,
    .video-item,
    .menu a,
    .review-box,
    .whoami {
        border-radius: var(--rm-radius);
    }

    /* Header text chung */
    .page-title,
    .hub-title,
    .header-title,
    .dash-title {
        font-size: var(--rm-title);
        line-height: 1.12;
    }

    .hub-subtitle,
    .header-sub,
    .sub,
    .page-sub {
        font-size: var(--rm-subtitle);
        line-height: 1.18;
    }

    /* Khoảng cách cho các layout chung */
    .luyen-tap-layout,
    .hub-layout,
    .voking-path-container,
    .dash-container {
        gap: var(--rm-gap);
        padding-top: var(--rm-pad-y);
        padding-bottom: var(--rm-pad-y);
    }

    /* Header bar gọn hơn */
    .hub-header,
    .path-header,
    .dash-header,
    .page-header {
        gap: var(--rm-gap);
        padding-bottom: 4px;
    }

    /* Grid chung gọn lại */
    .hub-grid,
    .lesson-grid,
    .module-layout,
    .module-row {
        gap: var(--rm-gap);
    }

    /* Text trong card nhỏ lại */
    .card-title,
    .hub-card-title,
    .topic-title,
    .menu-title {
        line-height: 1.12;
    }

    .hub-card-desc,
    .menu-desc,
    .topic-subtitle,
    .hub-card-foot,
    .lesson-label,
    .card-index {
        line-height: 1.22;
    }
}

/* -----------------------------------------
   Rule mạnh hơn cho điện thoại landscape rất thấp
   Ví dụ máy Android có thanh điều hướng dày
----------------------------------------- */
@media (max-height: 430px) and (orientation: landscape) {
    :root {
        --rm-gap: 4px;
        --rm-gap-tight: 3px;

        --rm-pad-y: 4px;
        --rm-pad-x: 4px;

        --rm-radius: 8px;
        --rm-radius-sm: 6px;

        --rm-btn-h: 28px;
        --rm-btn-h-compact: 26px;

        --rm-title: 0.74rem;
        --rm-subtitle: 0.60rem;
        --rm-text: 0.58rem;
        --rm-small: 0.50rem;
    }

    h1, h2, h3, h4 {
        margin-top: 0;
        margin-bottom: 0;
    }

    button,
    .btn,
    .btn-back,
    .phase-tab,
    .admin-tab-btn,
    .review-btn {
        min-height: var(--rm-btn-h);
        padding-top: 0;
        padding-bottom: 0;
    }

    .luyen-tap-layout,
    .hub-layout,
    .voking-path-container,
    .dash-container {
        gap: var(--rm-gap);
        padding-top: var(--rm-pad-y);
        padding-bottom: var(--rm-pad-y);
    }

    .hub-header,
    .path-header,
    .dash-header,
    .page-header {
        gap: var(--rm-gap);
        padding-bottom: 3px;
    }

    .hub-grid,
    .lesson-grid,
    .module-layout,
    .module-row,
    .review-grid,
    .review-actions,
    .menu {
        gap: var(--rm-gap);
    }

    /* Card/text co thêm 1 nấc */
    .hub-card-title,
    .card-title,
    .topic-title,
    .menu-title {
        font-size: 0.92em;
    }

    .hub-card-desc,
    .menu-desc,
    .topic-subtitle,
    .hub-card-foot,
    .lesson-label,
    .card-index,
    .status-box,
    .review-status {
        font-size: 0.92em;
    }
}

/* -----------------------------------------
   Helper cho page nào bị cụt vì height cứng
   Gắn class này vào body hoặc wrapper nếu cần
----------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .rm-unlock-height {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .rm-scroll-y {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .rm-compact-topbar {
        min-height: 40px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* =========================================
   Fix Android bị cụt đáy app / vh không ổn
========================================= */

html {
    height: 100%;
}

body {
    min-height: 100dvh;
    min-height: 100svh;
}

/* Các shell chính: ưu tiên min-height thay vì khóa cứng */
.login-card,
.dash-container,
.luyen-tap-layout,
.lesson-player-layout,
.page-shell,
.app-shell,
.screen-shell {
    min-height: 100dvh;
    min-height: 100svh;
}

/* Android landscape thấp: mở khóa chiều cao và cho cuộn dọc */
@media (max-height: 520px) and (orientation: landscape) {
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .luyen-tap-layout,
    .lesson-player-layout,
    .dash-container,
    .login-card {
        height: auto !important;
        min-height: 100dvh !important;
        min-height: 100svh !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .hub-layout,
    .mix-layout {
        height: auto !important;
        min-height: 100dvh !important;
        min-height: 100svh !important;
        overflow: visible !important;
    }

    .hub-grid,
    .mix-main,
    .mix-content {
        overflow: visible !important;
        height: auto !important;
    }
}