/* Giới thiệu (Lâm Thanh Bình). @media đặt trong responsive.css */

.wrap-thongso { background: var(--color-main) url(../images/thongso-bg.jpg) left bottom / cover no-repeat; aspect-ratio: 2880 / 680;}
.thongso-list { border-left: 1px solid rgba(255, 255, 255, .3);}
.thongso-item::before { content: ''; display: block; width: 80px; height: 2px; background: var(--color-gold);}

/* Figma 68:2184/68:2183: tiêu đề 34px (cỡ gốc .title-main h2 — đã gỡ .wrap-tamnhin khỏi style.css:127 vốn ép 31px), vạch 60px cách chữ 27px, mô tả 422px = 3 dòng */
.wrap-tamnhin .kicker { letter-spacing: 0; gap: 27px;}
.wrap-tamnhin .desc { max-width: 422px; color: #6c6f71;}
.wrap-tamnhin .desc p { margin-bottom: 0;}
.wrap-tamnhin .container { position: relative; z-index: 2;}
/* Figma 2008:2536: dải vàng 18px + nền trắng → xám #e6e6e6 để rèm trắng nổi; khoảng trên/dưới chữ co theo khổ.
   Dải vàng = border-top của section: overflow-hidden cắt theo mép TRONG viền → dây rèm dừng dưới dải vàng ở mọi khổ (rèm giãn theo bề ngang, màn >1440 + nhịp "thở" là trồi lên đè dải vàng).
   Figma 82:2237 @1440: tiêu đề cách đỉnh 189px (= 18 viền + 171), mô tả → đỉnh ảnh 181px. Bản cũ chặn trên 50px → rèm dồn lên sát chữ */
.wrap-tamnhin { border-top: 18px solid; border-image: linear-gradient(90deg, #feedd4 6%, #f9daaa 28%, #f8e0ba 53%, #f5ddb6 78%, #ffefd6 97%) 1;}
.tamnhin-top { padding: clamp(24px, 15.1vw - 46px, 171px) 0 clamp(80px, 12.6vw, 181px); background: linear-gradient(180deg, #fff 45%, #e6e6e6 100%);}/* ảnh phòng: mờ nhoè + phóng nhẹ → rõ dần, trễ một nhịp sau khi rèm bắt đầu kéo */
.tamnhin-media .tamnhin-photo { opacity: 0; filter: blur(10px); transform: scale(1.08); transform-origin: center top; transition: opacity 1.6s .5s ease-out, filter 2.2s .5s ease-out, transform 3s .3s cubic-bezier(.16, 1, .3, 1);}
.tamnhin-media.is-open .tamnhin-photo { opacity: 1; filter: none; transform: none;}
/* rèm neo theo ảnh: mép dưới rèm cách đỉnh ảnh 394/700 (Figma) → bottom 43.71%.
   Figma 68:2180 chỉ che ô 92×152 (x 729→821 / 1440, y 0→152 / 864) = đoạn dây lỏng uốn cong; dây thẳng bên trái vẫn chạy hết lên mép trên.
   Bản cũ inset(17.6%) cắt cả dải ngang → mất 1 khúc dây */
   .tamnhin-rem { position: absolute; left: 0; bottom: 43.71%; z-index: 1; width: 100%; height: auto; max-width: none; pointer-events: none; clip-path: polygon(0 0, 50.63% 0, 50.63% 17.6%, 57.01% 17.6%, 57.01% 0, 100% 0, 100% 100%, 0 100%); transform-origin: center top; transform: translateY(35%) scaleY(1.06); will-change: transform;}
   
/* kéo lên như vải thật: căng dài → vọt quá đà → rơi nhẹ lại → nhún 2 nhịp rồi đứng; sau đó "thở" rất chậm */
.tamnhin-media.is-open .tamnhin-rem { animation: tamnhin-rem-up 2.8s cubic-bezier(.45, 0, .2, 1) forwards, tamnhin-rem-tho 7s ease-in-out 2.8s infinite alternate;}
@keyframes tamnhin-rem-up {
    0% { transform: translateY(35%) scaleY(1.06);}
    45% { transform: translateY(-5%) scaleY(.97);}
    65% { transform: translateY(2%) scaleY(1.015);}
    82% { transform: translateY(-1%) scaleY(.995);}
    100% { transform: none;}
}
@keyframes tamnhin-rem-tho {
    from { transform: none;}
    to { transform: translateY(-.8%) scaleY(1.01);}
}

.giatri-list { background: linear-gradient(var(--color-gold-line), var(--color-gold-line)) 40.5px 0 / 2px 100% no-repeat;}
.giatri-item .icon { width: 83px; height: 83px; border-radius: 50%; background: radial-gradient(circle, #fff0d9 32px, transparent 32.5px), linear-gradient(90deg, transparent 50%, var(--color-gold) 50%); transition: transform .3s, box-shadow .3s;}
.giatri-item:hover .icon { background: radial-gradient(circle, var(--color-gold) 32px, transparent 32.5px), linear-gradient(90deg, transparent 50%, var(--color-gold-dark) 50%); transform: scale(1.1);}
.giatri-item .name { color: var(--color-main);}
.giatri-item .desc { color: #6c6f71;}
.giatri-go { position: absolute; top: 0; right: 0;}

.wrap-history .year-item span { transition: transform .3s;}
.wrap-history .year-item.slick-current span { transform: scale(1.4);}
.wrap-history .history-item .name { color: var(--color-main);}
.wrap-history .history-item .desc { color: #6c6f71;}
