/* Theme Name: MayXanh Electronics Theme URI: https://mayxanh.vn Author: MayXanh Electronics Description: Theme WordPress bán lẻ điện máy — trang chủ đầy đủ (banner, deal hot, danh mục, sản phẩm bán chạy, thương hiệu, tin tức), custom post type Sản phẩm với 48 sản phẩm mẫu, 15 trang nội dung và toàn bộ ảnh định dạng WebP. Responsive desktop / tablet / mobile. Version: 1.0.65 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GPLv2 or later Text Domain: mayxanh Tags: e-commerce, responsive, vietnamese, electronics */ *{box-sizing:border-box} /* ⚠️ Thuộc tính hidden chỉ được UA stylesheet đặt display:none, mà LUẬT TÁC GIẢ luôn thắng luật UA — nên .mx-cart-body{display:flex} khiến el.hidden=true không giấu được gì. Đã vấp: xoá sạch giỏ mà khung giỏ vẫn nằm đó. Chốt lại một lần. */ [hidden]{display:none!important} html,body{margin:0;padding:0} body{background:#f1f4f8;color:#1a2332;font-family:'Be Vietnam Pro','Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6} a{color:#0d5cd6;text-decoration:none} a:hover{color:#0a47a8} img{max-width:100%;height:auto;display:block} input,button,select,textarea{font-family:inherit} ::-webkit-scrollbar{height:6px;width:6px} ::-webkit-scrollbar-thumb{background:#c9d2de;border-radius:6px} .mx-wrap{max-width:1200px;margin:0 auto;padding:0 14px} .mx-mi{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;display:inline-flex;align-items:center;justify-content:center;overflow:hidden} @keyframes mxpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} /* ---------- Top bar ---------- */ .mx-topbar{background:#0a2342;color:#c4d2e6;font-size:12px} .mx-topbar .mx-wrap{height:34px;display:flex;align-items:center;justify-content:space-between;gap:16px} .mx-topbar ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:22px} .mx-topbar li{display:flex;align-items:center;gap:6px;white-space:nowrap} .mx-topbar .mx-mi{font-size:15px;color:#5b9dff;width:16px;height:16px} .mx-topbar strong{color:#fff;font-weight:600;white-space:nowrap} /* ---------- Header ---------- */ .mx-header{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 1px 0 #e6e9ef} .mx-header .mx-wrap{padding:12px 14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .mx-logo{display:flex;align-items:center;gap:10px;flex:0 0 auto} .mx-logo-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(150deg,#1d74f5,#0b45a8);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .mx-logo-mark .mx-mi{font-size:22px;color:#fff;width:24px;height:24px} .mx-logo-txt{line-height:1.05} .mx-logo-txt b{display:block;font-size:19px;font-weight:800;color:#0a2342;letter-spacing:.01em} .mx-logo-txt span{display:block;font-size:9.5px;font-weight:700;color:#e0281c;letter-spacing:.24em} /* Logo chủ site tự tải lên (Tùy biến ▸ Nhận diện trang web). Ảnh thay CẢ ruột .mx-logo nên gap 10px giữa ô icon và chữ không còn ai dùng — để lại là thừa 10px bên phải logo, đủ để nhìn ra lệch. ⚠️ object-fit:contain là bắt buộc chứ không phải trang trí: logo quá rộng bị max-width kẹp lại, mà height:38px vẫn giữ nguyên → ảnh bị BÓP NGANG. contain biến khung 210×38 thành khung chứa, ảnh nằm vừa bên trong đúng tỉ lệ. */ .mx-logo--img{gap:0} /* ⚠️ PHẢI viết `.mx-logo .mx-logo-img` chứ không `.mx-logo-img` trần. WooCommerce nạp `.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}` — độ ưu tiên (0,1,1), hơn (0,1,0) của một tên lớp đơn. Mà MỌI trang của Woo (cửa hàng, sản phẩm, giỏ, thanh toán, tài khoản) đều mang lớp `woocommerce-page` trên thẻ , nên ở những trang ấy `height:38px` của theme THUA và logo bung ra đúng cỡ gốc của tệp — ảnh khách tải lên là 2046×569 nên nó phủ kín đầu trang, đẩy ô tìm kiếm và cụm giỏ hàng rớt xuống dòng. Trang chủ không có lớp đó nên vẫn đẹp, và đó là lý do lỗi này sống sót: nhìn trang chủ thì không thấy gì. ⚠️ Đừng "sửa" bằng !important — nâng đúng độ ưu tiên thì chủ site vẫn còn đường đè lại bằng CSS riêng, còn !important thì bịt luôn. */ .mx-logo .mx-logo-img{display:block;width:auto;height:38px;max-width:210px;object-fit:contain} .mx-footer .mx-logo .mx-logo-img{height:34px;max-width:190px} .mx-search{flex:1 1 320px;min-width:240px;margin-left:68px;display:flex;height:40px;border:1.5px solid #0d5cd6;border-radius:6px;overflow:hidden;background:#fff} .mx-search select{flex:0 0 auto;width:146px;border:0;background:#f4f7fb;color:#3d4a5c;font-size:12px;padding:0 10px 0 14px;border-right:1px solid #e2e8f0;cursor:pointer} .mx-search input{flex:1 1 auto;min-width:0;border:0;outline:none;padding:0 12px;font-size:13px;color:#1a2332} .mx-search button{flex:0 0 auto;border:0;background:#0d5cd6;color:#fff;font-size:13px;font-weight:600;padding:0 18px;cursor:pointer;display:flex;align-items:center;gap:6px} .mx-search button:hover{background:#0a47a8} .mx-search button .mx-mi{font-size:17px;width:17px;height:17px} .mx-actions{flex:0 0 auto;display:flex;align-items:center;gap:20px} .mx-act{display:flex;align-items:center;gap:7px;cursor:pointer;position:relative;color:#1a2332} .mx-act .mx-mi{font-size:24px;color:#0d5cd6;width:25px;height:25px} .mx-act b{display:block;font-size:12.5px;font-weight:600} .mx-act small{display:block;font-size:11px;color:#7b8797} .mx-badge{position:absolute;top:-5px;left:16px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e0281c;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center} /* ---------- Nav + mega menu ---------- */ .mx-navbar{background:#fff;border-bottom:1px solid #e6e9ef} .mx-navbar .mx-wrap{display:flex;align-items:stretch;gap:16px;padding:0 14px} .mx-catbtn-wrap{position:relative;flex:0 0 auto} .mx-catbtn{width:212px;background:#0d5cd6;color:#fff;border:0;border-radius:6px 6px 0 0;padding:0 14px;height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer} .mx-catbtn .mx-mi{font-size:19px;width:20px;height:20px} .mx-mega-panel{width:660px;flex:0 0 auto;padding:20px 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .mx-mega-panel h4{margin:0 0 4px;font-size:12.5px;font-weight:800;color:#0a2342} .mx-mega-panel .mx-mp-sub{font-size:11px;color:#7b8797;margin-bottom:12px} .mx-chips{display:flex;flex-wrap:wrap;gap:8px} .mx-chips a{border:1px solid #eef1f5;border-radius:5px;padding:7px 11px;font-size:11.5px;font-weight:600;color:#3d4a5c} .mx-chips a:hover{border-color:#0d5cd6;color:#0d5cd6} .mx-nav{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto} .mx-nav a,.mx-nav li a{padding:0 12px;height:42px;display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:#3d4a5c;white-space:nowrap;border-bottom:2px solid transparent} .mx-nav a:hover{color:#0d5cd6;border-bottom-color:#0d5cd6} .mx-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px} /* ---------- Dropdown danh mục trên desktop (trang không phải trang chủ) ---------- */ .mx-catdrop{position:absolute;top:100%;left:0;z-index:60;width:212px;display:none} .mx-catdrop.is-open{display:block} /* ⚠️ .mx-sidebar bị ẩn ở ≤1080px cho bố cục trang chủ; trong dropdown thì phải hiện lại. Luật hai lớp này thắng nhờ ĐỘ ƯU TIÊN (0,2,0 > 0,1,0), không phụ thuộc thứ tự — media query không làm đổi độ ưu tiên. */ .mx-catdrop .mx-sidebar{display:block;box-shadow:0 16px 40px rgba(10,35,80,.18)} @media (max-width:860px){.mx-catdrop{display:none!important}} /* ---------- Mobile category drawer ---------- */ .mx-catbtn-short{display:none} .mx-dw{position:fixed;inset:0;z-index:80;display:none} .mx-dw.is-open{display:block} .mx-dw-bd{position:absolute;inset:0;background:rgba(10,35,66,.5)} .mx-dw-panel{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column} .mx-dw-hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid #e6e9ef} .mx-dw-hd b{font-size:15px;font-weight:700;color:#0a2342} .mx-dw-x{flex:0 0 auto;border:0;background:#eef1f5;color:#5d7590;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer} .mx-dw-body{flex:1 1 auto;min-height:0;display:flex} .mx-dw-tabs{flex:0 0 41%;max-width:200px;margin:0;padding:0;list-style:none;overflow-y:auto;background:#f4f7fb;border-right:1px solid #e6e9ef} .mx-dw-tabs button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;background:none;border-bottom:1px solid #e6e9ef;padding:12px 13px;font-size:12.5px;line-height:1.35;font-weight:500;color:#3d4a5c;cursor:pointer} /* Icon không được co, phần chữ phải xuống dòng được — nhãn dài nhất là "Điện thoại – Máy tính bảng" và cột chỉ rộng 41%. */ .mx-dw-tabs button>.mx-mi{flex:0 0 auto} .mx-dw-tabs button>span{flex:1 1 auto;min-width:0} .mx-dw-tabs button.is-on{background:#fff;color:#0d5cd6;font-weight:700;box-shadow:inset 3px 0 0 #0d5cd6} .mx-dw-panes{flex:1 1 auto;min-width:0;overflow-y:auto;padding:16px 16px 26px} .mx-dw-pane{display:none} .mx-dw-pane.is-on{display:block} .mx-dw-pane .mx-mega-panel{width:auto;padding:0;grid-template-columns:minmax(0,1fr);gap:20px} .mx-dw-all{display:inline-block;margin-top:18px;font-size:12.5px;line-height:1.5;font-weight:700;color:#0d5cd6} .mx-dw-all .mx-mi{vertical-align:-3px;margin-left:5px} body.mx-noscroll{overflow:hidden} /* ---------- Layout ---------- */ .mx-main{max-width:1200px;margin:0 auto;padding:16px 14px 0} .mx-hero-grid{display:grid;grid-template-columns:212px minmax(0,1fr);gap:14px;align-items:start} .mx-hero-row{display:flex;gap:14px;align-items:stretch;min-width:0} .mx-sidebar{position:relative;background:#fff;border:1px solid #e6e9ef;border-radius:0 0 8px 8px;border-top:0} .mx-sidebar .mx-side-item{position:relative} .mx-sidebar a{display:flex;align-items:center;gap:9px;padding:0 12px;height:35px;border-bottom:1px solid #f0f2f6;font-size:12.5px;font-weight:500;color:#3d4a5c} .mx-sidebar a:hover{background:#f4f8ff;color:#0d5cd6} .mx-flyout{position:absolute;top:-1px;left:100%;z-index:50;display:none;background:#fff;box-shadow:0 16px 40px rgba(10,35,80,.18);border:1px solid #e6e9ef;border-radius:0 8px 8px 0} .mx-side-item:hover .mx-flyout{display:flex} .mx-sidebar .mx-mi{flex:0 0 auto;font-size:18px!important;width:19px!important;height:19px!important} .mx-sidebar a>.mx-mi:last-child{font-size:16px!important;width:16px!important;height:16px!important;color:#b6bfcc} .mx-sidebar span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mx-sidebar .mx-mi{font-size:16px;color:#b6bfcc;width:16px;height:16px} /* ---------- Hero slider ---------- */ .mx-hero{flex:1 1 auto;min-width:0;position:relative;border-radius:8px;overflow:hidden;background:#0b2b6b;min-height:300px} .mx-hero-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)} .mx-slide{flex:0 0 100%;min-width:100%;position:relative;min-height:300px;background:#08204f} .mx-slide-bg{position:absolute;inset:0} .mx-slide-bg img{width:100%;height:100%;object-fit:cover} .mx-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(96deg,rgba(6,26,66,.94) 0%,rgba(6,26,66,.82) 28%,rgba(6,26,66,.34) 54%,rgba(6,26,66,0) 76%)} .mx-slide-txt{position:relative;z-index:2;padding:26px 24px 42px;max-width:56%} .mx-slide-txt h2{margin:0;font-size:clamp(21px,2.5vw,31px);font-weight:800;line-height:1.16;color:#fff} .mx-slide-txt h2 em{display:block;font-style:normal;color:#ffc529} .mx-slide-txt p{font-size:13px;line-height:1.6;color:#c3d6f5;max-width:330px;margin:12px 0 14px} .mx-feats{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:7px} .mx-feats li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#e7effc} .mx-feats i{width:16px;height:16px;border-radius:3px;background:#2f7bef;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto} .mx-feats i .mx-mi{font-size:13px;color:#fff;width:13px;height:13px} /* ⚠️ `cursor:pointer` là bắt buộc, không phải trang trí. `.mx-btn` dùng cho CẢ thẻ lẫn thẻ