/* =========================================================
   TIÊU ĐỀ DÙNG CHUNG TOÀN ỨNG DỤNG
   Phong cách: Hero navy có glow cam + xanh
   ========================================================= */

:root {
    --td-navy-950: #051426;
    --td-navy-900: #071b33;
    --td-navy-800: #123f68;
    --td-orange: #f59e0b;
    --td-green: #168447;
    --td-title: #dbeafe;
    --td-shadow: 0 18px 40px rgba(5, 20, 38, .32);
}

body .page-header-box.page-header-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 100%;
    margin: 0 auto .9rem !important;
    padding: 32px 36px !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--td-navy-900) 0%, var(--td-navy-950) 55%, var(--td-navy-800) 100%);
    box-shadow: var(--td-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: center;
}

    /* Quầng sáng cam — góc trên phải */
    body .page-header-box.page-header-box::before {
        position: absolute;
        z-index: 0;
        top: -120px;
        right: -60px;
        width: 320px;
        height: 320px;
        content: "";
        pointer-events: none;
        background: var(--td-orange);
        border-radius: 50%;
        filter: blur(70px);
        opacity: .35;
    }

    /* Quầng sáng xanh — góc dưới trái */
    body .page-header-box.page-header-box::after {
        position: absolute;
        z-index: 0;
        bottom: -140px;
        left: -80px;
        width: 320px;
        height: 320px;
        content: "";
        pointer-events: none;
        background: var(--td-green);
        border-radius: 50%;
        filter: blur(70px);
        opacity: .35;
    }

body .page-header-title.page-header-title {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: var(--td-title);
    font-family: "Be Vietnam Pro", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .015em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body .page-underline.page-underline {
    position: relative;
    z-index: 1;
    width: min(200px, 55%);
    height: 3px;
    margin: .65rem auto 0 !important;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--td-orange) 30%, var(--td-orange) 70%, transparent);
    opacity: .85;
}

/* Màn hình laptop nhỏ và máy tính bảng */
@media (max-width: 991.98px) {
    body .page-header-box.page-header-box {
        padding: 26px 28px !important;
        border-radius: 16px;
    }

        body .page-header-box.page-header-box::before,
        body .page-header-box.page-header-box::after {
            width: 240px;
            height: 240px;
            filter: blur(56px);
        }

    body .page-header-title.page-header-title {
        font-size: clamp(1.2rem, 2.6vw, 1.6rem);
    }
}

/* Điện thoại */
@media (max-width: 575.98px) {
    body .page-header-box.page-header-box {
        margin-bottom: .7rem !important;
        padding: 20px 20px !important;
        border-radius: 14px;
    }

        body .page-header-box.page-header-box::before,
        body .page-header-box.page-header-box::after {
            width: 180px;
            height: 180px;
            filter: blur(44px);
            opacity: .28;
        }

    body .page-header-title.page-header-title {
        font-size: clamp(1.05rem, 4.2vw, 1.28rem);
        line-height: 1.3;
        letter-spacing: .01em;
    }

    body .page-underline.page-underline {
        width: min(150px, 55%);
        margin-top: .5rem !important;
    }
}

/* Tôn trọng thiết lập giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
    body .page-header-box.page-header-box {
        transition: none;
    }
}

/* Bản in: rõ chữ, tiết kiệm mực */
@media print {
    body .page-header-box.page-header-box {
        padding: 14px 18px !important;
        color: #071b33;
        border: 2px solid #071b33;
        background: #fff;
        box-shadow: none;
        backdrop-filter: none;
    }

        body .page-header-box.page-header-box::before,
        body .page-header-box.page-header-box::after {
            display: none;
        }

    body .page-underline.page-underline {
        display: none;
    }

    body .page-header-title.page-header-title {
        color: #071b33;
        text-shadow: none;
    }
}