/* ========================================================= Viculinary — MTS Corrections File: wp-content/themes/viculinary-theme/mts-corrections.css Ngày: 25/07/2026 Mục đích: chuẩn hoá nhịp dọc, cắt khoảng trắng thừa. LƯU Ý: theme dùng inline style="" rất nhiều, nên bắt buộc phải có !important thì override mới ăn. ========================================================= */ :root { --sp-xl: clamp(3.5rem, 7vw, 7rem); /* thay cho 12rem */ --sp-lg: clamp(3rem, 6vw, 6rem); /* thay cho 10rem */ --sp-md: clamp(2.5rem, 5vw, 5rem); /* thay cho 8rem */ --sp-sm: clamp(2rem, 4vw, 4rem); /* thay cho 6rem */ --sp-xs: clamp(1.5rem, 3vw, 3rem); /* thay cho 4rem */ } /* ---------- 1. Trang thường (About, Contact, page.php) ---------- */ .site-main.generic-page { padding: var(--sp-xl) 0 var(--sp-lg) !important; min-height: auto !important; } .generic-page .page-header { margin-bottom: var(--sp-xs) !important; } /* ---------- 2. Section trang dịch vụ ---------- */ .vi-service-page .section { padding-top: var(--sp-sm) !important; padding-bottom: var(--sp-sm) !important; } .vi-service-page .section:first-of-type { padding-top: var(--sp-md) !important; } /* Hero trang dịch vụ: 80vh quá cao trên màn hình ngang */ .vi-service-page .vi-cinematic-hero { height: clamp(380px, 62vh, 620px) !important; } .vi-service-page .vi-cinematic-hero .container { padding-bottom: var(--sp-sm) !important; } /* ---------- 3. Khối 2 cột (Strategy / Audience) ---------- */ .vi-service-page .section > .container > div[style*="gap: 6rem"] { gap: var(--sp-sm) !important; } .vi-service-page .animate-on-scroll[style*="sticky"] { top: 110px !important; } /* ---------- 4. CTA cuối trang ---------- */ .vi-cta, .vi-service-page .section[style*="text-align: center"][style*="background: var(--primary-color)"] { padding-top: var(--sp-lg) !important; padding-bottom: var(--sp-lg) !important; } /* ---------- 5. Khoi "Let's work together" -> xem muc 10 cuoi file ---------- */ /* ---------- 6. Các khối trong page.php dạng service ---------- */ .vi-intro { padding: var(--sp-md) 0 !important; } .vi-gallery { padding: var(--sp-xs) 0 !important; } .vi-split { padding: var(--sp-sm) 0 !important; } .vi-hero { min-height: clamp(340px, 55vh, 560px) !important; } /* ---------- 7. Nhịp chữ trong editorial ---------- */ .editorial-body p { margin-bottom: 1.4rem !important; } .rich-text-formatted p { margin-bottom: 1.1rem !important; } .rich-text-formatted h3 { margin-top: 1.8rem !important; } .rich-text-formatted li { margin-bottom: 0.55rem !important; } /* ---------- 8. Mobile: siết thêm ---------- */ @media (max-width: 768px) { .site-main.generic-page { padding: 6rem 0 3rem !important; } .vi-service-page .section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .vi-service-page .animate-on-scroll[style*="sticky"] { position: static !important; } } /* ========================================================= 9. Social icons — link that da gan 09/08/2026. Rule .vi-social a[href="#"] ben duoi tu dong ngung ap dung khi href khong con la "#" (giu lai lam luoi an toan neu sau nay them icon moi chua co URL). ========================================================= */ .vi-social { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 1.75rem; } .vi-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: 0.65; transition: opacity 0.3s ease, transform 0.3s ease; text-decoration: none; } .vi-social a:hover { opacity: 1; transform: translateY(-2px); } .vi-social svg { width: 17px; height: 17px; fill: currentColor; } /* Link chưa gắn: mờ đi + con trỏ báo chưa dùng được */ .vi-social a[href="#"] { opacity: 0.28; cursor: default; pointer-events: none; } /* Focus ro rang cho ban phim (icon khong co text) */ .vi-social a:focus-visible { opacity: 1; outline: 2px solid var(--accent-color); outline-offset: 3px; } /* Submenu chu nho hon - Correction 24/07/2026 */ #primary-menu .sub-menu a { font-size: 0.82rem !important; letter-spacing: 0.5px !important; } /* ===== MOBILE FIX v2 — 26/07/2026 ===== */ @media (max-width: 900px) { section.vi-home-intro[style] { padding-bottom: 0 !important; } section.services-overview[style] { margin-top: 0 !important; padding-top: 1.5rem !important; } .services-overview h2 { margin-bottom: 1.75rem !important; font-size: 2.1rem !important; } /* Header che title trang dich vu */ .vi-service-page .vi-cinematic-hero { height: auto !important; min-height: 460px !important; padding-top: 130px !important; padding-bottom: 2rem !important; align-items: flex-end !important; } .vi-service-page .vi-cinematic-hero h1 { font-size: 1.9rem !important; line-height: 1.15 !important; } .vi-service-page .vi-cinematic-hero p { font-size: 0.9rem !important; line-height: 1.55 !important; } } @media (min-width: 480px) and (max-width: 991px) { .services-overview .container>div { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; } .services-overview .service-card { width: calc(50% - 1rem) !important; max-width: none !important; flex: 0 1 calc(50% - 1rem) !important; } } @media (max-width: 479px) { .services-overview .service-card { width: 100% !important; max-width: 100% !important; } } @media (max-width: 768px) { .site-main p { text-align: left !important; } .site-main ul[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ===== Correction 27/07/2026 ===== */ /* Card HOME chu gian cach do justify */ .services-overview .service-card p { text-align: left !important; } /* CONTACT: 'Start the conversation' bi header che dau tieu de */ .generic-page h1 { padding-top: 0.5rem !important; } @media (max-width: 900px) { main.generic-page { padding-top: 120px !important; } } /* ========================================================= 10. "Let's work together" - khoang trang truoc footer Correction 05/08/2026 (yeu cau lan 3). Da go 2 rule cu: - .generic-page .page-content > div[style*="margin-top: 6rem"] -> khop 0 phan tu. About khong co .page-content; nhanh .page-content trong page.php chi chay cho trang contact, ma contact lai dung page-contact.php. - .site-footer { padding-top: 2.5rem } -> co an nhung chi cat 24px. Khoang trang that = padding-bottom section cuoi (10rem inline tren About) + padding-bottom cua main.generic-page + padding-top footer. Cat ca ba bang selector cau truc, khong match inline style. Do duoc: desktop 296px -> 88px; viewport 958px 146px -> 70px. ========================================================= */ .site-main.generic-page > section.section:last-of-type { padding-bottom: 0 !important; } .site-main.generic-page { padding-bottom: var(--sp-xs) !important; } .site-footer { padding-top: 2.5rem !important; } @media (max-width: 768px) { .site-main.generic-page { padding-bottom: 1.5rem !important; } .site-footer { padding-top: 2rem !important; } } /* ========================================================= 11. Focal point cho banner hero (Correction 05/08/2026) Theme hardcode background-position: center cho moi hero. Tren mobile slot la portrait nen anh 2:1 chi con ~42% chieu ngang o giua -> chu the lech phai bi cat. So do tu chinh file anh (skin-tone + edge density): - Staff Development: mat nguoi x 3-77% (p50 45%, p95 77%), y 8-68% (p50 33%). Center crop desktop giu 19-81% -> cat tran. Dat 65% 35%. - Menu Curation: mon an x p50 74%, p75 86%; y p50 57%. Center crop mobile giu 29-71% -> cat dia. Dat 68% center. - About (banner 1): doi xung, centroid x 49.9% -> giu center, khong can rule. ========================================================= */ body.page-id-15 .vi-service-page .vi-hero-bg { background-position: 65% 35% !important; } body.page-id-10 .vi-service-page .vi-hero-bg { background-position: 68% center !important; } /* ========================================================= 12. ABOUT - khoang trang sau block 05 "Bespoke Event" Correction 09/08/2026. Do tren live (desktop 1920x953), tu day border-box cua block 05 den dong chu dau tien cua khoi "How Can We Help": 289px. Cac thanh phan gop vao, do bang getComputedStyle: .editorial-block (block 05) margin-bottom 32px (2rem) khoi help margin-top 128px (8rem) khoi help border-top 1px khoi help padding-top 128px (8rem) ----- 289px Ca ba deu la rem => KHONG co gian theo viewport. Tren dien thoai 414px vet trang van la 289px, chiem ~1/3 man hinh -> day moi la cho nguoi dung thay "rat lon". Moc so sanh nam ngay trong cung file page-about.php: khoi "Locations" ke duoi dung margin-top 6rem + padding-top 4rem = 160px. Vay 16rem o day la ngoai le, khong phai nhip chung. Selector: class that .vi-about-help, them vao page-about.php (dong
). KHONG dung [style*="margin-top: 8rem"]: 3 rule kieu do truoc day da chet vi inline style bi doi/khong ton tai. Ket qua do lai sau khi ap: desktop 1920 289px -> 161px; mobile 414px 289px -> 81px. ========================================================= */ .vi-about-help { margin-top: var(--sp-sm) !important; padding-top: var(--sp-sm) !important; } @media (max-width: 768px) { .vi-about-help { margin-top: var(--sp-xs) !important; padding-top: var(--sp-xs) !important; } } /* ========================================================= 13. MENU MOBILE O CHE DO NGANG - Home va Contact khong cham toi duoc. Correction 13/08/2026. Trieu chung: mo menu tren dien thoai xoay ngang thi muc dau ("Home") va muc cuoi ("Contact") bi cat, va KHONG cuon duoc. Nguyen nhan, do bang getComputedStyle tren khung nhin that: .main-nav position: fixed; height: 100vh; display: flex; flex-direction: column; justify-content: center; <-- diem hong overflow-y: visible; <-- diem hong Danh sach menu cao 458.7px (co dinh theo so muc). Khi chieu cao khung nhin < ~460px danh sach tran ca hai phia. Vi la flex COLUMN nen can giua theo truc doc do justify-content, va phan tran o MEP TREN nam ngoai vung cuon -> khong the voi toi. Do TRUOC khi sua, maxScrollTop = 0 tren ca 4 may: iPhone 14 ngang 844x390 -> mat Home, Contact iPhone X ngang 812x375 -> mat Home, Contact iPhone SE ngang 667x375 -> mat Home, Contact Android ngang 740x360 -> mat Home, Contact Cach sua: doi justify-content ve flex-start (khong con can giua theo kieu cat mep tren), roi can giua lai bang margin auto tren truc chinh. Theo spec flexbox, khi free space AM thi auto margin = 0 -> noi dung chay tu dau va cuon duoc day du. Khi con cho thi auto margin chia deu -> van can giua y het truoc. KHONG dung "justify-content: safe center": Safari < 16 bo qua gia tri nay va roi ve trang thai hong cu. Giu align-items: center de KHONG lam lech ngang menu. Do LAI sau khi sua (allReachable = true tren tat ca): iPhone 14 ngang 844x390 maxScrollTop 205 iPhone X ngang 812x375 maxScrollTop 220 iPhone SE ngang 667x375 maxScrollTop 220 Android ngang 740x360 maxScrollTop 235 375x812 doc maxScrollTop 0 (khong tran, van can giua) 360x640 doc maxScrollTop 0 (khong tran, van can giua) ========================================================= */ @media (max-width: 991px) { .main-nav { justify-content: flex-start !important; align-items: center !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding: 6rem 1rem 2.5rem !important; } .main-nav > ul { margin-top: auto !important; margin-bottom: auto !important; } } /* ========================================================= 14. Vung cham nut hamburger qua nho. Correction 13/08/2026. Do duoc: nut .menu-toggle chi 30 x 20 px. Toi thieu khuyen nghi 44 x 44 (WCAG 2.5.5 / Apple HIG). CACH LAM: KHONG doi display/padding cua chinh cai nut. Da thu min-width/min-height + display:flex va BI HONG: nut giu padding 8px nen content-box chi con 28px, trong khi 3 gach + margin can 30px -> flexbox co lai cac gach tu 2px xuong 0px, tuc la MAT LUON icon hamburger. Thay vao do dung pseudo-element phu len, khong dung toi layout cua icon: hop cham 44x44 can giua nut, nut van 30x20. Da kiem chung o 375px: - chieu cao header 109.984px -> 109.984px (khong doi) - .header-inner 45px, top 32 -> khong doi - logo khong xe dich - mep phai cua nut 351 -> 351 (khong doi) - tam doc cua nut 54.5 -> 54.5 (khong doi) - 3 gach hamburger 2px -> 2px (con nguyen) - cham thu lech 20px moi huong: deu trung vao nut ========================================================= */ @media (max-width: 991px) { .menu-toggle { position: relative !important; } .menu-toggle::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 44px !important; height: 44px !important; } } /* ========================================================= 15. BLOG "Palate & Plate" - sua theo phan hoi cua Edith Correction 06/09/2026. Nguon: email edgihcmc@gmail.com 31/08/2026, dinh kem "Correction BLOG.docx" (8 trang). Ban chep nguyen van luu tai projects/viculinary/SUA-CUA-EDITH-20260831.md CAU TRUC ANH CUA MOT BAI - do tu Media Library, moi bai co DUNG BA anh khac nhau: -3 1000x1000 -> anh dai dien, single.php ve thanh banner
ngay duoi tieu de. Render 1136x757. ~1208x768 -> anh 1 trong than bai (.vic-anh-bai) -2 1200x630 -> anh 2 trong than bai (.vic-anh-bai) "First big picture" trong yeu cau cua Edith = CAI BANNER 1136x757, khong phai anh trong than bai. Cach doc nay khoa lai duoc bang chinh bai "Tables Are Full": cung mot bai chi ba thu khac nhau - "take of the FIRST BIG picture", "let more space after the FIRST picture", "let more space before the SECOND picture". Ba tham chieu => ba anh. Neu "first big picture" la anh trong than bai thi hai cau sau khong con doi tuong. ==> Bo banner o CHE DO XEM BAI. Anh dai dien VAN GIU trong DB nen the bai ngoai trang danh sach /blog/ khong doi. Do: bo 757px chieu cao lap lai o dau moi bai. --- Tieu de bai --- Truoc: .vi-post__title clamp(2.1rem, 4.5vw, 3.6rem) (blog.css) 1440px -> 57.6px, bai Terroir cao 194px (3 dong) Sau: clamp(1.9rem, 2.6vw, 2.5rem) 1440px -> 37.44px, Terroir con 87px (giam 55%) 390px -> 30.4px (giam 10% tu 33.6px) Cat manh o desktop vi do moi la cho tieu de qua kho. --- Khoang trong quanh anh trong bai --- The nam trong mot

tran, KHONG co rule CSS nao trong theme. Do duoc: margin 0 / 25.6px -> chu dinh sat mep tren cua anh. Dung y Edith khi noi "let more space before the picture". Dat 3.5rem (56px) tren duoi. --- Anh doc qua to (bai Terroir) --- Edith: "Could you do the picture with the pepper and spices smaller?" Do duoc: revenge-of-the-terroir-2 goc 1280x1920, ti le DOC, render 716x1073px - cao hon ca man hinh laptop. Anh ngang cung bo (1200x630) chi render 716x376px nen khong viec gi. Cach chan: gioi han CHIEU CAO 560px thay vi chieu ngang -> chi anh doc bi thu (716x1073 -> 374x560), anh ngang khong doi (376 < 560). Mot rule, khong can selector rieng tung bai. ========================================================= */ body.single-post .vi-post__featured { display: none !important; } .vi-post__title { font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important; line-height: 1.16 !important; } .vi-post__body img.vic-anh-bai { display: block !important; margin: 3.5rem auto !important; max-width: 100% !important; max-height: 560px !important; width: auto !important; height: auto !important; } /* The

bao anh: xoa margin cua no de khong cong don voi margin anh */ .vi-post__body p:has(> img.vic-anh-bai) { margin: 0 !important; } @media (max-width: 768px) { .vi-post__body img.vic-anh-bai { margin: 2.25rem auto !important; max-height: 62vh !important; } } /* 16 — DANH SACH CO BULLET TRONG BAI VIET (07/09/2026) Minh: moi doan sau dau hai cham thi cac y sau do phai co bullet. Truoc do ca 6 bai co 0 the

    . Nay 22 cum / 52 muc dung
      . Xem _bullet-cli.php de biet quy tac nhan dien. */ .vi-post__body ul.vic-ds { list-style: disc outside; margin: 1.6rem 0 2rem; padding-left: 1.6rem; } .vi-post__body ul.vic-ds > li { margin: 0 0 0.9rem; padding-left: 0.35rem; line-height: 1.75; } .vi-post__body ul.vic-ds > li:last-child { margin-bottom: 0; }