/* Khu ảnh "cuốn sách trên tay" dưới màn hình đầu (17/10/2026): lưới 3 ảnh dọc 9:16, nút mũi tên mở thêm 3 ảnh.
   Ảnh minh hoạ tạo bằng AI (anh chọn bỏ dòng chú thích 17/10) — tiêu đề không gọi là ảnh độc giả thật. */
.doan-gon { padding-top: var(--k-8); padding-bottom: var(--k-12); }
.anh-khach { text-align: center; border-top: 1px solid var(--the-vien); }
.anh-khach-nhan { margin: 0 0 var(--k-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mau-nhan); }
.anh-khach h2 { margin: 0 auto var(--k-6); max-width: 22ch; }

.anh-khach-luoi { list-style: none; margin: 0 auto; padding: 0; max-width: 620px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-3); }
@media (min-width: 760px) { .anh-khach-luoi { gap: var(--k-4); } }
.anh-khach-luoi li { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--bo-vua);
  background: var(--mau-be-mat); box-shadow: var(--bong); outline: 1px solid color-mix(in oklch, var(--mau-nhan) 45%, transparent); outline-offset: -1px; }
.anh-khach-luoi li:nth-child(3n + 2) { transform: translateY(var(--k-3)); } /* lệch nhẹ ảnh giữa cho bớt cứng */
.anh-khach-luoi img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
@media (hover: hover) { .anh-khach-luoi li:hover img { transform: scale(1.04); } }

/* Đang thu gọn: ẩn 3 ảnh sau. Không có JS thì lớp này không được gắn → hiện đủ 6 ảnh. */
.anh-khach.gon [data-them] { display: none; }
.anh-khach [data-them].hien { animation: anh-khach-hien .45s ease both; }
@keyframes anh-khach-hien { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }

.anh-khach-nut { display: inline-flex; flex-direction: column; align-items: center; gap: var(--k-2); margin: var(--k-8) auto 0;
  padding: 0; border: 0; background: none; color: var(--mau-chu-phu); font: inherit; font-size: var(--co-chu-nho); font-weight: 600; cursor: pointer; }
.anh-khach-mui { width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center;
  background: var(--nut-nen); color: var(--nut-chu); box-shadow: var(--bong); transition: background .15s, transform .3s; }
.anh-khach-mui svg { width: 22px; height: 22px; }
.anh-khach.gon .anh-khach-mui { animation: anh-khach-nhun 1.8s ease-in-out infinite; }
@keyframes anh-khach-nhun { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.anh-khach-nut:hover .anh-khach-mui { background: var(--nut-nen-hover); }
.anh-khach-nut[aria-expanded='true'] .anh-khach-mui { transform: rotate(180deg); }
.anh-khach-nut:focus-visible { outline: none; }
.anh-khach-nut:focus-visible .anh-khach-mui { box-shadow: var(--focus-vong); }

@media (prefers-reduced-motion: reduce) { .anh-khach.gon .anh-khach-mui, .anh-khach [data-them].hien { animation: none; } }

/* Dải 4 ảnh xoè hình quạt phía trên form đặt sách (thay khung feedback cũ, 17/10/2026) */
.anh-quat { margin: 0 auto var(--k-6); max-width: 720px; text-align: center; }
.anh-quat-nhan { margin: 0 0 var(--k-6); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mau-nhan); }
.anh-quat-day { list-style: none; margin: 0; padding: 0 var(--k-2) var(--k-4); display: flex; justify-content: center; }
.anh-quat-day li { --xoay: 0deg; --ha: 0px; flex: 0 1 25%; max-width: 168px; margin: 0 -10px; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: var(--bo-vua); border: 3px solid var(--o-nhap-nen); background: var(--mau-be-mat); box-shadow: var(--bong);
  transform: translateY(var(--ha)) rotate(var(--xoay)); transform-origin: 50% 100%; transition: transform .3s ease; }
.anh-quat-day li:nth-child(1) { --xoay: -9deg; --ha: 14px; z-index: 1; }
.anh-quat-day li:nth-child(2) { --xoay: -3deg; --ha: 0px; z-index: 2; }
.anh-quat-day li:nth-child(3) { --xoay: 3deg; --ha: 0px; z-index: 2; }
.anh-quat-day li:nth-child(4) { --xoay: 9deg; --ha: 14px; z-index: 1; }
@media (hover: hover) { .anh-quat-day li:hover { z-index: 3; transform: translateY(calc(var(--ha) - 10px)) rotate(var(--xoay)) scale(1.06); } }
.anh-quat-day img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 479px) { .anh-quat-day li { margin: 0 -6px; border-width: 2px; } }

/* Hiệu ứng khi cuộn tới — chạy cả điện thoại (JS gắn .cho-hien, cuộn tới thì gỡ ra) */
.anh-khach.cho-hien .anh-khach-luoi li { opacity: 0; translate: 0 28px; }
.anh-khach .anh-khach-luoi li { transition: opacity .6s ease, translate .6s cubic-bezier(.2,.8,.2,1), scale .2s; transition-delay: calc(var(--i, 0) * 120ms); }
.anh-quat.cho-hien .anh-quat-day li { opacity: 0; --xoay: 0deg; --ha: 36px; }
.anh-quat .anh-quat-day li { transition: opacity .5s ease, transform .8s cubic-bezier(.2,.9,.25,1.15), scale .2s; transition-delay: calc(var(--i, 0) * 110ms); }
/* Chạm vào ảnh trên điện thoại: nhún nhẹ */
.anh-khach-luoi li:active, .anh-quat-day li:active { scale: .96; transition-delay: 0s; }