/* ==========================================================================
   MC TYPOGRAPHY COMPONENT - MUI & FLUID DESIGN
   ========================================================================== */

/* Biến CSS nền tảng */
:root {
    --mc-font-primary: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --mc-font-serif: 'Merriweather', 'Playfair Display', serif;
    
    --mc-text-ink: #111827;     /* Chữ chính - Dark/Ink */
    --mc-text-muted: #6b7280;   /* Chữ phụ */
    --mc-text-accent: #3b82f6;  /* Điểm nhấn */
    --mc-text-white: #ffffff;
    --mc-text-gradient-bg: linear-gradient(135deg, #70db84 0%, #38bdf8 100%);
    --mc-neon-color: rgba(59, 130, 246, 0.5); /* Màu neon mặc định */
}

.mc-text {
    margin: 0;
    padding: 0;
    color: var(--mc-text-current-color, var(--mc-text-ink));
    font-family: var(--mc-font-family, var(--mc-font-primary));
}

/* --------------------------------------------------------------------------
   1. VARIANTS (Fluid Responsive Size)
   Công thức clamp(min, tính_toán_vw, max) - Tự động co giãn theo màn hình
----------------------------------------------------------------------------- */
.mc-text-variant-display-hero { font-size: clamp(3rem, 5vw + 1rem, 5rem); line-height: 1.07; font-weight: 800; letter-spacing: -0.052em; }
.mc-text-variant-heading-1    { font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.03em; }
.mc-text-variant-heading-2    { font-size: clamp(2rem, 3vw + 0.5rem, 2.5rem); line-height: 1.18; font-weight: 700; letter-spacing: -0.03em; }
.mc-text-variant-heading-3    { font-size: clamp(1.5rem, 2vw + 0.5rem, 1.75rem); line-height: 1.18; font-weight: 600; letter-spacing: -0.03em; }
.mc-text-variant-lead         { font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem); line-height: 1.45; font-weight: 400; color: var(--mc-text-muted); }
.mc-text-variant-body         { font-size: 1rem; line-height: 1.7; font-weight: 400; }
.mc-text-variant-body-sm      { font-size: 0.875rem; line-height: 1.7; font-weight: 400; }
.mc-text-variant-eyebrow      { font-size: 0.75rem; line-height: 1.45; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.mc-text-variant-quote        { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); line-height: 1.7; font-style: italic; border-left: 4px solid var(--mc-text-accent); padding-left: 1rem; }
.mc-text-variant-caption      { font-size: 0.75rem; line-height: 1.45; font-weight: 400; color: var(--mc-text-muted); }

/* --------------------------------------------------------------------------
   2. FONT FAMILY & WEIGHT
----------------------------------------------------------------------------- */
.mc-text-family-primary { --mc-font-family: var(--mc-font-primary); }
.mc-text-family-serif   { --mc-font-family: var(--mc-font-serif); }

.mc-text-weight-400 { font-weight: 400 !important; }
.mc-text-weight-500 { font-weight: 500 !important; }
.mc-text-weight-600 { font-weight: 600 !important; }
.mc-text-weight-700 { font-weight: 700 !important; }
.mc-text-weight-800 { font-weight: 800 !important; }

/* --------------------------------------------------------------------------
   3. LINE HEIGHT (Leading) & LETTER SPACING (Tracking)
----------------------------------------------------------------------------- */
.mc-text-leading-tightest { line-height: 1.07 !important; }
.mc-text-leading-tight    { line-height: 1.18 !important; }
.mc-text-leading-snug     { line-height: 1.45 !important; }
.mc-text-leading-relaxed  { line-height: 1.7 !important; }
.mc-text-leading-loose    { line-height: 1.8 !important; }

.mc-text-tracking-tightest { letter-spacing: -0.052em !important; }
.mc-text-tracking-tight    { letter-spacing: -0.03em !important; }
.mc-text-tracking-normal   { letter-spacing: 0 !important; }
.mc-text-tracking-wide     { letter-spacing: 0.08em !important; }
.mc-text-tracking-widest   { letter-spacing: 0.14em !important; }

/* --------------------------------------------------------------------------
   4. TRANSFORMS & STYLES & ALIGN
----------------------------------------------------------------------------- */
.mc-text-transform-uppercase  { text-transform: uppercase !important; }
.mc-text-transform-capitalize { text-transform: capitalize !important; }
.mc-text-transform-lowercase  { text-transform: lowercase !important; }

.mc-text-style-normal { font-style: normal !important; }
.mc-text-style-italic { font-style: italic !important; }

.mc-text-align-left    { text-align: left; }
.mc-text-align-center  { text-align: center; }
.mc-text-align-right   { text-align: right; }
.mc-text-align-justify { text-align: justify; }

/* --------------------------------------------------------------------------
   5. COLOR THEMES
----------------------------------------------------------------------------- */
.mc-text-color-ink     { --mc-text-current-color: var(--mc-text-ink); }
.mc-text-color-muted   { --mc-text-current-color: var(--mc-text-muted); }
.mc-text-color-accent  { --mc-text-current-color: var(--mc-text-accent); }
.mc-text-color-white   { --mc-text-current-color: var(--mc-text-white); }
/* Color gradient được xử lý riêng trong phần effect bên dưới */

/* --------------------------------------------------------------------------
   6. TEXT EFFECTS (Sức mạnh của UI)
----------------------------------------------------------------------------- */
/* Phủ dải màu dập nổi */
.mc-text-effect-gradient_clip,
.mc-text-color-gradient {
    background-image: var(--mc-text-gradient-bg);
    background-size: 100%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Phát sáng nhẹ dạng đèn neon */
.mc-text-effect-neon_glow {
    text-shadow: 0 0 10px var(--mc-neon-color), 
                 0 0 20px var(--mc-neon-color);
}

/* Dải màu phát quang gạch chân chữ nổi bật */
.mc-text-effect-underline_glow {
    position: relative;
    display: inline-block; /* Bắt buộc để underline bám theo text */
    z-index: 1;
}
.mc-text-effect-underline_glow::after {
    content: '';
    position: absolute;
    bottom: 0.1em;
    left: 0;
    width: 100%;
    height: 0.1em;
    background: var(--mc-text-gradient-bg);
    opacity: 0.5;
    z-index: -1;
    filter: blur(2px);
/*     transition: opacity 0.3s ease, filter 0.3s ease; */
}
/* .mc-text-effect-underline_glow:hover::after {
    opacity: 0.8;
    filter: blur(4px);
} */

/* --------------------------------------------------------------------------
   7. TRUNCATE (Line Clamp)
----------------------------------------------------------------------------- */
.mc-truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--mc-line-clamp, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   5. COLOR THEMES
----------------------------------------------------------------------------- */
/* Vừa cập nhật biến CSS (cho các effect), vừa ép màu trực tiếp (bảo vệ khỏi theme) */
.mc-text-color-ink     { 
    --mc-text-current-color: var(--mc-text-ink); 
    color: var(--mc-text-current-color) !important; 
}
.mc-text-color-muted   { 
    --mc-text-current-color: var(--mc-text-muted); 
    color: var(--mc-text-current-color) !important; 
}
.mc-text-color-accent  { 
    --mc-text-current-color: var(--mc-text-accent); 
    color: var(--mc-text-current-color) !important; 
}
.mc-text-color-white   { 
    --mc-text-current-color: var(--mc-text-white); 
    color: var(--mc-text-current-color) !important; 
}