/*
 * Page stylesheet for Gioi thieu
 * Loads AFTER style.css (dep mona-child-style) → override được.
 *
 * Task #33 — feedback #4 + #5:
 *   #4 Con số nổi bật: gap +20% (18px → 21.6px), ô +40% (padding/num/icon), nhảy số.
 *   #5 Sứ mệnh/Tầm nhìn/Giá trị: mỗi mục 1 hàng ảnh-trái/nội-dung-phải,
 *      tiêu đề xanh thương hiệu, nội dung đen + lớn hơn, slide ngang khi cuộn.
 */

/* =====================================================================
   FEEDBACK #4 / Task #46 #1 — Con số nổi bật ĐỒNG BỘ trang chủ.
   Ô nền XANH LÁ ĐẬM vân marble (giống .home-stat), vòng tròn icon viền
   vàng ánh kim, hỗ trợ icon dạng ẢNH (.has-img). Grid 4 cột (2 cột mobile).
   ===================================================================== */
.about-stats-section { margin-top: 30px; }

.about-stats-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.about-stat-card {
    text-align: center;
    color: #fff;
    padding: 30px 16px;
    border-radius: 16px;
    background-color: #073d2c;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiMwNzNkMmMiLz48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMDkgMC4wMTYiIG51bU9jdGF2ZXM9IjYiIHNlZWQ9IjExIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiByZXN1bHQ9Im4iLz48ZmVDb2xvck1hdHJpeCBpbj0ibiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEuMiAwIDAgMCAtMC40NiIgcmVzdWx0PSJtIi8+PGZlRmxvb2QgZmxvb2QtY29sb3I9IiMxYzhhNjMiIHJlc3VsdD0iYyIvPjxmZUNvbXBvc2l0ZSBpbj0iYyIgaW4yPSJtIiBvcGVyYXRvcj0iaW4iLz48L2ZpbHRlcj48ZmlsdGVyIGlkPSJiIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC4wMiAwLjA1IiBudW1PY3RhdmVzPSI3IiBzZWVkPSIyMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuMiIvPjxmZUNvbG9yTWF0cml4IGluPSJuMiIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDMuMiAwIDAgMCAtMi4zNSIgcmVzdWx0PSJtMiIvPjxmZUZsb29kIGZsb29kLWNvbG9yPSIjN2ZkOWIzIiByZXN1bHQ9ImMyIi8+PGZlQ29tcG9zaXRlIGluPSJjMiIgaW4yPSJtMiIgb3BlcmF0b3I9ImluIi8+PC9maWx0ZXI+PGZpbHRlciBpZD0iZCI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuMDEzIDAuMDA2IiBudW1PY3RhdmVzPSI1IiBzZWVkPSIyOSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgcmVzdWx0PSJuMyIvPjxmZUNvbG9yTWF0cml4IGluPSJuMyIgdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDIuMCAwIDAgMCAtMS4yNSIgcmVzdWx0PSJtMyIvPjxmZUZsb29kIGZsb29kLWNvbG9yPSIjZDhiMjVhIiByZXN1bHQ9ImMzIi8+PGZlQ29tcG9zaXRlIGluPSJjMyIgaW4yPSJtMyIgb3BlcmF0b3I9ImluIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iMC44NSIvPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjYikiIG9wYWNpdHk9IjAuNSIvPjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjZCkiIG9wYWNpdHk9IjAuMjgiLz48L3N2Zz4K");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(212, 165, 58, 0.30);
    box-shadow: 0 16px 38px rgba(7, 61, 44, 0.32);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.about-stat-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 26px 52px rgba(9, 74, 54, 0.30);
}

/* Vòng tròn icon viền vàng ánh kim — hỗ trợ ảnh bo full vòng tròn */
.about-stat-ico {
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(145deg, #ffffff, #eef3f0) padding-box,
        linear-gradient(135deg, #f7e7a8 0%, #d4a53a 38%, #9c7321 68%, #f0d889 100%) border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.about-stat-card:hover .about-stat-ico { transform: scale(1.18) rotate(-3deg); }
.about-stat-ico.has-img { background: #fff; }
.about-stat-ico img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.about-stat-card .num {
    display: block;
    font-size: 46px;
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.about-stat-card .lbl {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 860px) {
    .about-stats-track { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .about-stat-card { padding: 24px 14px; }
    .about-stat-ico { width: 64px; height: 64px; font-size: 28px; }
    .about-stat-card .num { font-size: 36px; }
    .about-stat-card .lbl { font-size: 13.5px; }
}

/* =====================================================================
   FEEDBACK #5 — Sứ mệnh / Tầm nhìn / Giá trị
   Mỗi mục 1 hàng: ảnh (placeholder) bên trái — nội dung bên phải.
   ===================================================================== */
.values-rows {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 8px;
}

/* Task #46 #2: hiện đại hơn — mỗi mục là 1 thẻ nổi, ảnh/nội dung xen kẽ trái-phải. */
.value-row {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 36px;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(212, 165, 58, 0.20);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 12px 34px rgba(7, 61, 44, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.value-row:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(7, 61, 44, 0.14);
    border-color: rgba(212, 165, 58, 0.45);
}
/* Xen kẽ: mục chẵn đặt ảnh bên phải cho nhịp điệu hiện đại */
.value-row:nth-child(even) { grid-template-columns: 1fr 340px; }
.value-row:nth-child(even) .value-media { order: 2; }
.value-row:nth-child(even) .value-body  { order: 1; }

/* Ô ảnh / placeholder branded bên trái */
.value-media {
    width: 100%;
}

.value-media-img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(212, 165, 58, 0.4);
}

/* Panel branded thay cho ô trống — nhìn hoàn thiện kể cả khi chưa có ảnh thật
   (feedback Đợt 1 #4). Layout mẫu cuối cùng chờ file PM. */
.value-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(212,165,58,0.22), transparent 55%),
        linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
    border: 1px solid rgba(212, 165, 58, 0.35);
    box-shadow: 0 12px 30px rgba(9, 74, 54, 0.18);
}

.value-media-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(212, 165, 58, 0.55);
    font-size: 52px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

/* Nội dung: tiêu đề xanh thương hiệu, mô tả đen.
   Task #46 #2: tăng size chữ +10% (h5 24→26.4px, p 17.5→19.25px). */
.value-body h5 {
    margin: 0 0 12px;
    color: var(--green);
    font-size: 26.4px;
    font-weight: 800;
    line-height: 1.25;
}

.value-body p {
    margin: 0;
    color: var(--gray-900, #1a1a1a);
    font-size: 19.25px;
    line-height: 1.75;
}

@media (max-width: 760px) {
    .value-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 18px;
    }
    /* Mobile: ảnh luôn lên trên, bỏ xen kẽ */
    .value-row:nth-child(even) { grid-template-columns: 1fr; }
    .value-row:nth-child(even) .value-media { order: 0; }
    .value-row:nth-child(even) .value-body  { order: 0; }
    .value-media-placeholder { aspect-ratio: 16 / 9; }
    .value-media-ico { font-size: 52px; }
    /* +10% so với baseline cũ (21→23.1px, 16.5→18.15px) */
    .value-body h5 { font-size: 23.1px; }
    .value-body p { font-size: 18.15px; }
}

/* =====================================================================
   Reveal khi cuộn — chỉ kích hoạt khi JS gắn body.mona-reveal-ready.
   No-JS / JS lỗi = hiển thị bình thường (không bao giờ ẩn vĩnh viễn).
   ===================================================================== */

/* Slide ngang cho con số nổi bật */
body.mona-reveal-ready .about-stat-card {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--i, 0) * 0.12s);
}
body.mona-reveal-ready .about-stat-card.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* about-hero: ảnh trượt từ trái, nội dung trượt từ phải */
body.mona-reveal-ready .about-hero .about-img {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
body.mona-reveal-ready .about-hero .about-text {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
body.mona-reveal-ready .about-hero.is-visible .about-img,
body.mona-reveal-ready .about-hero.is-visible .about-text {
    opacity: 1;
    transform: translateX(0);
}

/* Giá trị: ẢNH slide từ TRÁI — NỘI DUNG slide từ PHẢI */
body.mona-reveal-ready .value-row .value-media {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
body.mona-reveal-ready .value-row .value-body {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
body.mona-reveal-ready .value-row.is-visible .value-media,
body.mona-reveal-ready .value-row.is-visible .value-body {
    opacity: 1;
    transform: translateX(0);
}

/* Timeline trồi lên khi cuộn */
body.mona-reveal-ready .timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--i, 0) * 0.1s);
}
body.mona-reveal-ready .timeline-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tôn trọng prefers-reduced-motion: bỏ slide/transition, hiện ngay */
@media (prefers-reduced-motion: reduce) {
    body.mona-reveal-ready .about-stat-card,
    body.mona-reveal-ready .about-hero .about-img,
    body.mona-reveal-ready .about-hero .about-text,
    body.mona-reveal-ready .value-row .value-media,
    body.mona-reveal-ready .value-row .value-body,
    body.mona-reveal-ready .timeline-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   Task #63 (#1) — FIX ảnh Sứ mệnh/Tầm nhìn/Giá trị tràn khung.
   Plugin tối ưu ảnh bọc <picture class="opti-pic"> và STRIP class
   .value-media-img → mọi CSS ràng buộc kích thước mất tác dụng, ảnh
   render full intrinsic (736px) đè text. Target theo CẤU TRÚC để khỏi
   phụ thuộc class bị mất + thu nhỏ ảnh, căn layout cân đối.
   ===================================================================== */
.value-row { grid-template-columns: 300px 1fr; }
.value-row:nth-child(even) { grid-template-columns: 1fr 300px; }
.value-media { width: 100%; }
.value-media .opti-pic,
.value-media picture { display: block; width: 100%; line-height: 0; }
.value-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(212, 165, 58, 0.4);
}
@media (max-width: 760px) {
    .value-row,
    .value-row:nth-child(even) { grid-template-columns: 1fr; }
    .value-media img { aspect-ratio: 16 / 9; }
}