/* ========================================================= FLATSOME ADAPT — hoà giải CSS Flatsome với CSS thiết kế. Load SAU main.css + page-*.css. Chỉ chứa reset các rule Flatsome rò rỉ vào markup thiết kế; không chứa style mới. ========================================================= */ /* Flatsome gắn class "lightbox" vào (feature flag) — trùng tên với .lightbox (khung phóng to ảnh) của thiết kế khiến cả trang bị phủ xám. Trả body về bình thường; lightbox thật vẫn là div.lightbox do main.js tạo. */ body.lightbox{ position:static;inset:auto;z-index:auto;display:block; padding:0;background:var(--bg-alt);opacity:1;transition:none; align-items:normal;justify-content:normal; } /* #wrapper của Flatsome nhận vai .page (khung 1440 giữa màn) */ #wrapper.page{max-width:var(--page);margin:0 auto;background:var(--bg);} /* Flatsome đặt html{background:#4d4d4d} — hai bên khung 1440 bị xám đậm. Design: nền ngoài trang là --bg-alt (#f5f6f8) */ html{background-color:var(--bg-alt);} /* Flatsome .badge (nhãn giảm giá) đè thẻ chứng nhận .badge của thiết kế */ .certs .badge{ position:relative;top:auto;left:auto;right:auto; display:flex;flex-direction:column;gap:16px;align-items:center; width:auto;height:auto;margin:0; } .certs .badge__icon,.certs .badge__img{position:static;} /* Xung đột trùng tên class (cùng họ với .lightbox/.badge/.tab/.gallery): thiết kế dùng `.page` cho khung 1440 (#wrapper), nhưng WordPress body_class() CŨNG gắn class `page` vào ở mọi trang page → body ăn luôn `.page{overflow:hidden}` của main.css. Body overflow:hidden = scroll container, khiến position:sticky của header dính vào body (cao bằng cả trang) → KHÔNG ghim. `clip` chặn tràn ngang y như `hidden` mà KHÔNG tạo scroll container. Chỉ reset overflow — GIỮ nguyên width/max-width/background để không lệch layout. (html vẫn overflow-x:hidden của thiết kế: nó là scroll container của viewport, sticky neo theo viewport nên vẫn đúng, và .cmap 100vw vẫn không sinh scroll ngang.) */ body,body.page{overflow-x:clip;overflow-y:visible;} /* Flatsome .header có sticky/z-index riêng — trả về đúng layout thiết kế. Header GHIM khi scroll (sticky): #wrapper.page là position:relative + overflow:visible nên header dính theo suốt chiều dài trang. z-index 100 > .drop(60)/.floating(50) nhưng < .lightbox(200) để ảnh phóng to vẫn phủ được header. Media query mobile của main.css đặt .header{position:relative} — rule này specificity cao hơn + load sau nên sticky ăn cả desktop lẫn mobile. */ .header.sonha-header{ position:sticky;top:0;z-index:100;box-shadow:none; display:flex;align-items:center;justify-content:space-between; padding:20px var(--gutter);background:var(--bg); transition:box-shadow .2s ease; } /* Đổ bóng nhẹ khi trang đã cuộn (class .is-stuck do inline JS trong functions.php gắn) — ở đầu trang header phẳng đúng thiết kế, không lệch pixel-diff */ .header.sonha-header.is-stuck{box-shadow:0 2px 12px rgba(0,0,0,.10);} /* Thanh admin bar của WP là position:fixed (>782px) — đẩy header xuống cho khỏi bị che */ body.admin-bar .header.sonha-header{top:32px;} @media (max-width:782px){ body.admin-bar .header.sonha-header{top:0;} /* <782px admin bar không fixed */ } .header.sonha-header .header-wrapper{display:contents;} /* ---- GTRANSLATE: dropdown ngôn ngữ gắn vào nút «VN ▼» của thiết kế ---- Plugin (widget_look=lang_names) đổ 2 thẻ vào .gtranslate_wrapper nằm trong .drop--lang. Style lại y hệt .drop__link của thiết kế nên header KHÔNG lệch pixel; widget nổi góc màn hình đã tắt trong tools-gtranslate-setup.php. Mở bằng hover (desktop, rule .nav__item:hover>.drop của main.css) hoặc click (.is-open do inline JS trong functions.php gắn). */ .nav__lang-item{position:relative;display:flex;align-items:center;} .nav__lang{cursor:pointer;} .drop.drop--lang{min-width:176px;left:auto;right:0;} .nav__lang-item.is-open > .drop.drop--lang{opacity:1;visibility:visible;transform:translateY(4px);} .drop--lang .gtranslate_wrapper{display:flex;flex-direction:column;gap:2px;} .drop--lang a.glink{ display:flex;align-items:center;gap:14px; padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500; color:var(--ink);text-transform:none;white-space:nowrap;text-decoration:none; transition:background-color .14s ease, color .14s ease; } .drop--lang a.glink:hover{background:var(--brand-soft);color:var(--brand);} .drop--lang a.glink.gt-current-lang{font-weight:700;color:var(--brand);background:var(--brand-soft);} /* Google Translate bơm quanh chữ đã dịch + banner skiptranslate — plugin đã ẩn banner; thêm reset để không phá kiểu chữ/kế thừa màu của thiết kế */ .page font{font:inherit!important;color:inherit!important;background:transparent!important;} @media (max-width:1024px){ /* ≤1024 .drop của thiết kế thành accordion (position:static;display:none) và .nav__item.is-open>.drop{display:flex} — wrapper đã mang class nav__item nên dùng chung cơ chế, chỉ cần trả lề trái và bỏ neo phải. LƯU Ý: .nav__lang-item{align-items:center} ở trên (không nằm trong media query, load sau main.css) sẽ ĐÈ .nav__item{align-items:stretch} của thiết kế → dropdown bị co hẹp + căn giữa màn hình. Phải khai lại stretch + min-width:0 ở đây. */ .nav__lang-item{align-items:stretch;} .drop.drop--lang{right:auto;min-width:0;} .drop--lang a.glink{padding:11px 2px;} } /* Flatsome .nav mặc định là list menu FULL-WIDTH — trả về flex fit-content của thiết kế để header space-between đẩy nav sang phải */ .nav.sonha-nav{margin:0;padding:0;display:flex;align-items:center;gap:30px;width:auto;flex-flow:row nowrap;} .nav.sonha-nav > a,.nav.sonha-nav .nav__link{padding:0;line-height:inherit;} /* Icon tìm kiếm: design KHÔNG reset padding button (UA co icon còn ~10px) — ép đúng kích thước render của file design */ .sonha-nav .nav__search{width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;flex:none;} .sonha-nav .nav__search img{width:10px;height:10px;display:block;} /* ---- MOBILE/TABLET ≤1024: trả menu về hamburger dọc như thiết kế ---- Các rule .nav.sonha-nav ở trên (specificity 0,2,0) đè trọn block @media (max-width:1024px) .nav{...} của main.css (0,1,0) — media query KHÔNG cộng specificity. Hậu quả: menu luôn hiện (display:flex đè display:none), nằm ngang nowrap tràn khỏi màn hình, mất padding → hamburger vô tác dụng. Khai lại đúng giá trị thiết kế với specificity ngang hàng, chỉ trong ≤1024 nên KHÔNG ảnh hưởng desktop đã pixel-perfect. */ @media (max-width:1024px){ .nav.sonha-nav{ order:3;position:absolute;top:100%;left:0;right:0;z-index:70; flex-flow:column nowrap;align-items:stretch;gap:0;width:auto; background:var(--bg);border-top:1px solid var(--line); box-shadow:0 16px 30px rgba(0,0,0,.12); padding:6px var(--gutter) 18px; max-height:calc(100vh - 84px);overflow-y:auto; display:none; /* đóng mặc định — main.js gắn .is-open */ } .nav.sonha-nav.is-open{display:flex;} .nav.sonha-nav > .nav__link, .nav.sonha-nav .nav__item > .nav__link{ width:100%;padding:14px 2px;font-size:15px;border-bottom:1px solid var(--line); } .nav.sonha-nav .drop__link{padding:11px 2px;} .nav.sonha-nav .drop__sub a{padding:9px 2px;} /* search/lang: thiết kế cho về khối trái, icon trở lại 20px (width:auto nên không còn bị padding button bóp như desktop) */ .sonha-nav .nav__search,.sonha-nav .nav__lang{align-self:flex-start;padding:12px 2px;} .sonha-nav .nav__search{width:auto;height:auto;} .sonha-nav .nav__search img{width:20px;height:20px;} } /* Typography: Flatsome đặt màu/font riêng cho heading (#555, Lato) làm mất màu kế thừa (vd tiêu đề trắng trên ảnh) và sai font thiết kế. Dùng :where() để giữ specificity thấp — CSS thiết kế luôn thắng. */ :where(.page) h1,:where(.page) h2,:where(.page) h3,:where(.page) h4{color:inherit;font-family:var(--font);margin:0;} :where(.page) p{padding:0;} /* Flatsome bơm font Lato qua inline CSS (customizer) SAU mọi stylesheet — ép lại toàn bộ chữ trong .page về font thiết kế với specificity cao hơn. */ .page h1,.page h2,.page h3,.page h4,.page h5,.page h6, .page p,.page a,.page li,.page span,.page button,.page input,.page select,.page textarea,.page blockquote, .page figcaption,.page td,.page th,.page label,.page small,.page div{ font-family:var(--font); } /* Flatsome đặt body{line-height:1.6} — design dùng normal (~1.2). Trả về normal cho cả cây kế thừa; giá trị khai riêng trong CSS design không đổi. */ .page{line-height:normal;} :where(.page) h1,:where(.page) h2,:where(.page) h3,:where(.page) h4,:where(.page) h5,:where(.page) h6{line-height:normal;} /* Button: Flatsome thêm uppercase/padding/min-height/letter-spacing cho