/* =========================================================================== TG2026 — BẢN VÁ R3, 20/09/2026 --------------------------------------------------------------------------- Nạp SAU tg2026-r2.css (xem inc/tg2026.php). LÀ FILE RIÊNG, không sửa vào r2: edge cache giữ tệp tĩnh 7 ngày và bỏ qua `?ver=`, nên đổi nội dung mà giữ nguyên tên tệp là khách đang có bản cũ vẫn nhận bản cũ. Tên tệp mới thì trình duyệt buộc phải tải. Chứa đúng hai việc Minh yêu cầu 20/09: 1. Giảm padding trên/dưới của 5 section trang chủ xuống 100px. 2. Phóng to liên kết "Enter TOGASHYAMO World". =========================================================================== */ /* --------------------------------------------------------------------------- 1 · PADDING TRÊN/DƯỚI CÁC SECTION → 100px --------------------------------------------------------------------------- SỐ ĐO GỐC (getComputedStyle trên trang đang chạy, 1440px, trước mọi lần sửa): #sec-story 96 / 150 #sec-retail 170 / 170 #sec-pro 170 / 170 #sec-create 150 / 150 #sec-community 140 / 140 LỊCH SỬ CON SỐ NÀY — ghi lại để sau này không ai tưởng 100px là tuỳ tiện: · Minh yêu cầu đầu tiên: "giảm còn khoảng 20px". · Đặt 20px, đo lại: đáy #sec-pro và đỉnh #sec-create cùng ở y=300, tức hai section chỉ cách nhau 40px — chụp màn hình gửi Minh xem. · Minh xem ảnh rồi chốt lại: 100px cho cả trang chủ lẫn trang Togashyamo World. Đây là con số ĐANG DÙNG. So với gốc, 100px vẫn gọn hơn 41% ở section rộng nhất (170 → 100). CHỌN SELECTOR THEO ID, KHÔNG !important. Độ ưu tiên của một id (0,1,0,0) đã thắng mọi luật theo lớp trong r2, kể cả trong @media — đã đo, ăn ngay, không phải leo thang. Dùng !important ở đây là nới điều kiện trước khi biết có cần hay không, và nó sẽ chặn luôn mọi lần tinh chỉnh sau này. KHÔNG đụng `.tg-ket` và `.tg-dai`: cả hai đang padding 0 và là dải ảnh tràn viền — thêm padding vào là vỡ bố cục. (`.tg-dai` đã bỏ khỏi trang chủ 20/09 nhưng luật vẫn tránh, vì trang khác còn dùng.) --------------------------------------------------------------------------- */ #sec-story, #sec-retail, #sec-pro, #sec-create, #sec-community { padding-top: 100px; padding-bottom: 100px; } /* Mobile: r2 có media query riêng cho padding. Lặp lại đúng luật trên trong cùng ngưỡng để không có khổ màn nào rơi về số cũ. Quét cả dải chứ không tin hai ba mốc — lỗi padding từng hỏng ở đúng những khổ không ai kiểm. */ @media (max-width: 900px) { #sec-story, #sec-retail, #sec-pro, #sec-create, #sec-community { padding-top: 100px; padding-bottom: 100px; } } /* --------------------------------------------------------------------------- 2 · NÚT "ENTER TOGASHYAMO WORLD" LỚN HƠN --------------------------------------------------------------------------- Trước khi sửa (đo được): font-size 10px · letter-spacing 2.4px · padding 0 0 7px · hộp 188,5 × 25 px. Sau khi sửa (đo lại trên trang chạy): hộp 270 × 38 px. Giữ nguyên KIỂU (liên kết có gạch chân, chữ hoa) vì đó là ngôn ngữ thị giác của bản thiết kế — Minh nói "lớn hơn", không nói "đổi thành nút". Chỉ nâng cỡ chữ và nới chỗ thở. --------------------------------------------------------------------------- */ .tg26 .tg-lien-ket { font-size: 15px; letter-spacing: 3px; padding-bottom: 11px; } /* --------------------------------------------------------------------------- 3 · HEADING KHONG CON IN HOA — 21/09/2026 [TG2026-R4-HEADING] --------------------------------------------------------------------------- Do truoc khi sua: .tg-h2 co text-transform: uppercase (getComputedStyle tren trang dang chay). Nen doi chu trong PHP thoi KHONG du — trinh duyet van in hoa. Phai go luat nay thi chu moi hien dung. Dung .tg26 .tg-h2 (0,2,0) de thang ca cac bien the --retail/--pro/--cd/--dong neu chung co luat rieng. Giu nguyen letter-spacing va co chu. --------------------------------------------------------------------------- */ .tg26 .tg-h2 { text-transform: none; } /* --------------------------------------------------------------------------- 4 · HERO TREN DIEN THOAI: CHU TRUOC, DEP SAU — 21/09/2026 --------------------------------------------------------------------------- Do tren khung 390px truoc khi sua: .tgs-hero26__san (anh dep) top 46, cao 211 order 1 .tgs-hero26__chu (chu+nut) top 257, cao 339 order 2 Dao lai order la du — hai khoi deu nam trong flex column cua .tgs-hero26. KHONG dung toi .tgs-hero26__bia: no la position:absolute nen order khong co tac dung voi no, va no van phu dung nhu cu (do duoc: cao 550 = ca hero). Moc 760px lay dung moc cua hero-2026-mb.css, khong dat moc moi. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .tgs-hero26__chu { order: 1; } .tgs-hero26__san { order: 2; } } /* --------------------------------------------------------------------------- 5 · DEM TREN CHO KHOI CHU HERO O KHO DIEN THOAI [TG2026-R4-HERO-DEM] 21/09/2026 --------------------------------------------------------------------------- He qua cua muc 4. Sau khi dao thu tu, khoi chu len dau hero, ma header.tgs-dau la position:fixed cao 80px nam de len no. Do tren khung 400px truoc khi sua: .tgs-hero26__nhan y=72, header y=0..80 => dong eyebrow bi che. Truoc day cho do la anh nen khong ai thay. 104px = 80px header + 24px cho tho. Dat o ca hai moc vi hero-2026-mb.css co luat rieng cho <=420px se de len neu chi sua moc 760. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .tgs-hero26__chu { padding-top: 104px; } } @media (max-width: 420px) { .tgs-hero26__chu { padding-top: 104px; } } /* --------------------------------------------------------------------------- 6 · BANG CHUYEN PHOI MAU: TRUOT PHAI SANG TRAI [TG2026-R4-SLIDE] 21/09/2026 --------------------------------------------------------------------------- DO TRUOC KHI SUA tren trang dang chay: .tg-bang position:relative overflow:hidden 209x262 .tg-bang img position:absolute transition: opacity .9s transform: none Tuc la doi anh chi la mo dan TAI CHO — khong co huong nao ca. Nen chi them JS tu chay thoi thi van khong ra "tu phai sang trai". BA TRANG THAI. Thieu `.roi` thi anh cu bat nguoc ve ben PHAI: thuong translateX(100%) cho o ben phai, opacity 0 (luat cu da lo) .dang translateX(0) dang xem .roi translateX(-100%) vua bi thay, di ra ben trai Class `.roi` do assets/js/tg2026-r4-slide.js gan va go. 900ms o day PHAI khop hang so TRUOT trong tep JS do. overflow:hidden cua .tg-bang da co san, khong can them. --------------------------------------------------------------------------- */ #tg-bang img { transform: translateX(100%); transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); will-change: transform, opacity; } #tg-bang img.dang { transform: translateX(0); } #tg-bang img.roi { transform: translateX(-100%); } /* Nguoi dat prefers-reduced-motion: khong truot, khong mo dan. JS cung da tu tat phan tu chay cho nhom nay — hai lop, phong khi mot lop bi go. */ @media (prefers-reduced-motion: reduce) { #tg-bang img, #tg-bang img.dang, #tg-bang img.roi { transition: none; transform: none; } } /* --------------------------------------------------------------------------- 7 · TOA DO DOI DEP HERO SAU KHI DOI ANH [TG2026-R4-HERO-DEP] 21/09/2026 --------------------------------------------------------------------------- Anh moi hero-dep-2026b.webp 1400x933 (ty le 1,501) khac han anh cu tgs-dep-logo-dung.webp 1000x841 (ty le 1,189). Hero dat anh bang BE RONG (--dep-w) con chieu cao chay theo ty le, nen giu nguyen ba bien la doi dep lo lung, khong dap len be da. DO DUOC (don vi = % be rong san khau 16:9, doc tu kenh alpha): khung duc anh cu x 1,4..98,5% y 3,3..94,3% khung duc anh moi x 4,0..96,6% y 3,2..100,0% doi dep CU tren san khau: x 52,57..92,45 (rong 39,88) y 17,55..48,97 CAN THEO BE RONG + DAY DAY XUONG DAY. Lay mep duoi lam moc vi bong do .tgs-hero26__bong la phan tu RIENG co toa do co dinh (--bong-y: 60.5%) — doi dep phai cham dung cai bong do. Can theo tam hay theo mep tren deu lam doi dep roi khoi bong. SAI SO NOI RO: anh moi chup goc khac, can theo be rong thi chieu cao con 27,76 SW so voi 31,42 SW cua anh cu — LECH 11,6%. Khong the trung ca rong lan cao. Chieu cao thap hon chi lam doi dep trong nho hon, khong lam sai bo cuc; con sai be rong hay sai day la hong han. KHONG sua hero-2026.css: dau tep do ghi ro dung ghi de (edge cache 7 ngay). Tep nay nap SAU hero-2026.css nen bien o day de len. DUONG LUI: xoa khoi nay + tra src ve tgs-dep-logo-dung.webp. --------------------------------------------------------------------------- */ .tgs-hero26 { --dep-x: 50.85%; --dep-y: 36.05%; --dep-w: 43.05%; } /* --------------------------------------------------------------------------- [022] CORRECTIONS 22/09 — dòng nghiêng ở dải Pro Space canh TRÁI --------------------------------------------------------------------------- Khách ghi "căn trái thay vì căn đều". `text-align: justify` trên một dòng ngắn tạo ra khoảng trắng giãn bất thường giữa các từ — đó là thứ khách nhìn thấy và không thích. --------------------------------------------------------------------------- */ .tg-nghieng { text-align: left; } /* --------------------------------------------------------------------------- CORRECTIONS 22/09 — lo 4, 23/09/2026 [TG2026-R4-CORR23] --------------------------------------------------------------------------- [005] Chu hero trang chu nho lai. Ban goc trong hero-2026.css: .tgs-hero26__tieu font: 400 clamp(24px, 4.6vw, 66px)/1.06 .tgs-hero26__dan font-size: clamp(11px, 1.05vw, 15px) .tgs-hero26__nhan font-size: clamp(8px, .72vw, 10px) Dung selector hai lop (0,2,0) de thang bat ke thu tu nap tep — khong phai doi hero-2026.css, giu tep goc sach. --------------------------------------------------------------------------- */ .tgs-hero26 .tgs-hero26__tieu { font-size: clamp(20px, 3.6vw, 52px); } .tgs-hero26 .tgs-hero26__dan { font-size: clamp(10px, .90vw, 13px); } .tgs-hero26 .tgs-hero26__nhan { font-size: clamp(7px, .62vw, 9px); } /* [012] nut "Enter TOGASHYAMO's World" in dam. */ .tg26 .tg-lien-ket { font-weight: 700; } /* [032] Bot khoang trong giua hai dai Pro Space. Do tren trang that 23/09 @1280: #sec-pro padding-bottom 100px + #sec-create padding-top 100px = 200px. Gia tri do rule ID "#sec-story, #sec-retail, #sec-pro..." o phia tren tep nay quyet dinh, KHONG phai .tg-pro/.tg-create cua tg2026-r2.css — nen phai dung ID. Sau: 50 + 50 = 100px. */ #sec-pro { padding-bottom: 50px; } #sec-create { padding-top: 50px; } /* --------------------------------------------------------------------------- EMAIL EDITH 24/09/2026 [TG2026-ED24] --------------------------------------------------------------------------- Muc 1 — chu hero TO HON. Ban goc hero-2026.css: __nhan clamp(8px,.72vw,10px), __dan clamp(11px,1.05vw,15px); 23/09 da ha xuong 7-9px / 10-13px. Nay dat lon hon ca ban goc. Muc 2, 3 — "bo khoang trong giua cac chu": do tren trang that 24/09, dong nghieng va hai doan cua dai #sec-pro dang text-align: JUSTIFY — can deu hai ben keo gian khoang cach giua cac tu. Ve can trai. Dung ID de thang moi luat can deu (luat [022] ngay 22/09 chi co 1 class nen da KHONG an). Muc 4 — cau "For Premium Concept Stores…" to hon (truoc 12px). --------------------------------------------------------------------------- */ .tgs-hero26 .tgs-hero26__nhan { font-size: clamp(11px, .95vw, 14px); } .tgs-hero26 .tgs-hero26__dan { font-size: clamp(15px, 1.4vw, 20px); max-width: 44ch; } #sec-pro .tg-nghieng, #sec-pro .tg-tren-toi, #sec-pro .tg-lon, #sec-pro .tg-chu-nho { text-align: left; } .tg26 .tg-chu-nho.tg-chu-nho--to { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; max-width: 40ch; } /* --------------------------------------------------------------------------- [TG2026-HERO-MB-0926] HERO DIEN THOAI: ANH NEN TRAN SAU CHU — 26/09/2026 --------------------------------------------------------------------------- Minh: nen den phia tren -> phai la anh nen tran len; chu to hon; doi dep to va can giua. Truoc (do @390): chu tren nen muc, san khau 16:9 cao 219px o duoi, doi dep rong 41% cua 390 = 160px, lech phai; tieu de 20px. Sau: san khau phu KIN hero (anh nen cover, lay vung be da: 77% ngang), lop toi tu tren xuong de chu doc duoc; doi dep 86% be ngang, can giua, dat day hero. Selector 2 lop de thang hero-2026-mb.css bat ke thu tu nap. Duong lui: xoa khoi nay. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .tgs-hero26.kieu-cua { display: block; min-height: 760px; min-height: max(100svh, 760px); } .tgs-hero26 .tgs-hero26__san { position: absolute; inset: 0; top: 0; left: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto; } .tgs-hero26 .tgs-hero26__nen { object-position: 77% 50%; } .tgs-hero26 .tgs-hero26__san::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(11, 11, 11, .80) 0%, rgba(11, 11, 11, .45) 40%, rgba(11, 11, 11, 0) 62%); } .tgs-hero26 .tgs-hero26__bay { left: 7%; width: 86%; top: auto; bottom: 7%; } .tgs-hero26 .tgs-hero26__bong { left: 12%; width: 76%; top: auto; bottom: 5.5%; height: 5%; } .tgs-hero26 .tgs-hero26__bia { position: absolute; inset: 0; height: auto; } .tgs-hero26 .tgs-hero26__chu { position: relative; inset: auto; z-index: 5; display: block; padding: 104px 0 0; } .tgs-hero26 .tgs-hero26__tieu { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.08; max-width: none; } .tgs-hero26 .tgs-hero26__nhan { font-size: 11px; } .tgs-hero26 .tgs-hero26__dan { font-size: 16px; } .tgs-hero26 .tgs-hero26__nhan, .tgs-hero26 .tgs-hero26__dan { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); } }