/* ============================================================
   DASHBOARD.CSS
   THPT NGUYỄN VĂN TRỖI
   HỆ THỐNG THI ĐUA - NỀ NẾP
   ============================================================ */


/* ============================================================
   1. BIẾN MÀU
   ============================================================ */

.nvtr-dashboard {

    --green-dark: #356b55;
    --green-deep: #285641;
    --green: #639b7c;
    --green-light: #dcefe3;
    --green-soft: #eaf6ee;

    --cream: #fffdf7;
    --cream-2: #f8f5e8;

    --yellow: #e9cf8b;
    --yellow-light: #fff6dc;

    --pink: #e7bdc8;
    --pink-light: #fff1f4;

    --blue-light: #e3f0f2;

    --text: #294237;
    --text-2: #52675d;
    --text-light: #77877f;

    --border: #dce9df;

    --shadow:
        0 10px 30px rgba(53, 107, 85, 0.08);

    --shadow-hover:
        0 18px 40px rgba(53, 107, 85, 0.14);

    width: 100%;
    min-height: 100vh;

    color: var(--text);

    background:
        linear-gradient(
            180deg,
            #f3faf5 0%,
            #f8fbf8 45%,
            #fffdf8 100%
        );

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


/* ============================================================
   2. RESET RIÊNG TRANG CHỦ
   ============================================================ */

.nvtr-dashboard *,
.nvtr-dashboard *::before,
.nvtr-dashboard *::after {

    box-sizing: border-box;
}


.nvtr-dashboard a {

    text-decoration: none;
}


.nvtr-dashboard h1,
.nvtr-dashboard h2,
.nvtr-dashboard h3,
.nvtr-dashboard h4,
.nvtr-dashboard p {

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
}


/* ============================================================
   3. HERO
   ============================================================ */

.nvtr-hero {

    position: relative;

    width:
        min(1400px, calc(100% - 32px));

    min-height:
        560px;

    margin:
        10px auto 0;

    overflow:
        hidden;

    border-radius:
        30px;

    border:
        1px solid rgba(99,155,124,0.18);

    background:
        linear-gradient(
            135deg,
            #dcefe3 0%,
            #eaf6ed 52%,
            #faf4df 100%
        );

    box-shadow:
        0 18px 50px rgba(53,107,85,0.12);
}


/* ============================================================
   4. HỌA TIẾT HERO
   ============================================================ */

.nvtr-leaf {

    position: absolute;

    z-index: 1;

    color:
        rgba(53,107,85,0.45);

    font-size:
        24px;

    pointer-events:
        none;
}


.nvtr-leaf.leaf-1 {

    left:
        50px;

    top:
        48px;
}


.nvtr-leaf.leaf-2 {

    left:
        76px;

    top:
        75px;

    font-size:
        16px;
}


.nvtr-circle {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        0;
}


.nvtr-circle.circle-1 {

    width:
        440px;

    height:
        440px;

    right:
        -160px;

    top:
        -250px;

    background:
        rgba(120,173,143,0.17);
}


.nvtr-circle.circle-2 {

    width:
        260px;

    height:
        260px;

    left:
        -150px;

    bottom:
        -160px;

    background:
        rgba(233,207,139,0.17);
}


/* ============================================================
   5. HERO INNER
   ============================================================ */

.nvtr-hero-inner {

    position:
        relative;

    z-index:
        2;

    min-height:
        560px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(360px, 0.82fr);

    align-items:
        center;

    gap:
        40px;

    padding:
        55px 65px;
}


/* ============================================================
   6. HERO CONTENT
   ============================================================ */

.nvtr-hero-content {

    max-width:
        650px;
}


/* ============================================================
   7. NĂM HỌC
   ============================================================ */

.nvtr-year-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        25px;

    padding:
        9px 16px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.82);

    border:
        1px solid rgba(99,155,124,0.20);

    color:
        var(--green-dark);

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        0 4px 14px rgba(53,107,85,0.06);
}


/* ============================================================
   8. TIÊU ĐỀ THPT NGUYỄN VĂN TRỖI
   ============================================================ */

.nvtr-hero h1 {

    margin:
        0;

    padding:
        0;

    color:
        var(--green-dark);

    font-size:
        clamp(44px, 5.2vw, 72px);

    line-height:
        1.02;

    font-weight:
        750;

    letter-spacing:
        -1.5px;
}


/*
   Quan trọng:
   index.php đang có:

   <h1>
      THPT
      <span>NGUYỄN VĂN TRỖI</span>
   </h1>
*/

.nvtr-hero h1 span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--green);

    font-weight:
        750;
}


/* ============================================================
   9. SUBTITLE
   ============================================================ */

.nvtr-hero-subtitle {

    margin:
        22px 0 10px;

    color:
        var(--green-dark);

    font-size:
        21px;

    font-weight:
        700;

    line-height:
        1.45;
}


.nvtr-hero-description {

    max-width:
        610px;

    margin:
        0;

    color:
        var(--text-2);

    font-size:
        15px;

    line-height:
        1.8;
}


.nvtr-hero-description strong {

    color:
        var(--green-dark);

    font-weight:
        750;
}


/* ============================================================
   10. HERO BUTTONS
   ============================================================ */

.nvtr-hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        25px;
}


.nvtr-primary-btn,
.nvtr-secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        44px;

    padding:
        10px 19px;

    border-radius:
        12px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        all .2s ease;
}


.nvtr-primary-btn {

    color:
        #ffffff !important;

    background:
        var(--green);

    border:
        1px solid var(--green);

    box-shadow:
        0 7px 18px rgba(99,155,124,0.22);
}


.nvtr-primary-btn:hover {

    color:
        #ffffff !important;

    background:
        var(--green-dark);

    border-color:
        var(--green-dark);

    transform:
        translateY(-2px);
}


.nvtr-secondary-btn {

    color:
        var(--green-dark) !important;

    background:
        rgba(255,255,255,0.80);

    border:
        1px solid rgba(99,155,124,0.25);
}


.nvtr-secondary-btn:hover {

    color:
        var(--green-dark) !important;

    background:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px rgba(53,107,85,0.10);
}


/* ============================================================
   11. LOGO AREA
   ============================================================ */

.nvtr-logo-area {

    position:
        relative;

    min-height:
        420px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ============================================================
   12. LOGO GLOW
   ============================================================ */

.nvtr-logo-glow {

    position:
        absolute;

    width:
        390px;

    height:
        390px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.48);

    filter:
        blur(1px);
}


/* ============================================================
   13. LOGO CARD
   ============================================================ */

.nvtr-logo-card {

    position:
        relative;

    z-index:
        2;

    width:
        370px;

    height:
        370px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,0.82);

    border:
        9px solid rgba(255,255,255,0.70);

    box-shadow:
        0 20px 50px rgba(53,107,85,0.14);

    text-align:
        center;
}


/* đường viền trang trí */

.nvtr-logo-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        15px;

    border-radius:
        50%;

    border:
        2px dashed rgba(99,155,124,0.28);

    pointer-events:
        none;
}


/* ============================================================
   14. LOGO TRƯỜNG
   ============================================================ */

.nvtr-school-logo {

    position:
        relative;

    z-index:
        3;

    display:
        block;

    width:
        235px;

    height:
        235px;

    object-fit:
        contain;

    /*
       Nếu PNG có nền trắng,
       multiply giúp nền trắng hòa vào nền phía sau.
    */

    mix-blend-mode:
        multiply;

    filter:
        saturate(1.02);

    margin:
        0 auto 6px;
}


/* ============================================================
   15. CHỮ TRONG LOGO CARD
   ============================================================ */

.nvtr-logo-title,
.nvtr-logo-line,
.nvtr-logo-small {

    position:
        relative;

    z-index:
        4;
}


/*
   Chỉ giữ chữ này nhỏ,
   không để nó đè lên logo.
*/

.nvtr-logo-title {

    display:
        none;
}


.nvtr-logo-line {

    display:
        none;
}


.nvtr-logo-small {

    display:
        none;
}


/* ============================================================
   16. WELCOME
   ============================================================ */

.nvtr-welcome {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        28px auto 0;

    padding:
        24px 28px;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    background:
        #ffffff;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow);
}


.nvtr-welcome-icon {

    width:
        50px;

    height:
        50px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-size:
        22px;
}


.nvtr-welcome-label {

    margin-bottom:
        4px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.1px;
}


.nvtr-welcome h2 {

    margin:
        0 0 5px;

    color:
        var(--green-dark);

    font-size:
        20px;

    font-weight:
        750;
}


.nvtr-welcome p {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.6;
}


/* ============================================================
   17. SECTION
   ============================================================ */

.nvtr-section {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        50px auto 0;
}


/* ============================================================
   18. SECTION HEADING
   ============================================================ */

.nvtr-section-heading {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        25px;

    margin-bottom:
        22px;
}


.nvtr-section-heading.centered {

    display:
        block;

    text-align:
        center;
}


.nvtr-section-kicker {

    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.3px;
}


.nvtr-section-heading h2 {

    margin:
        0;

    color:
        var(--green-dark);

    font-size:
        27px;

    line-height:
        1.25;

    font-weight:
        800;
}


.nvtr-section-heading p {

    margin:
        7px 0 0;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.6;
}


/* ============================================================
   19. HEADING DECORATION
   ============================================================ */

.nvtr-heading-decoration {

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding-bottom:
        5px;
}


.nvtr-heading-decoration span {

    display:
        block;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--green-light);
}


.nvtr-heading-decoration span:nth-child(2) {

    width:
        11px;

    height:
        11px;

    background:
        var(--yellow);
}


.nvtr-heading-decoration span:nth-child(3) {

    background:
        var(--pink);
}


/* ============================================================
   20. FUNCTION GRID
   ============================================================ */

.nvtr-function-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        17px;
}


/* ============================================================
   21. FUNCTION CARD
   ============================================================ */

.nvtr-function-card {

    position:
        relative;

    min-height:
        205px;

    display:
        flex;

    flex-direction:
        column;

    padding:
        23px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    background:
        #ffffff;

    color:
        var(--text);

    box-shadow:
        var(--shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.nvtr-function-card::after {

    content:
        "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    right:
        -60px;

    bottom:
        -60px;

    border-radius:
        50%;

    background:
        var(--green-light);

    opacity:
        .55;

    transition:
        transform .25s ease;
}


.nvtr-function-card:hover {

    color:
        var(--text);

    transform:
        translateY(-5px);

    border-color:
        #c6dfcf;

    box-shadow:
        var(--shadow-hover);
}


.nvtr-function-card:hover::after {

    transform:
        scale(1.3);
}


/* ============================================================
   22. CARD TOP
   ============================================================ */

.nvtr-card-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.nvtr-function-icon {

    width:
        50px;

    height:
        50px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-size:
        22px;
}


.nvtr-function-card.mint
.nvtr-function-icon {

    background:
        #e5f3ec;
}


.nvtr-function-card.blue
.nvtr-function-icon {

    background:
        var(--blue-light);

    color:
        #4c7780;
}


.nvtr-function-card.orange
.nvtr-function-icon {

    background:
        var(--yellow-light);

    color:
        #96772e;
}


.nvtr-function-card.yellow
.nvtr-function-icon {

    background:
        #fff2cf;

    color:
        #96772e;
}


.nvtr-card-number {

    color:
        #aabdb2;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


/* ============================================================
   23. CARD TEXT
   ============================================================ */

.nvtr-function-title {

    position:
        relative;

    z-index:
        2;

    margin-top:
        18px;

    color:
        var(--green-dark);

    font-size:
        17px;

    font-weight:
        750;

    line-height:
        1.4;
}


.nvtr-function-description {

    position:
        relative;

    z-index:
        2;

    margin-top:
        7px;

    color:
        var(--text-light);

    font-size:
        13px;

    line-height:
        1.65;
}


.nvtr-card-bottom {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-top:
        auto;

    padding-top:
        17px;

    color:
        var(--green);

    font-size:
        12px;

    font-weight:
        750;
}


.nvtr-card-bottom i {

    font-size:
        16px;

    transition:
        transform .2s ease;
}


.nvtr-function-card:hover
.nvtr-card-bottom i {

    transform:
        translateX(4px);
}


/* ============================================================
   24. INTRODUCTION
   ============================================================ */

.nvtr-introduction {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, .65fr);

    gap:
        20px;
}


.nvtr-intro-main {

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid var(--border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow);
}


.nvtr-intro-main h2 {

    margin:
        0 0 15px;

    color:
        var(--green-dark);

    font-size:
        24px;

    line-height:
        1.35;

    font-weight:
        800;
}


.nvtr-intro-main p {

    margin:
        0 0 12px;

    color:
        var(--text-2);

    font-size:
        14px;

    line-height:
        1.8;
}


/* ============================================================
   25. INTRO TAGS
   ============================================================ */

.nvtr-intro-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        20px;
}


.nvtr-intro-tags span {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        var(--green-soft);

    color:
        var(--green-dark);

    font-size:
        12px;

    font-weight:
        700;
}


.nvtr-intro-tags i {

    font-size:
        12px;
}


/* ============================================================
   26. INTRO SIDE
   ============================================================ */

.nvtr-intro-side {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;
}


.nvtr-mini-card {

    display:
        flex;

    gap:
        13px;

    flex:
        1;

    padding:
        19px;

    border:
        1px solid var(--border);

    border-radius:
        17px;

    background:
        var(--green-soft);

    box-shadow:
        0 6px 18px rgba(53,107,85,.05);
}


.nvtr-mini-card:nth-child(2) {

    background:
        var(--yellow-light);
}


.nvtr-mini-card:nth-child(3) {

    background:
        var(--pink-light);
}


.nvtr-mini-icon {

    flex:
        0 0 auto;

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(255,255,255,.75);

    color:
        var(--green-dark);

    font-size:
        18px;
}


.nvtr-mini-icon.yellow {

    color:
        #96772e;
}


.nvtr-mini-icon.pink {

    color:
        #a56276;
}


.nvtr-mini-card strong {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--green-dark);

    font-size:
        14px;

    font-weight:
        750;
}


.nvtr-mini-card p {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        12px;

    line-height:
        1.6;
}


/* ============================================================
   27. VALUES
   ============================================================ */

.nvtr-values-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        15px;
}


.nvtr-value-card {

    padding:
        25px 17px;

    text-align:
        center;

    background:
        #ffffff;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.nvtr-value-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--shadow-hover);
}


.nvtr-value-icon {

    width:
        53px;

    height:
        53px;

    margin:
        0 auto 13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        var(--green-light);

    color:
        var(--green-dark);

    font-size:
        22px;
}


.nvtr-value-icon.mint {

    background:
        #e7f4ed;
}


.nvtr-value-icon.yellow {

    background:
        var(--yellow-light);

    color:
        #96772e;
}


.nvtr-value-icon.pink {

    background:
        var(--pink-light);

    color:
        #a56276;
}


.nvtr-value-card h3 {

    margin:
        0 0 6px;

    color:
        var(--green-dark);

    font-size:
        16px;

    font-weight:
        750;
}


.nvtr-value-card p {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        12px;

    line-height:
        1.6;
}


/* ============================================================
   28. QUOTE
   ============================================================ */

.nvtr-quote {

    position:
        relative;

    width:
        min(1000px, calc(100% - 32px));

    margin:
        50px auto 0;

    padding:
        34px 30px;

    overflow:
        hidden;

    text-align:
        center;

    border:
        1px solid var(--border);

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #e6f4ea,
            #fff7df
        );

    box-shadow:
        var(--shadow);
}


.nvtr-quote-content {

    position:
        relative;

    z-index:
        2;
}


.nvtr-quote-content > i {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--green);

    font-size:
        25px;
}


.nvtr-quote p {
    margin: 0;

    color: var(--green-dark);

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 18px;

    line-height: 1.7;

    font-style: normal;

    font-weight: 500;

    letter-spacing: 0;
}


.nvtr-quote-content span {

    display:
        block;

    margin-top:
        10px;

    color:
        var(--text-light);

    font-size:
        12px;
}


.nvtr-quote-leaf {

    position:
        absolute;

    left:
        25px;

    bottom:
        15px;

    color:
        rgba(99,155,124,.20);

    font-size:
        32px;
}


.nvtr-quote-leaf.right {

    left:
        auto;

    right:
        25px;

    top:
        15px;

    bottom:
        auto;
}


/* ============================================================
   29. VIEW ONLY
   ============================================================ */

.nvtr-view-only {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        28px auto 0;

    padding:
        16px 20px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        11px;

    background:
        #fff8e6;

    border:
        1px solid #f0dfad;

    border-radius:
        14px;

    color:
        #776027;

    font-size:
        13px;

    line-height:
        1.6;
}


.nvtr-view-only > i {

    flex:
        0 0 auto;

    margin-top:
        2px;

    font-size:
        18px;
}


.nvtr-view-only strong {

    display:
        block;

    margin-bottom:
        2px;
}


.nvtr-view-only p {

    margin:
        0;
}


.nvtr-view-only a {

    color:
        var(--green-dark);

    font-weight:
        700;

    text-decoration:
        underline;
}


/* ============================================================
   30. FOOTER
   ============================================================ */

.nvtr-home-footer {

    width:
        min(1180px, calc(100% - 32px));

    margin:
        50px auto 0;

    padding:
        25px 0 35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid var(--border);
}


.nvtr-home-footer > div:first-child {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.nvtr-home-footer img {

    width:
        42px;

    height:
        42px;

    object-fit:
        contain;

    mix-blend-mode:
        multiply;
}


.nvtr-home-footer span {

    color:
        var(--text-light);

    font-size:
        12px;
}


.nvtr-home-footer > div span {

    color:
        var(--green-dark);

    font-weight:
        750;
}


/* ============================================================
   31. TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .nvtr-hero-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .8fr);

        padding:
            45px;
    }


    .nvtr-hero h1 {

        font-size:
            54px;
    }


    .nvtr-logo-card {

        width:
            310px;

        height:
            310px;
    }


    .nvtr-school-logo {

        width:
            205px;

        height:
            205px;
    }


    .nvtr-logo-glow {

        width:
            330px;

        height:
            330px;
    }


    .nvtr-function-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .nvtr-values-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ============================================================
   32. TABLET DỌC
   ============================================================ */

@media (max-width: 800px) {

    .nvtr-hero {

        min-height:
            auto;
    }


    .nvtr-hero-inner {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        padding:
            42px 30px 45px;

        text-align:
            center;
    }


    .nvtr-hero-content {

        max-width:
            700px;

        margin:
            0 auto;
    }


    .nvtr-hero-actions {

        justify-content:
            center;
    }


    .nvtr-logo-area {

        min-height:
            330px;

        margin-top:
            5px;
    }


    .nvtr-logo-card {

        width:
            290px;

        height:
            290px;
    }


    .nvtr-school-logo {

        width:
            190px;

        height:
            190px;
    }


    .nvtr-logo-glow {

        width:
            310px;

        height:
            310px;
    }


    .nvtr-introduction {

        grid-template-columns:
            1fr;
    }


    .nvtr-section-heading {

        align-items:
            flex-start;
    }

}


/* ============================================================
   33. MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .nvtr-hero {

        width:
            calc(100% - 14px);

        margin:
            4px auto 0;

        border-radius:
            21px;
    }


    .nvtr-hero-inner {

        padding:
            34px 18px 38px;
    }


    .nvtr-leaf.leaf-1 {

        left:
            25px;

        top:
            25px;
    }


    .nvtr-leaf.leaf-2 {

        left:
            48px;

        top:
            50px;
    }


    .nvtr-hero h1 {

        font-size:
            39px;

        line-height:
            1.04;

        letter-spacing:
            -0.7px;
    }


    .nvtr-hero-subtitle {

        font-size:
            18px;
    }


    .nvtr-hero-description {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .nvtr-hero-actions {

        flex-direction:
            column;

        width:
            100%;
    }


    .nvtr-primary-btn,
    .nvtr-secondary-btn {

        width:
            100%;
    }


    .nvtr-logo-area {

        min-height:
            250px;
    }


    .nvtr-logo-card {

        width:
            225px;

        height:
            225px;

        border-width:
            6px;

        padding:
            16px;
    }


    .nvtr-school-logo {

        width:
            155px;

        height:
            155px;
    }


    .nvtr-logo-glow {

        width:
            245px;

        height:
            245px;
    }


    .nvtr-logo-card::before {

        inset:
            10px;
    }


    .nvtr-welcome {

        width:
            calc(100% - 14px);

        margin-top:
            18px;

        padding:
            19px;

        align-items:
            flex-start;
    }


    .nvtr-welcome-icon {

        width:
            42px;

        height:
            42px;

        font-size:
            18px;
    }


    .nvtr-welcome h2 {

        font-size:
            17px;
    }


    .nvtr-welcome p {

        font-size:
            12px;
    }


    .nvtr-section {

        width:
            calc(100% - 14px);

        margin-top:
            37px;
    }


    .nvtr-section-heading h2 {

        font-size:
            22px;
    }


    .nvtr-section-heading p {

        font-size:
            12px;
    }


    .nvtr-heading-decoration {

        display:
            none;
    }


    .nvtr-function-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;
    }


    .nvtr-function-card {

        min-height:
            175px;

        padding:
            20px;
    }


    .nvtr-intro-main {

        padding:
            22px;
    }


    .nvtr-intro-main h2 {

        font-size:
            21px;
    }


    .nvtr-intro-main p {

        font-size:
            13px;

        line-height:
            1.7;
    }


    .nvtr-values-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            10px;
    }


    .nvtr-value-card {

        padding:
            18px 9px;
    }


    .nvtr-value-icon {

        width:
            45px;

        height:
            45px;

        font-size:
            18px;
    }


    .nvtr-value-card h3 {

        font-size:
            14px;
    }


    .nvtr-value-card p {

        font-size:
            10.5px;
    }


    .nvtr-quote {

        width:
            calc(100% - 14px);

        margin-top:
            35px;

        padding:
            27px 20px;
    }


    .nvtr-quote p {

        font-size:
            16px;
    }


    .nvtr-view-only {

        width:
            calc(100% - 14px);

        padding:
            14px 16px;
    }


    .nvtr-home-footer {

        width:
            calc(100% - 14px);

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            38px;
    }

}


/* ============================================================
   34. MÀN HÌNH RẤT NHỎ
   ============================================================ */

@media (max-width: 380px) {

    .nvtr-hero h1 {

        font-size:
            34px;
    }


    .nvtr-logo-card {

        width:
            200px;

        height:
            200px;
    }


    .nvtr-school-logo {

        width:
            140px;

        height:
            140px;
    }


    .nvtr-logo-glow {

        width:
            220px;

        height:
            220px;
    }


    .nvtr-values-grid {

        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   35. TRÌNH DUYỆT CŨ / BOOTSTRAP
   ============================================================ */

.nvtr-dashboard .btn-primary {

    background:
        var(--green) !important;

    border-color:
        var(--green) !important;
}


.nvtr-dashboard .btn-primary:hover {

    background:
        var(--green-dark) !important;

    border-color:
        var(--green-dark) !important;
}


/* ============================================================
   36. ACCESSIBILITY
   ============================================================ */

.nvtr-dashboard a:focus-visible {

    outline:
        3px solid rgba(99,155,124,.35);

    outline-offset:
        3px;
}


@media (prefers-reduced-motion: reduce) {

    .nvtr-dashboard * {

        transition:
            none !important;
    }

}


/* ============================================================
   END
   ============================================================ */