/* ====================================================================
   STANDARD TYPOGRAPHY - CHUẨN HÓA FONT
   Sử dụng Times New Roman và font chuẩn Mỹ
   ==================================================================== */

/* Font Stack chuẩn Mỹ */
:root {
    /* Serif - cho Tiêu đề và Body chính */
    --font-serif-standard: "Times New Roman", Times, Georgia, serif;
    
    /* Sans-serif - cho Giới thiệu và Link */
    --font-sans-standard: "Arial", "Helvetica Neue", Helvetica, sans-serif;
    
    /* Monospace - cho code (nếu cần) */
    --font-mono-standard: "Courier New", Courier, monospace;
}

/* ====================================================================
   NHÓM 1: TIÊU ĐỀ (Heading/Title)
   Sử dụng Times New Roman - Bold
   ==================================================================== */
.text-title,
h1.text-title,
h2.text-title,
h3.text-title,
h4.text-title,
h5.text-title,
h6.text-title {
    font-family: var(--font-serif-standard);
    font-weight: 700; /* Bold */
    font-size: 22.8px;
    line-height: 1.5; /* 34.2px / 22.8px = 1.5 */
    color: #3575d3;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Size variants cho Tiêu đề */
.text-title-xl {
    font-size: 28px;
    line-height: 1.4;
}

.text-title-lg {
    font-size: 24px;
    line-height: 1.45;
}

.text-title-md {
    font-size: 22.8px;
    line-height: 1.5;
}

.text-title-sm {
    font-size: 20px;
    line-height: 1.5;
}

/* ====================================================================
   NHÓM 2: GIỚI THIỆU (Introduction/Excerpt)
   Sử dụng Arial - Regular
   ==================================================================== */
.text-intro,
p.text-intro,
.text-intro p {
    font-family: var(--font-sans-standard);
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 1.43; /* ~20px / 14px */
    color: #666;
}

.text-intro-lg {
    font-size: 16px;
    line-height: 1.5;
}

.text-intro-sm {
    font-size: 12px;
    line-height: 1.4;
}

/* ====================================================================
   NHÓM 3: BODY (Nội dung chính)
   Sử dụng Times New Roman - Regular
   ==================================================================== */
.text-body,
p.text-body,
.text-body p,
.text-body li {
    font-family: var(--font-serif-standard);
    font-weight: 400; /* Regular */
    font-size: 16px;
    line-height: 1.6; /* 25.6px / 16px */
    color: #000;
}

.text-body-md {
    font-size: 16px;
    line-height: 1.6;
}

.text-body-sm {
    font-size: 14px;
    line-height: 1.57; /* 22px / 14px */
}

/* List items trong Body */
.text-body ul li,
.text-body ol li {
    font-family: var(--font-serif-standard);
    font-weight: 400;
    font-size: 16px;
    line-height: 2; /* 32px / 16px */
    color: #000;
    text-transform: capitalize;
}

/* ====================================================================
   NHÓM 4: LINK (Liên kết)
   Sử dụng Arial - Regular, có hover
   ==================================================================== */
.text-link,
a.text-link,
.text-link a {
    font-family: var(--font-sans-standard);
    font-weight: 400; /* Regular */
    font-size: 14px;
    line-height: 1.43;
    color: #3575d3;
    text-decoration: none;
    transition: color 0.2s ease;
}

.text-link:hover,
a.text-link:hover,
.text-link a:hover {
    color: #0398c9;
    text-decoration: underline;
}

.text-link-lg {
    font-size: 16px;
    line-height: 1.5;
}

.text-link-sm {
    font-size: 12px;
    line-height: 1.4;
}

/* ====================================================================
   ÁP DỤNG CHO 3 HỘP "NỔI BẬT" (section__group)
   ==================================================================== */

/* Tiêu đề hộp - Giảm xuống 90% */
.section__group .box__heading h3 {
    font-family: var(--font-serif-standard) !important;
    font-weight: 700 !important;
    font-size: 21px !important; /* 22.8px * 0.9 = 20.52px */
    line-height: 1.5 !important;
    color: #3575d3 !important;
    text-transform: uppercase !important;
}

/* Nội dung chính (list items) - Giảm xuống 90% */
.section__group .box__content ul.item li {
    font-family: var(--font-serif-standard) !important;
    font-weight: 400 !important;
    font-size: 15px !important; /* 16px * 0.9 = 14.4px */
    line-height: 2 !important; /* 28.8px / 14.4px = 2 */
    color: #000 !important;
    text-transform: capitalize !important;
}

/* Tabs (links) - Giảm xuống 90% */
.section__group .box__tabs ul li a {
    font-family: var(--font-sans-standard) !important;
    font-weight: 400 !important;
    font-size: 13px !important; /* 14px * 0.9 = 12.6px */
    line-height: 2.86 !important; /* 36px / 12.6px ≈ 2.86 */
    color: #fff !important;
    text-transform: capitalize !important;
}

/* ====================================================================
   RESPONSIVE - Tùy chỉnh cho mobile
   ==================================================================== */
@media (max-width: 768px) {
    .text-title,
    .section__group .box__heading h3 {
        font-size: 19px !important; /* 20.52px * 0.9 = 18.47px */
        line-height: 1.4 !important;
    }
    
    .text-body,
    .section__group .box__content ul.item li {
        font-size: 13px !important; /* 14.4px * 0.9 = 12.96px */
        line-height: 1.8 !important;
    }
    
    .text-link,
    .section__group .box__tabs ul li a {
        font-size: 12px !important; /* 12.6px * 0.9 = 11.34px */
    }
}

/* ====================================================================
   UTILITY CLASSES - Tiện ích
   ==================================================================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}