/* ============= OVERVIEW MODERN ================ */
.overview-modern-section {
    /* ปรับเป็น AASP Theme */
    --overview-primary: #D1236B;          /* aasp-primary */
    --overview-primary-dark: #A31250;     /* aasp-primary-dark */
    --overview-primary-soft: #FDEBF3;     /* aasp-primary-light */
    --overview-text: #1E1A47;             /* aasp-indigo-dark */
    --overview-body: #2D2769;             /* aasp-indigo */
    --overview-muted: #6B668A;            /* ปรับสีเทาให้กลืนกับ indigo */
    --overview-border: #E5CDD8;           /* ปรับโทนขอบให้เข้ากับสีชมพู */
    --overview-bg: #FFFFFF;
}
/* ============ Header ================ */
.overview-modern-header { max-width: 720px; margin-left: auto; margin-right: auto; }
.overview-modern-subtitle { margin-top: 4px; color: var(--overview-muted); font-size: 15px; }
/* ============== Main Card ================= */
.overview-modern-card { overflow: hidden; background: var(--overview-bg); border: 1px solid var(--overview-border); border-left: 5px solid var(--overview-primary); border-radius: 20px; box-shadow: 0 10px 35px rgba(45, 39, 105, 0.07); }
/* ============ Row =============== */
.overview-modern-row { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.6fr); align-items: center; min-height: 88px; border-bottom: 1px solid var(--overview-border); transition: background-color .2s ease; }
.overview-modern-row:last-child { border-bottom: 0; }
.overview-modern-row:hover { background: #FFF5F9; } /* สีชมพูอ่อนมากเมื่อโฮเวอร์ */
.overview-modern-row-top { align-items: flex-start; }
/* ============== Label ================= */
.overview-modern-label { display: flex; align-items: center; gap: 12px; padding: 22px 26px; color: var(--overview-text); font-size: 16px; font-weight: 700; }
.overview-modern-icon { width: 38px; height: 38px; min-width: 38px; display: flex; align-items: center; justify-content: center; background: var(--overview-primary-soft); color: var(--overview-primary); border-radius: 11px; font-size: 17px; }
/* =========== Content =========== */
.overview-modern-content { padding: 22px 26px; color: var(--overview-body); font-size: 16px; line-height: 1.7; border-left: 1px solid var(--overview-border); overflow-wrap: anywhere; }
/* =========== Host ============ */
.overview-host-block { margin-bottom: 18px; }
.overview-host-title { margin-bottom: 6px; color: var(--overview-text); font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.overview-host-list { display: flex; flex-direction: column; gap: 5px; }
.overview-host-item { color: var(--overview-body); font-size: 15px; }
/* =============== Logos ============== */
.overview-logo-list { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.overview-logo-card { display: flex; align-items: center; justify-content: center; min-width: 110px; height: 92px; padding: 12px 16px; background: #ffffff; border: 1px solid var(--overview-border); border-radius: 13px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.overview-logo-card:hover { transform: translateY(-2px); border-color: var(--overview-primary); box-shadow: 0 8px 22px rgba(45, 39, 105, .09); }
.overview-logo-card img { display: block; width: auto; max-width: 145px; max-height: 64px; object-fit: contain; }
/* ============= Theme ================= */
.overview-theme-box { padding: 15px 17px; color: var(--overview-text); background: linear-gradient( 135deg, #FFFDF9 0%, #FDEBF3 100% ); border: 1px solid var(--overview-border); border-radius: 12px; font-weight: 500; }
/* ============== Contact =============== */
.overview-contact-list { display: flex; flex-wrap: wrap; gap: 10px; }
.overview-contact-item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; color: var(--overview-primary); background: var(--overview-primary-soft); border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.overview-contact-item:hover { color: #ffffff; background: var(--overview-primary); border-color: var(--overview-primary); }
/* ============== TABLET =============== */
@media (max-width: 991.98px) {
    .overview-modern-row { grid-template-columns: minmax(190px, .65fr) minmax(0, 1.5fr); }
    .overview-modern-label, .overview-modern-content { padding: 20px; }
}
/* ========== MOBILE ============= */
@media (max-width: 767.98px) {
    .overview-modern-card { border-radius: 16px; }
    /* เปลี่ยน 2 columns เป็น 1 column */
    .overview-modern-row { display: block; min-height: 0; }
    .overview-modern-row:hover { background: transparent; }
    /* Label */
    .overview-modern-label { padding: 18px 18px 5px; gap: 10px; font-size: 15px; }
    .overview-modern-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; font-size: 15px; }
    /* Content */
    .overview-modern-content { padding: 8px 18px 20px 62px; border-left: 0; font-size: 14px; line-height: 1.65; }
    /* Host */
    .overview-host-title { font-size: 11px; }
    .overview-host-item { font-size: 14px; }
    /* Logos */
    .overview-logo-list { gap: 8px; }
    .overview-logo-card { min-width: 92px; height: 76px; padding: 10px 12px; }
    .overview-logo-card img { max-width: 110px; max-height: 52px; }
    /* Contact */
    .overview-contact-list { display: block; }
    .overview-contact-item { display: flex; width: 100%; margin-bottom: 8px; overflow-wrap: anywhere; }
}
/* =============== SMALL MOBILE =================== */
@media (max-width: 575.98px) {
    .overview-modern-card { border-left-width: 4px; }
    .overview-modern-label { padding-left: 14px; padding-right: 14px; }
    .overview-modern-content { padding-left: 58px; padding-right: 14px; }
    .overview-theme-box { padding: 13px; }
}