/* hero-wipe-2.css - buoc 10 (03/09): sua ANH CHINH TRAN DOC.
 * Do that: hero-zori-chinh.webp la 392x825 (ti le 2,105). Chi dat width:420px
 * => cao 884px trong hero cao 646px => tran len header va xuong khoi 01.
 * Sua: dat CA max-width VA max-height, width/height:auto => trinh duyet thu nho
 * giu dung ti le, khong bao gio cao hon khung. Khong dung object-fit de ep.
 * BAY: `.tgs-hero-wipe__zori img{max-width:100%}` (0,1,1) DE hon lop --ben
 * (0,1,0) => phai viet `img.tgs-hero-wipe__zori--ben` moi an.
 * Ten file MOI vi edge cache 7 ngay (?ver= khong an). hero-wipe.css giu tren dia.
 * Chu ky 18,3s = 3 wipe 1,1s + giu 2s (s1) + 8s (s2) + 5s (s3). */
.tgs-hero-wipe{position:relative;overflow:hidden;isolation:isolate;min-height:calc(clamp(420px,72vh,720px) + var(--tgs-dau-cao))}
.tgs-hero-wipe__slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.2vw,28px);padding:clamp(20px,5vw,64px);text-align:center;clip-path:inset(0 100% 0 0);animation:18.3s linear infinite both;will-change:clip-path}
.tgs-hero-wipe__slide--1{z-index:3;animation-name:tgsHeroS1}
.tgs-hero-wipe__slide--2{z-index:1;animation-name:tgsHeroS2}
.tgs-hero-wipe__slide--3{z-index:2;animation-name:tgsHeroS3}
/* Dai xam mem o mep dan, rong 12% be ngang */
.tgs-hero-wipe__edge{position:absolute;top:0;left:0;z-index:4;width:12%;height:100%;pointer-events:none;opacity:0;transform:translateX(-100%);background:linear-gradient(90deg,rgba(140,136,130,0),rgba(140,136,130,.22) 55%,rgba(140,136,130,.42));animation:tgsHeroEdge 18.3s linear infinite both;will-change:transform,opacity}
/* 3 gach dau dong slide 3 hien lan luot ~1s */
.tgs-hero-wipe__line{opacity:0}
.tgs-hero-wipe__line--1{animation:tgsHeroL1 18.3s linear infinite both}
.tgs-hero-wipe__line--2{animation:tgsHeroL2 18.3s linear infinite both}
.tgs-hero-wipe__line--3{animation:tgsHeroL3 18.3s linear infinite both}
/* Hang zori: anh tu thu nho vua CA be ngang lan chieu cao */
.tgs-hero-wipe__zori{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,40px);width:100%;max-width:100%;min-height:0}
.tgs-hero-wipe__zori img{width:auto;height:auto;max-width:100%}
.tgs-hero-wipe__zori img.tgs-hero-wipe__zori--chinh{max-width:min(38vw,300px);max-height:min(30vh,260px)}
.tgs-hero-wipe__zori img.tgs-hero-wipe__zori--ben{max-width:min(17vw,200px);max-height:min(12vh,110px)}
/* --- Va buoc 9b (03/09 ~15:55): header dan cung .tgs-dau de len dong dau slide 2.
 * DAY HEADER DO THAT tren production, 4 ngon ngu x 6 kho (px):
 *   320/375/430 = 80 | 768 = 215 | 1024 = 157 | 1440 = 112, RIENG /fr/ 1440 = 169
 *   (menu tieng Phap xuong 2 dong). Lay so LON NHAT cho moi nguong.
 * Cach va: hero VAN co y de anh chay duoi header (xem .tgs-main--hero trong
 * layout.css) => khong doi vi tri hero; day NOI DUNG xuong bang padding-top VA
 * cong dung ngan ay vao min-height de vung noi dung nhin thay van bang thiet ke.
 * NEU SUA HEADER (them muc menu, doi co chu) thi PHAI do lai 3 con so nay. */
.tgs-hero-wipe{--tgs-dau-cao:80px}
@media (min-width:768px){.tgs-hero-wipe{--tgs-dau-cao:215px}}
@media (min-width:1024px){.tgs-hero-wipe{--tgs-dau-cao:176px}}
.tgs-hero-wipe__slide{padding-top:var(--tgs-dau-cao)}