/**
 * BYL Y Bạ Mệnh Lý & Tật Bệnh Toàn Diện Pro
 * Theme: Medical Luxury High-Contrast (Emerald Green, Gold & Ruby Red)
 * Tối ưu trải nghiệm: Mobile & Tablet First
 */

/* ================= DISCLAIMER BANNER ================= */
.byl-sk-disclaimer-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fffbeb;
    border: 2px solid #f59e0b;
    border-radius: 14px;
    padding: 16px 20px;
    margin: 22px auto 26px;
    max-width: 860px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}
.byl-sk-disclaimer-icon {
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
}
.byl-sk-disclaimer-content {
    font-size: 14px;
    line-height: 1.6;
    color: #78350f;
}
.byl-sk-disclaimer-content strong {
    color: #b45309;
    font-weight: 800;
    display: inline-block;
    margin-right: 4px;
}

/* ================= TỐI ƯU KHOẢNG CÁCH HERO VÀ BƯỚC 1 ================= */
.byl-sk .byl-sk-hero {
    padding-bottom: 24px !important;
}
.byl-sk .byl-sk-hero .byl-sk-disclaimer-banner {
    margin: 18px auto 18px;
}
.byl-sk #bylSkForm.byl-tv-sec {
    padding-top: 16px !important;
    padding-bottom: 48px;
}
.byl-sk #bylSkForm .byl-tv-head {
    margin-bottom: 20px;
}

/* ================= RESULT CONTAINER ================= */
.byl-sk-result {
    max-width: 1060px;
    margin: 32px auto;
    padding: 0 16px;
}

.byl-sk-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 26px 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    position: relative;
}

/* HEADER CARD (HỒ SƠ BỆNH NHÂN) */
.byl-sk-header-card {
    background: linear-gradient(135deg, #064e3b 0%, #0f766e 100%);
    color: #ffffff;
    border: none;
    border-radius: 22px;
    padding: 32px 36px;
    box-shadow: 0 12px 32px rgba(6, 78, 59, 0.28);
}
.byl-sk-header-card h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}
.byl-sk-header-card .byl-sk-patient-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    font-size: 14px;
    color: #d1fae5;
}
.byl-sk-header-card .byl-sk-patient-info span {
    background: rgba(255, 255, 255, 0.16);
    padding: 5px 14px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    font-weight: 600;
}
.byl-sk-patient-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 22px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
}
.byl-sk-pillar-col .p-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #a7f3d0;
    font-weight: 700;
}
.byl-sk-pillar-col .p-val {
    font-size: 18px;
    font-weight: 900;
    color: #ffffff;
    margin-top: 4px;
}

/* OVERALL SCORE & LEVEL BADGE */
.byl-sk-score-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    color: #1e293b;
    border-radius: 16px;
    padding: 18px 24px;
    margin-top: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.byl-sk-score-num {
    font-size: 36px;
    font-weight: 900;
    color: #059669;
    line-height: 1;
}
.byl-sk-score-num small {
    font-size: 17px;
    color: #64748b;
    font-weight: 600;
}
.byl-sk-badge-lvl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
}
.byl-sk-badge-lvl-1 { background: #dcfce7; color: #15803d; border: 1.5px solid #86efac; }
.byl-sk-badge-lvl-2 { background: #fef3c7; color: #b45309; border: 1.5px solid #fcd34d; }
.byl-sk-badge-lvl-3 { background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; }

/* ================= CHAPTER HEADERS ================= */
.byl-sk-chap-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f1f5f9;
}
.byl-sk-chap-head .chap-ico {
    font-size: 28px;
    line-height: 1;
}
.byl-sk-chap-head h3 {
    font-size: 21px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}
.byl-sk-chap-head .chap-tag {
    font-size: 11.5px;
    background: #e2e8f0;
    color: #334155;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin-left: auto;
    letter-spacing: 0.5px;
}

/* ================= CHƯƠNG 1: MEDICAL BENTO CARDS 2 CỘT ================= */
.byl-sk-concept-explainer {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 22px;
}
.byl-sk-concept-head {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 12px;
}
.byl-sk-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.exp-box {
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid transparent;
}
.exp-box-blue {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}
.exp-box-green {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}
.exp-box-red {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.exp-title {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 6px;
}
.exp-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: #334155;
}

.byl-sk-elements-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}
.byl-sk-elem-metric {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 10px;
    text-align: center;
    transition: all 0.2s ease;
}
.byl-sk-elem-metric.is-khuyet { border-color: #6366f1; background: #eef2ff; }
.byl-sk-elem-metric.is-bat-cap { border-color: #3b82f6; background: #eff6ff; }
.byl-sk-elem-metric.is-can-bang { border-color: #10b981; background: #f0fdf4; }
.byl-sk-elem-metric.is-thai-qua { border-color: #f59e0b; background: #fffbeb; }
.byl-sk-elem-metric.is-thai-qua-nang { border-color: #ef4444; background: #fef2f2; }

.byl-sk-elem-metric .m-name { font-size: 15px; font-weight: 900; color: #0f172a; margin-bottom: 2px; }
.byl-sk-elem-metric .m-organs { font-size: 11.5px; color: #64748b; margin: 4px 0 8px; line-height: 1.35; }
.byl-sk-elem-metric .m-pct { font-size: 20px; font-weight: 900; color: #0f172a; }
.byl-sk-elem-metric .m-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    margin-top: 4px;
    white-space: nowrap;
}
.is-khuyet .m-tag { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.is-bat-cap .m-tag { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.is-can-bang .m-tag { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.is-thai-qua .m-tag { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.is-thai-qua-nang .m-tag { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ORGAN DETAIL CARD 2 CỘT */
.byl-sk-organ-card-bento {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 20px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
}
.byl-sk-organ-card-bento:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
.byl-sk-organ-card-bento.deficient {
    border-color: #93c5fd;
    border-left: 6px solid #2563eb;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}
.byl-sk-organ-card-bento.excess {
    border-color: #fca5a5;
    border-left: 6px solid #dc2626;
    background: linear-gradient(180deg, #ffffff 0%, #fffbfb 100%);
}

.byl-sk-organ-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px 14px;
    border: 1px solid #e2e8f0;
}
.byl-sk-organ-card-bento.deficient .byl-sk-organ-left {
    background: #eff6ff;
    border-color: #dbeafe;
}
.byl-sk-organ-card-bento.excess .byl-sk-organ-left {
    background: #fef2f2;
    border-color: #fee2e2;
}
.byl-sk-organ-icon-big {
    font-size: 52px;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
}
.byl-sk-organ-name-big {
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}
.byl-sk-organ-parts-tag {
    font-size: 12px;
    color: #475569;
    margin: 6px 0 12px;
    line-height: 1.4;
}
.byl-sk-organ-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.byl-sk-organ-card-bento.deficient .byl-sk-organ-badge {
    background: #2563eb;
    color: #ffffff;
}
.byl-sk-organ-card-bento.excess .byl-sk-organ-badge {
    background: #dc2626;
    color: #ffffff;
}

.byl-sk-organ-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.byl-sk-organ-title-h4 {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}
.byl-sk-organ-info-block {
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}
.byl-sk-organ-info-block strong {
    color: #0f172a;
    font-weight: 800;
}

/* THỜI ĐIỂM DỄ PHÁT BỆNH HIGHLIGHT */
.byl-sk-organ-period-box {
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #78350f;
}
.byl-sk-organ-period-box strong {
    color: #b45309;
    font-weight: 800;
}

/* ================= CHƯƠNG 2: 4 KHOANG THÂN THỂ ================= */
.byl-sk-body-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    margin-top: 14px;
}
.byl-sk-body-svg-box {
    text-align: center;
}
.byl-sk-body-svg {
    max-width: 210px;
    height: auto;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.08));
}
.byl-sk-zone-path {
    cursor: pointer;
    transition: all 0.25s ease;
}
.byl-sk-zone-path:hover,
.byl-sk-zone-path.active {
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(16, 185, 129, 0.85));
    stroke: #059669;
    stroke-width: 3px;
}
.byl-sk-body-zones-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.byl-sk-zone-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.byl-sk-zone-card:hover,
.byl-sk-zone-card.active {
    border-color: #059669;
    background: #f0fdf4;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.12);
    transform: translateX(4px);
}
.byl-sk-zone-card.is-danger {
    border-left: 5px solid #ef4444;
}
.byl-sk-zone-card.is-warn {
    border-left: 5px solid #f59e0b;
}
.byl-sk-zone-card.is-safe {
    border-left: 5px solid #10b981;
}
.byl-sk-zone-badge-wrap {
    margin-top: 6px;
    margin-bottom: 4px;
}
.byl-sk-zone-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-block;
}
.byl-sk-zone-badge.is-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.byl-sk-zone-badge.is-warn {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.byl-sk-zone-badge.is-safe {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.byl-sk-zone-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.byl-sk-zone-card-pillar {
    font-size: 12px;
    background: #e2e8f0;
    color: #334155;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 800;
}
.byl-sk-zone-card-body {
    font-size: 13.5px;
    color: #475569;
    margin-top: 8px;
    line-height: 1.55;
}
.byl-sk-zone-row {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.55;
}
.byl-sk-zone-timing-box {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fffbeb;
    border-left: 3.5px solid #f59e0b;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #78350f;
}
.byl-sk-zone-advice {
    padding: 8px 12px;
    background: #f0fdf4;
    border-left: 3.5px solid #10b981;
    border-radius: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #14532d;
}

/* ================= CHƯƠNG 3: 7 DẤU HIỆU CẢNH BÁO SỨC KHỎE ================= */
.byl-sk-the-tinh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px;
}
.byl-sk-the-tinh-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}
.byl-sk-the-tinh-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}
.byl-sk-the-tinh-card.warn {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
}
.byl-sk-the-tinh-card.danger {
    border-color: #ef4444;
    background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.08);
}
.byl-sk-the-tinh-timing-box {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #334155;
}
.byl-sk-the-tinh-title {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.byl-sk-the-tinh-badge {
    font-size: 11.5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.byl-sk-the-tinh-card .byl-sk-the-tinh-badge.normal {
    background: #dcfce7;
    color: #166534;
}
.byl-sk-the-tinh-card.warn .byl-sk-the-tinh-badge {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
}
.byl-sk-the-tinh-card.danger .byl-sk-the-tinh-badge {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}
.byl-sk-the-tinh-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    flex-grow: 1;
}

/* ================= CHƯƠNG 4: BIỂU ĐỒ HÌNH SIN & TIMELINE 10 NĂM ================= */
.byl-sk-chart-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.byl-sk-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.byl-sk-chart-legend {
    display: flex;
    gap: 16px;
    font-size: 12.5px;
    font-weight: 700;
}
.byl-sk-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.byl-sk-dot-green { width: 10px; height: 10px; border-radius: 50%; background: #10b981; }
.byl-sk-dot-amber { width: 10px; height: 10px; border-radius: 50%; background: #f59e0b; }
.byl-sk-dot-red { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }

.byl-sk-wave-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.byl-sk-chart-node {
    cursor: pointer;
    transition: transform 0.2s ease;
}
.byl-sk-chart-node:hover {
    transform: scale(1.25);
}

/* YEAR CARDS GRID */
.byl-sk-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.byl-sk-year-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.25s ease;
}
.byl-sk-year-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.byl-sk-year-card.lvl-1 {
    border-color: #86efac;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}
.byl-sk-year-card.lvl-2 {
    border-color: #fcd34d;
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}
.byl-sk-year-card.lvl-3 {
    border-color: #f87171;
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.byl-sk-year-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.byl-sk-year-title {
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
}
.byl-sk-year-title span {
    font-size: 13px;
    color: #475569;
    font-weight: 700;
    display: block;
    margin-top: 3px;
}
.byl-sk-year-badge {
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.lvl-1 .byl-sk-year-badge { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.lvl-2 .byl-sk-year-badge { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.lvl-3 .byl-sk-year-badge { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; }

.byl-sk-year-score {
    font-size: 13.5px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #334155;
}
.byl-sk-year-score strong {
    font-size: 19px;
    font-weight: 900;
}
.lvl-1 .byl-sk-year-score strong { color: #16a34a; }
.lvl-2 .byl-sk-year-score strong { color: #d97706; }
.lvl-3 .byl-sk-year-score strong { color: #dc2626; }

.byl-sk-year-highlights {
    font-size: 13px;
    line-height: 1.55;
    color: #475569;
    margin-bottom: 12px;
    flex-grow: 1;
}
.byl-sk-year-highlights li {
    margin-bottom: 5px;
}
.byl-sk-year-advice {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    color: #334155;
    border-left: 3.5px solid #cbd5e1;
}
.lvl-1 .byl-sk-year-advice { border-color: #22c55e; }
.lvl-2 .byl-sk-year-advice { border-color: #f59e0b; }
.lvl-3 .byl-sk-year-advice { border-color: #ef4444; background: #fff1f2; }

/* ================= CHƯƠNG 5: CHỦ ĐỘNG ỨNG TƯỢNG ================= */
.byl-sk-remedy-card {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 20px;
}
.byl-sk-remedy-card h4 {
    margin: 0 0 12px;
    color: #166534;
    font-size: 17.5px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}
.byl-sk-remedy-list {
    margin: 0;
    padding-left: 20px;
    color: #14532d;
    font-size: 14px;
    line-height: 1.65;
}
.byl-sk-remedy-list li {
    margin-bottom: 10px;
}

/* ================= ACTIONS ================= */
.byl-sk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 36px 0 24px;
}

/* HIGHLIGHT ON CLICK FROM CHART */
.byl-sk-year-card.highlight-target {
    animation: bylGlow 1.5s ease-out;
}
@keyframes bylGlow {
    0% { transform: scale(1.04); box-shadow: 0 0 20px rgba(5, 150, 105, 0.4); }
    100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
}

/* ================= RESPONSIVE (MOBILE & TABLET) ================= */
@media (max-width: 900px) {
    .byl-sk-explainer-grid {
        grid-template-columns: 1fr;
    }
    .byl-sk-organ-card-bento {
        grid-template-columns: 1fr;
    }
    .byl-sk-body-container {
        grid-template-columns: 1fr;
    }
    .byl-sk-body-svg-box {
        margin-bottom: 12px;
    }
}

@media (max-width: 640px) {
    .byl-sk-card {
        padding: 20px 16px;
    }
    .byl-sk-header-card {
        padding: 22px 18px;
    }
    .byl-sk-patient-pillars {
        grid-template-columns: repeat(2, 1fr);
    }
    .byl-sk-elements-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .byl-sk-score-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .byl-sk-the-tinh-grid {
        grid-template-columns: 1fr;
    }
    .byl-sk-timeline-grid {
        grid-template-columns: 1fr;
    }
}