/* ============================================================ ENHANCE.CSS — Pilala VN | Full Theme System Light + Dark mode via [data-theme] on Toggle button next to VI/EN in header Rollback: remove enhance.css from css.php ============================================================ */ /* ============================================================== 1. LIGHT THEME VARIABLES (default) ============================================================== */ :root, [data-theme="light"] { /* Backgrounds */ --bg-page: #f8faff; /* subtle cool-white — not pure white */ --bg-alt: #edf4ff; /* rich azure tint — news / alternate sections */ --bg-alt2: #f0fdf8; /* fresh mint tint — product sections (replaces pink) */ --bg-card: #ffffff; --bg-header: #ffffff; --bg-menu: #f5f5f5; --bg-menu-mobile:#f5f5f5; --bg-footer: #f2f2f2; --bg-copy: #e6e6e6; --bg-infobar: linear-gradient(90deg,#FFE401 0%,#ffd000 100%); --bg-newsletter: linear-gradient(90deg,#E50914 0%,#b50010 100%); --bg-input: #f4f7fc; --bg-badge: #e8f8f2; --bg-procart: #f8faff; --bg-total: #edf4ff; /* Text */ --txt-main: #1a1a2e; --txt-sub: #4a4a6a; --txt-muted: #888; --txt-footer: #555555; --txt-footer-h: #1a1a2e; --txt-link: #E50914; --txt-price: #E50914; /* Border / shadow */ --border: rgba(0,0,0,0.09); --border-input: #ccd5e8; --sh-sm: 0 2px 12px rgba(0,0,0,0.07); --sh-md: 0 6px 24px rgba(0,0,0,0.11); --sh-lg: 0 12px 38px rgba(0,0,0,0.15); --sh-card-hover: 0 12px 38px rgba(229,9,20,0.13); /* Gradients */ --grad-primary: linear-gradient(135deg,#E50914 0%,#b50010 100%); --grad-green: linear-gradient(135deg,#28a745 0%,#1a7a30 100%); --grad-accent: linear-gradient(135deg,#667eea 0%,#764ba2 100%); --grad-warm: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); --grad-section: linear-gradient(135deg,#edf4ff 0%,#e0ecff 100%); /* Misc */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --ease: 0.28s cubic-bezier(0.4,0,0.2,1); /* Breadcrumb */ --bg-breadcrumb: linear-gradient(90deg,#edf4ff,#e4eeff); --breadcrumb-border: #c8d8f0; /* Payment label */ --bg-payment: #edf4ff; --txt-payment: #2d3a4a; } /* ============================================================== 2. DARK THEME VARIABLES ============================================================== */ [data-theme="dark"] { --bg-page: #0d1117; --bg-alt: #161b22; --bg-alt2: #1c2230; --bg-card: #1c2333; --bg-header: #161b22; --bg-menu: linear-gradient(180deg,#010409 0%,#0d1117 100%); --bg-menu-mobile:#010409; --bg-footer: linear-gradient(160deg,#080c12 0%,#050810 100%); --bg-copy: #020408; --bg-infobar: linear-gradient(90deg,#b50010 0%,#8a000b 100%); --bg-newsletter: linear-gradient(90deg,#b50010 0%,#7a000a 100%); --bg-input: #161b22; --bg-badge: #2d1a1d; --bg-procart: #1c2333; --bg-total: #161b22; --txt-main: #e6edf3; --txt-sub: #94a3b8; --txt-muted: #64748b; --txt-footer: rgba(255,255,255,0.72); --txt-footer-h: #ffd200; --txt-link: #ff6b7a; --txt-price: #ff6b7a; --border: rgba(255,255,255,0.12); --border-input: #444c56; --sh-sm: 0 2px 12px rgba(0,0,0,0.35); --sh-md: 0 6px 24px rgba(0,0,0,0.45); --sh-lg: 0 12px 38px rgba(0,0,0,0.55); --sh-card-hover: 0 12px 38px rgba(255,107,122,0.15); --grad-primary: linear-gradient(135deg,#ff6b7a 0%,#E50914 100%); --grad-green: linear-gradient(135deg,#34d058 0%,#28a745 100%); --grad-accent: linear-gradient(135deg,#818cf8 0%,#6366f1 100%); --grad-warm: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); --grad-section: linear-gradient(135deg,#161b22 0%,#1c2333 100%); --bg-breadcrumb: linear-gradient(90deg,#161b22,#1c2333); --breadcrumb-border: rgba(255,255,255,0.08); --bg-payment: #21262d; --txt-payment: #c9d1d9; } /* ============================================================== 3. GLOBAL BASE ============================================================== */ /* Slider — CSS-controlled aspect ratio so height never depends on image load state */ .slider { overflow: hidden; line-height: 0; } .slider_slick .slick-slide a { display: block; position: relative; height: 0; padding-bottom: 36.46%; /* 700/1920 * 100 — fallback for Safari < 15 */ overflow: hidden; } @supports (aspect-ratio: 1 / 1) { .slider_slick .slick-slide a { height: auto; padding-bottom: 0; aspect-ratio: 1920 / 700; } } .slider_slick .slick-slide img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; } html { scroll-behavior: smooth; } body { background: var(--bg-page) !important; color: var(--txt-main) !important; transition: background 0.35s ease, color 0.35s ease; } .wapper { background: var(--bg-page) !important; } a { color: var(--txt-link); transition: color var(--ease); } ::-webkit-scrollbar { width: 8px; background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-main); } /* ============================================================== 4. TOP INFO BAR ============================================================== */ .wap_thongtin { background: var(--bg-infobar) !important; } /* ============================================================== 5. HEADER ============================================================== */ .wap_header { background: var(--bg-header) !important; box-shadow: 0 2px 18px rgba(0,0,0,0.10); border-bottom: 3px solid var(--color-main); transition: background 0.35s ease; overflow: visible !important; } .logo img { transition: transform var(--ease), opacity var(--ease); } .logo img:hover { transform: scale(1.05); opacity: .92; } /* User login */ .user_login p { color: var(--txt-main); transition: color 0.35s; } .user_login2 { background: var(--bg-card) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--sh-md); overflow: hidden; border: 1px solid var(--border); } .user_login a { color: var(--txt-sub) !important; border-bottom: 1px solid var(--border); transition: background var(--ease), color var(--ease); } .user_login a:hover { background: var(--bg-alt) !important; color: var(--color-main) !important; } /* Search bar */ .search { background: var(--bg-input) !important; border: 2px solid var(--border-input) !important; border-radius: 28px !important; overflow: hidden; transition: border-color var(--ease), box-shadow var(--ease); } .search:focus-within { border-color: var(--color-main) !important; box-shadow: 0 0 0 4px rgba(229,9,20,0.10) !important; } .search input { background: transparent !important; color: var(--txt-main) !important; } .search input::placeholder { color: var(--txt-muted); } .search p { background: var(--grad-primary) !important; color: #fff !important; border-radius: 0 28px 28px 0 !important; transition: opacity var(--ease); } .search p:hover { opacity: .88; } /* Language + Theme Toggle */ .ngonngu { display: flex; align-items: center; gap: 6px; } .ngonngu a { border: 1.5px solid var(--border-input) !important; color: var(--txt-main) !important; border-radius: 5px; padding: 3px 8px; font-size: 12px; font-family: 'menu'; transition: background var(--ease), color var(--ease), border-color var(--ease); } .ngonngu a:hover { background: var(--color-main) !important; color: #fff !important; border-color: var(--color-main) !important; } /* Theme Toggle Button */ .theme-btn { background: var(--grad-primary); color: #fff; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 8px rgba(229,9,20,0.30); transition: transform var(--ease), box-shadow var(--ease); flex-shrink: 0; } .theme-btn:hover { transform: scale(1.12) rotate(15deg); box-shadow: 0 4px 14px rgba(229,9,20,0.40); } /* ============================================================== 6. NAVIGATION ============================================================== */ .wap_menu { background: var(--bg-menu) !important; box-shadow: 0 3px 14px rgba(0,0,0,0.22); } .menu ul li a { letter-spacing: .4px; transition: color var(--ease), background var(--ease); } /* Dropdown */ .menu ul li ul { background: var(--bg-card) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; box-shadow: var(--sh-md) !important; border-top: 3px solid var(--color-main) !important; z-index: 99999 !important; } .menu ul li ul li a { color: var(--txt-main) !important; border-bottom: 1px solid var(--border) !important; transition: background var(--ease), color var(--ease), padding-left var(--ease); } .menu ul li ul li a:hover { background: var(--bg-alt2) !important; color: var(--color-main) !important; padding-left: 22px !important; } /* Mobile menu */ .menu_mobi { background: var(--bg-menu-mobile) !important; color: var(--txt-main) !important; } .menu_mobi_add { background: var(--bg-card) !important; color: var(--txt-main) !important; } .menu_mobi_add ul li a { color: var(--txt-main) !important; border-bottom-color: var(--border) !important; } /* ============================================================== 7. SECTION BACKGROUNDS — alternating, vibrant ============================================================== */ .wap_sanpham { background: var(--bg-alt2) !important; padding: 45px 0; } .wap_tintuc { background: var(--bg-alt) !important; padding: 45px 0; } .wap_doitac { background: var(--bg-page) !important; padding: 35px 0; } .wap_gioithieu{ background: var(--bg-alt) !important; } .main_content { background: var(--bg-page) !important; } /* ============================================================== 8. SECTION TITLES — centered with decorative flanking lines ============================================================== */ .title-main { border-bottom: none; padding-bottom: 0; margin-bottom: 36px; text-align: center; } .title-main::before { display: none; } .title-main span { font-size: 28px; font-weight: 700; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 16px; color: var(--txt-main); } .title-main span::before, .title-main span::after { content: ''; display: block; width: 52px; height: 3px; background: var(--grad-primary); border-radius: 2px; flex-shrink: 0; } /* ============================================================== 9. PRODUCT CARDS ============================================================== */ .item { background: var(--bg-card) !important; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--ease), box-shadow var(--ease); display: flex; flex-direction: column; border: 1px solid var(--border); } .item:hover { transform: translateY(-7px); box-shadow: var(--sh-card-hover); } .item .img_sp { margin-bottom: 0; background: var(--bg-alt); overflow: hidden; aspect-ratio: 1 / 1; } .item .img_sp a { display: block; width: 100%; height: 100%; position: relative; } .item .img_sp a img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .item:hover .img_sp a img { transform: scale(1.07); } /* "View Detail" strip slides up from bottom on hover */ .item .img_sp a::after { content: 'View Detail'; position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0; background: rgba(229,9,20,0.88); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-align: center; text-transform: uppercase; transform: translateY(100%); transition: transform .3s cubic-bezier(0.4,0,0.2,1); } .item:hover .img_sp a::after { transform: translateY(0); } /* SKU above product name */ .item .sku_sp { padding: 8px 12px 0; font-size: 12px; color: var(--txt-muted); line-height: 1.2; text-align: left; } .item .name_sp { padding: 4px 12px 4px; text-align: left; } .item .name_sp a, .item .name_sp span { font-size: 17px; color: var(--txt-main) !important; text-transform: none !important; } .item .name_sp a:hover { color: var(--color-main) !important; } /* In Stock badge */ .item .instock_sp { padding: 2px 12px 4px; font-size: 18px !important; font-family: 'menu' !important; color: #27ae60 !important; text-align: left; } /* Price block — inline: sale price then old price struck through */ .item .gia_sp { padding: 4px 12px 10px; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; text-align: left; } /* Discounted / sale price — bold, red */ .item .gia_sp .giamoi { font-size: 17px; font-weight: 700; color: var(--txt-price) !important; font-family: 'tieude'; } /* Original / old price — small, muted, strikethrough */ .item .gia_sp .giacu { font-size: 13px !important; color: var(--txt-muted) !important; text-decoration: line-through; padding-left: 0 !important; font-family: 'body'; } /* Regular price (no discount) */ .item .gia_sp > span { color: var(--txt-price) !important; font-size: 17px; font-weight: 700; } /* Cart buttons row */ .cart-product { padding: 0 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; } /* Qty counter */ .qty-card { display: flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; height: 32px; } .cart-product .qty-card-btn { width: 26px; text-align: center; line-height: 30px; cursor: pointer; color: var(--txt-sub) !important; font-size: 17px !important; font-weight: 700; padding: 0 !important; user-select: none; background: transparent !important; transition: background var(--ease), color var(--ease); } .cart-product .qty-card-btn:hover { background: #3d3d3d !important; color: #fff !important; } .qty-card-input { width: 28px; text-align: center; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: transparent; color: var(--txt-main); font-size: 13px; outline: none; padding: 0; -moz-appearance: textfield; } .qty-card-input::-webkit-inner-spin-button, .qty-card-input::-webkit-outer-spin-button { -webkit-appearance: none; } /* Add to cart button */ .cart-buy { background: #3d3d3d !important; color: #fff !important; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-align: center; padding: 0 6px; line-height: 32px; height: 32px; display: block; transition: opacity var(--ease), transform var(--ease); } .cart-buy:hover { opacity: .86; transform: translateY(-1px); } /* ============================================================== 10. PRODUCT DETAIL ============================================================== */ .left-pro-detail .MagicZoom { border: 2px solid var(--border) !important; border-radius: var(--radius-md); padding: 8px; background: var(--bg-card); box-shadow: var(--sh-sm); } .album_pro2 img { border: 2px solid var(--border) !important; border-radius: var(--radius-sm); background: var(--bg-card); transition: border-color var(--ease), box-shadow var(--ease); } .album_pro2 img:hover { border-color: var(--color-main) !important; box-shadow: 0 0 0 3px rgba(229,9,20,0.15); } .title-pro-detail { font-size: 24px; border-bottom: 2px solid var(--border) !important; padding-bottom: 14px; color: var(--txt-main) !important; } /* Stock status — plain text */ .stock-status { font-size: 18px !important; font-family: 'menu' !important; margin-bottom: 6px; } .stock-in { color: #27ae60 !important; } .stock-out { color: var(--txt-muted); } .price-new-pro-detail { font-size: 30px; background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @supports not (-webkit-background-clip: text) { .price-new-pro-detail { color: var(--txt-price) !important; background: none; } } [data-theme="dark"] .price-new-pro-detail { background: none !important; -webkit-text-fill-color: var(--txt-price) !important; color: var(--txt-price) !important; } .attr-label-pro-detail { color: var(--txt-sub) !important; } .attr-content-pro-detail { color: var(--txt-main) !important; } .size-pro-detail { border: 1px solid var(--border-input) !important; border-radius: var(--radius-sm); color: var(--txt-main) !important; background: var(--bg-card) !important; margin: 3px; transition: border-color var(--ease), color var(--ease); } .size-pro-detail:hover { border-color: var(--color-main) !important; color: var(--color-main) !important; } .size-pro-detail.active { border-color: var(--color-main) !important; color: var(--color-main) !important; } .quantity-pro-detail { border: 1px solid var(--border-input) !important; border-radius: var(--radius-sm); background: var(--bg-card) !important; overflow: hidden; } .quantity-pro-detail span { color: var(--txt-sub) !important; } .quantity-pro-detail input { background: var(--bg-card) !important; color: var(--txt-main) !important; } .cart-pro-detail a { border-radius: var(--radius-sm) !important; transition: opacity var(--ease), transform var(--ease); letter-spacing: .5px; } .cart-pro-detail a:hover { opacity: .86; transform: translateY(-2px); } .cart-pro-detail a.addnow { background: var(--grad-primary) !important; } .cart-pro-detail a.buynow { background: var(--grad-green) !important; } /* Tabs */ .tabs-pro-detail { background: var(--bg-card); border-radius: var(--radius-md); padding: 20px; } .tabs-pro-detail .ul-tabs-pro-detail { border-bottom-color: var(--border) !important; } .tabs-pro-detail .ul-tabs-pro-detail li { background: var(--bg-alt) !important; color: var(--txt-sub) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: background var(--ease), color var(--ease); } .tabs-pro-detail .ul-tabs-pro-detail li.active { background: var(--grad-primary) !important; color: #fff !important; } .tabs-pro-detail .content-tabs-pro-detail { color: var(--txt-main) !important; } .desc-pro-detail { color: var(--txt-sub) !important; } /* Related products title */ .grid-pro-detail + .title-main, .wap_item + .title-main { margin-top: 10px; } /* ============================================================== 11. NEWS / BLOG CARDS ============================================================== */ .item_news { border: 1px solid var(--border) !important; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--sh-sm); background: var(--bg-card) !important; transition: transform var(--ease), box-shadow var(--ease); } .item_news:hover { transform: translateY(-5px); box-shadow: var(--sh-md); } .item_news .img_post { overflow: hidden; } .item_news .img_post img { transition: transform .5s ease; width: 100%; } .item_news:hover .img_post img { transform: scale(1.06); } .item_news .name_post { padding: 12px 15px 6px; font-size: 15px; font-weight: 600; color: var(--txt-main) !important; } .item_news .name_post:hover { color: var(--txt-link) !important; } .item_news .desc_post { padding: 0 15px 14px; font-size: 14px; color: var(--txt-sub) !important; } /* News list item */ .item_tin .name_post,.news_left .name_post { color: var(--txt-main) !important; } .item_tin .name_post:hover,.news_left .name_post:hover { color: var(--txt-link) !important; } .item_tin .desc_post,.news_left .desc_post { color: var(--txt-sub) !important; } /* News detail */ .content-main, #toc-content { color: var(--txt-main) !important; } .list-news-other li a { color: var(--txt-sub) !important; } .list-news-other li a:hover { color: var(--txt-link) !important; } .othernews b { color: var(--txt-main) !important; } /* ============================================================== 12. BREADCRUMB ============================================================== */ .breadCrumbs { background: var(--bg-breadcrumb) !important; border-bottom: 1px solid var(--breadcrumb-border); } .breadCrumbs .breadcrumb-item a { color: var(--txt-sub) !important; transition: color var(--ease); } .breadCrumbs .breadcrumb-item a:hover { color: var(--txt-link) !important; } .breadCrumbs .breadcrumb-item.active a { color: var(--txt-muted) !important; } .breadCrumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--txt-muted) !important; content: ">" !important; } /* ============================================================== 13. PAGINATION ============================================================== */ .pagination-home .pagination .page-item .page-link { border-radius: var(--radius-sm) !important; border: 1px solid var(--border-input) !important; margin: 0 3px; background: var(--bg-card) !important; color: var(--txt-sub) !important; transition: background var(--ease), color var(--ease), border-color var(--ease); } .pagination-home .pagination .page-item .page-link:hover { background: var(--color-main) !important; border-color: var(--color-main) !important; color: #fff !important; } .pagination-home .pagination .page-item.active .page-link { background: var(--grad-primary) !important; border-color: var(--color-main) !important; color: #fff !important; } /* ============================================================== 14. FOOTER ============================================================== */ .wap_footer { background: var(--bg-footer) !important; color: var(--txt-footer) !important; padding: 55px 0 30px; } .title_f { color: var(--txt-footer-h) !important; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--color-main) !important; } .title_f::before { display: none; } .item_f ul li a { color: var(--txt-footer) !important; padding: 6px 0; border-bottom: 1px solid var(--border) !important; transition: color var(--ease), padding-left var(--ease); } .item_f ul li a:hover { color: var(--color-main) !important; padding-left: 7px; } .wap_footer p, .wap_footer span, .wap_footer div { color: var(--txt-footer); } .wap_copy { background: var(--bg-copy) !important; padding: 12px 0; } .copy { border-top: 1px solid var(--border) !important; } .wap_copy * { color: var(--txt-footer) !important; } .wap_copy a:hover { color: var(--color-main) !important; } /* Newsletter bar */ .wap_nhantin_f { background: var(--bg-newsletter) !important; } .nhantin_f .td { color: #fff !important; } .form-newsletter { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.20); } .form-newsletter .newsletter-button input { background: #111 !important; cursor: pointer; letter-spacing: .5px; transition: background var(--ease); } .form-newsletter .newsletter-button input:hover { background: #000 !important; } /* Partner logos */ .doitac img { border-radius: var(--radius-sm); border: 1px solid var(--border); transition: box-shadow var(--ease), transform var(--ease); } .doitac img:hover { box-shadow: var(--sh-md); transform: scale(1.04); } /* ============================================================== 15. CONTACT PAGE ============================================================== */ .article-contact { color: var(--txt-main) !important; } .input-contact input, .input-contact textarea { background: var(--bg-input) !important; border: 1.5px solid var(--border-input) !important; color: var(--txt-main) !important; border-radius: var(--radius-sm) !important; padding: 10px 14px !important; text-indent: 0 !important; transition: border-color var(--ease), box-shadow var(--ease); } .input-contact input::placeholder, .input-contact textarea::placeholder { color: var(--txt-muted); } .input-contact input:focus, .input-contact textarea:focus { border-color: var(--color-main) !important; box-shadow: 0 0 0 3px rgba(229,9,20,0.10) !important; background: var(--bg-card) !important; outline: none; } /* ============================================================== 16. CART / CHECKOUT PAGE — full theme treatment ============================================================== */ /* ---- Outer wrapper ---- */ .wrap-cart { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--txt-main) !important; border-radius: var(--radius-md); } /* ---- Left column (product list) ---- */ .top-cart { border-right-color: var(--border) !important; } /* Header row */ .procart-label { background: var(--bg-alt) !important; color: var(--txt-sub) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .procart-label div { color: var(--txt-sub) !important; } /* Product rows */ .procart { border-color: var(--border) !important; background: var(--bg-card) !important; } .name-procart a { color: var(--txt-main) !important; } .name-procart a:hover { color: var(--txt-link) !important; } .properties-procart p { color: var(--txt-sub) !important; } .properties-procart p strong { color: var(--txt-main) !important; } /* Prices */ .price-new-cart { color: var(--txt-price) !important; font-weight: 700; font-size: 16px !important; } .price-old-cart { color: var(--txt-muted) !important; text-decoration: line-through; font-size: 13px !important; } /* Delete link */ .pic-procart .del-procart { color: var(--txt-muted) !important; } .pic-procart .del-procart:hover { color: var(--color-main) !important; } /* Quantity counter */ .quantity-counter-procart { border: 1px solid var(--border-input) !important; border-radius: var(--radius-sm); background: var(--bg-input) !important; overflow: hidden; } .counter-procart { background: transparent !important; color: var(--txt-sub) !important; } .counter-procart:hover, .counter-procart:focus { color: var(--color-main) !important; } .counter-procart:disabled, .counter-procart:disabled:hover { color: var(--txt-muted) !important; } .quantity-counter-procart .quantity-procat { background: var(--bg-input) !important; color: var(--txt-main) !important; border-color: var(--border-input) !important; } /* Totals */ .money-procart { border-top: 2px solid var(--border) !important; } .total-procart { background: var(--bg-total) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); margin-bottom: 4px !important; padding: 10px 14px !important; } .total-procart p { color: var(--txt-main) !important; font-size: 17px !important; font-weight: 600; } .total-procart p:last-child { color: var(--txt-price) !important; font-size: 22px !important; font-weight: 700; font-family: 'tieude'; } /* Buy more / continue link */ .buymore-cart { color: var(--txt-link) !important; } /* ---- Right column (checkout form) ---- */ .section-cart { background: transparent; } .title-cart { color: var(--color-main) !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 8px; margin-bottom: 14px; } /* All text inputs, textareas, standard selects */ .input-cart input, .input-cart textarea, .input-cart select, .form-cart .form-control { background: var(--bg-input) !important; border: 1.5px solid var(--border-input) !important; color: var(--txt-main) !important; border-radius: var(--radius-sm) !important; transition: border-color var(--ease), box-shadow var(--ease), background var(--ease); } .input-cart input::placeholder, .input-cart textarea::placeholder { color: var(--txt-muted) !important; } .input-cart input:focus, .input-cart textarea:focus, .input-cart select:focus, .form-cart .form-control:focus { border-color: var(--color-main) !important; box-shadow: 0 0 0 3px rgba(229,9,20,0.10) !important; background: var(--bg-card) !important; outline: none; } /* Disabled / readonly */ .form-cart .form-control:disabled, .form-cart .form-control[readonly] { background: var(--bg-alt) !important; color: var(--txt-muted) !important; } /* Bootstrap custom-select — must override background shorthand AND replace SVG arrow with light version */ .custom-select, .input-cart .custom-select, .select-city-cart, .select-district-cart, .select-wards-cart { background-color: var(--bg-input) !important; color: var(--txt-main) !important; border: 1.5px solid var(--border-input) !important; border-radius: var(--radius-sm) !important; } [data-theme="dark"] .custom-select, [data-theme="dark"] .input-cart .custom-select, [data-theme="dark"] .select-city-cart, [data-theme="dark"] .select-district-cart, [data-theme="dark"] .select-wards-cart { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23c9d1d9' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 8px 10px !important; } /* select option text in dark mode (system-rendered, best effort) */ [data-theme="dark"] select option { background: var(--bg-card); color: var(--txt-main); } /* Bootstrap custom-radio / custom-control (payment method radio buttons) */ .custom-control-label { color: var(--txt-main) !important; } .custom-control-label::before { background-color: var(--bg-input) !important; border-color: var(--border-input) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--color-main) !important; border-color: var(--color-main) !important; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(229,9,20,0.20) !important; } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--color-main) !important; } /* Payment method labels — cart.css uses color:#313131!important so we match specificity + order */ .payments-label { background: var(--bg-payment) !important; color: var(--txt-payment) !important; border-radius: var(--radius-sm) !important; transition: background var(--ease), color var(--ease); } .payments-label.active { background: var(--grad-primary) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(229,9,20,0.30); } .payments-info { background: var(--bg-alt) !important; color: var(--txt-sub) !important; border-radius: var(--radius-sm); } .payments-info p { color: var(--txt-sub) !important; } /* Invoice / VAT section */ .xhd_an { background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); padding: 14px; margin-top: 6px; } label.xuahoadon { color: var(--txt-main) !important; } label.xuahoadon input[type="checkbox"] { accent-color: var(--color-main); } /* Terms text below submit button */ .form-cart > p, .section-cart > p, .section-cart p[style] { color: var(--txt-sub) !important; } .section-cart p a { color: var(--txt-link) !important; } /* Validation messages */ .invalid-feedback { color: #ff6b7a !important; } /* Checkout button */ .btn-cart { background: var(--grad-primary) !important; border: none !important; border-radius: var(--radius-sm) !important; color: #fff !important; letter-spacing: .5px; box-shadow: 0 4px 16px rgba(229,9,20,0.30) !important; transition: opacity var(--ease), transform var(--ease) !important; margin-top: 14px; } .btn-cart:hover:not([disabled]) { opacity: .88 !important; transform: translateY(-2px) !important; } .btn-cart:disabled { color: rgba(255,255,255,0.70) !important; } /* Empty cart state */ .empty-cart { color: var(--txt-sub) !important; } .empty-cart p { color: var(--txt-sub) !important; } .empty-cart i { color: var(--txt-price) !important; } .empty-cart span { border: 1px solid var(--color-main) !important; border-radius: var(--radius-sm) !important; color: var(--color-main) !important; transition: background var(--ease), color var(--ease); } .empty-cart span:hover { background: var(--color-main) !important; color: #fff !important; } /* ============================================================== 17. ABOUT / INTRO ============================================================== */ .desc_gt, .title_gt { color: var(--txt-main) !important; } .gioithieu .xemthem a { border-radius: var(--radius-sm); background: var(--grad-primary) !important; transition: opacity var(--ease), transform var(--ease); box-shadow: 0 3px 12px rgba(229,9,20,0.28); } .gioithieu .xemthem a:hover { opacity: .87; transform: translateY(-2px); } /* ============================================================== 18. SHARE / SOCIAL ============================================================== */ .share { background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm); } .share b { color: var(--txt-main) !important; } /* ============================================================== 19. SCROLL TO TOP ============================================================== */ .scrollToTop { background: var(--grad-primary) !important; color: #fff !important; border-radius: 50%; box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; transition: transform var(--ease), box-shadow var(--ease); } .scrollToTop:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); color: #fff !important; } /* ============================================================== 20. SUCCESS / ORDER PAGE ============================================================== */ .thanhcong { background: var(--bg-card) !important; } .thanhcong_l, .thanhcong_r { color: var(--txt-main) !important; } /* ============================================================== 21. STATIC / CONTENT PAGES ============================================================== */ .content-main, .w_1000 { color: var(--txt-main) !important; } .w_1000 h1,.w_1000 h2,.w_1000 h3 { color: var(--txt-main) !important; } /* ============================================================== 22. ALERTS & GENERIC ELEMENTS ============================================================== */ .alert { background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-left: 4px solid var(--color-main) !important; border-radius: var(--radius-sm) !important; color: var(--txt-main) !important; } /* Tables */ table { color: var(--txt-main) !important; border-color: var(--border) !important; } thead { background: var(--bg-alt) !important; } td, th { border-color: var(--border) !important; color: var(--txt-main) !important; } /* Modals */ .modal-content { background: var(--bg-card) !important; color: var(--txt-main) !important; border: 1px solid var(--border) !important; } .modal-header, .modal-footer { border-color: var(--border) !important; background: var(--bg-alt) !important; } .modal-title { color: var(--txt-main) !important; } /* ============================================================== 23. RESPONSIVE — dark mode mobile menu ============================================================== */ @media screen and (max-width: 960px) { .menu_mobi_add ul li a { color: var(--txt-main) !important; border-bottom-color: var(--border) !important; } .menu_mobi_add ul li a i { border-color: var(--border) !important; } .menu_baophu { background: rgba(0,0,0,0.80) !important; } /* Mobile search bar */ .search_m { background: var(--bg-input) !important; border-color: var(--border-input) !important; } .search_m input { color: var(--txt-main) !important; } /* Mobile menu toggle bar */ .menu_mobi { background: var(--bg-menu-mobile) !important; color: #fff !important; } .menu_mobi .icon_menu_mobi { color: #fff !important; } } /* ============================================================== 24. GLOBAL FORM CONTROLS (all pages) ============================================================== */ .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], select, textarea { background-color: var(--bg-input) !important; color: var(--txt-main) !important; border-color: var(--border-input) !important; transition: border-color var(--ease), background-color var(--ease); } .form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { border-color: var(--color-main) !important; box-shadow: 0 0 0 3px rgba(229,9,20,0.09) !important; background-color: var(--bg-card) !important; outline: none; } input::placeholder, textarea::placeholder { color: var(--txt-muted) !important; } /* ============================================================== 25. INFO BAR — force visible text on dark background ============================================================== */ [data-theme="dark"] .wap_thongtin *, [data-theme="dark"] .wap_thongtin { color: #fff !important; } [data-theme="dark"] .wap_thongtin .mienship b { color: #FFE401 !important; } [data-theme="dark"] .close_tt::before, [data-theme="dark"] .close_tt::after { background: #fff !important; } /* ============================================================== 26. TOC / READ-MORE BOX ============================================================== */ .box-readmore { background: var(--bg-alt) !important; border-color: var(--border) !important; color: var(--txt-main) !important; } .box-readmore ul li a { color: var(--txt-sub) !important; } .box-readmore ul li a:hover { color: var(--txt-link) !important; } /* ============================================================== 27. LOGIN / ACCOUNT PAGE ============================================================== */ .wrap-user { background: var(--bg-card) !important; border-color: var(--border) !important; } .title-user { background: var(--bg-alt) !important; border-color: var(--border) !important; } .title-user span { color: var(--txt-main) !important; } .title-user a { color: var(--txt-link) !important; } .note-user { border-top-color: var(--border) !important; color: var(--txt-sub) !important; } .form-user label { color: var(--txt-main) !important; } .button-user input[type="submit"], .button-user button { background: var(--grad-primary) !important; border: none !important; color: #fff !important; border-radius: var(--radius-sm) !important; } /* ============================================================== 28. NEWS LIST — hardcoded text colors ============================================================== */ .item_news2 .name_post { color: var(--txt-main) !important; } .item_news2 .name_post:hover { color: var(--txt-link) !important; } .item_news2 .desc_post { color: var(--txt-sub) !important; } /* ============================================================== 29. PRODUCT DETAIL — misc elements ============================================================== */ /* Price block on detail page — inline: new price first, old price struck through */ .price-block-detail { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; } .price-new-pro-detail { line-height: 1.2; } .price-old-pro-detail { color: var(--txt-muted) !important; text-decoration: line-through; font-size: 16px !important; font-family: 'body'; line-height: 1.3; } /* Category filter/sort links */ .title-main ul li a { color: var(--txt-sub) !important; } .title-main ul li a:hover { color: var(--txt-link) !important; } /* ============================================================== 30. LOADING OVERLAY IN CART ============================================================== */ [data-theme="dark"] .bottom-cart .load-cart { background: rgba(13,17,23,0.75) url(../images/lazy2.gif) center no-repeat !important; } /* ============================================================== 31. PLUGBAR / FIXBAR (mobile bottom nav) ============================================================== */ .plugbar { background: var(--bg-card) !important; border-top-color: var(--border) !important; } .plugbar ul li a, .plugbar ul li a i { color: var(--txt-sub) !important; } .fixbar { background: var(--bg-alt) !important; border-top-color: var(--border) !important; } .fixbar ul li a { color: var(--txt-sub) !important; } /* ============================================================== 32. FACEBOOK MESSENGER TOOLTIP (dark) ============================================================== */ [data-theme="dark"] .js-facebook-messenger-tooltip { background: var(--bg-card) !important; color: var(--txt-main) !important; border-color: var(--border) !important; } /* ============================================================== 33. MISC HARDCODED COLORS ============================================================== */ /* Title-intro (news section headers) */ .title-intro { border-bottom-color: var(--border) !important; } .title-intro span { color: var(--txt-main) !important; } /* News day/time */ .news_left .day_post { color: var(--txt-muted) !important; } .time-main { color: var(--txt-muted) !important; } /* "View more" button in news */ .news_left .view_post a { background: var(--grad-primary) !important; color: #fff !important; } /* Order success / thanks page */ .thanhcong { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md); } /* Bootstrap badge / label overrides */ .badge { color: #fff !important; } /* ============================================================== 34. CART BUTTON & ICON DARK MODE FIXES ============================================================== */ /* Header cart icon — background image is dark, invert in dark mode */ [data-theme="dark"] .cart-fixed { filter: invert(1) brightness(1.5) !important; } /* Checkout submit button — ensure text is always white */ .btn-cart { color: #fff !important; } .btn-cart:disabled { color: rgba(255,255,255,0.75) !important; } /* Delete button on cart items — more visible in dark mode */ .del-procart { color: var(--txt-muted) !important; transition: color var(--ease); } .del-procart:hover { color: var(--color-main) !important; } .del-procart i { color: inherit !important; } /* Cart action button text — only target the green buy button, not qty spans */ .cart-product .cart-buy { color: #fff !important; } /* Detail page cart buttons — text always white */ .cart-pro-detail a, .cart-pro-detail a.addnow, .cart-pro-detail a.buynow { color: #fff !important; } /* Cart popup modal — dark backgrounds */ [data-theme="dark"] #popup-cart .modal-content { background: var(--bg-card) !important; } [data-theme="dark"] #popup-cart .modal-footer { background: var(--bg-alt) !important; } /* ============================================================== 35. RESPONSIVE — dark mode mobile menu ============================================================== */ @media screen and (max-width: 960px) { [data-theme="dark"] .menu_mobi_add { background: var(--bg-card) !important; color: var(--txt-main) !important; } [data-theme="dark"] .menu_mobi_add ul li a { color: var(--txt-main) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .menu_mobi_add ul ul { background: var(--bg-alt) !important; } } /* ============================================================== 36. NAVIGATION — active item accent & hover underline ============================================================== */ /* Override hardcoded white text from style.css */ .menu ul li > a { color: #333 !important; } .menu ul li > a:hover, .menu ul li > a.active, .menu ul li > a.active2 { color: var(--color-main) !important; } /* Dark mode: restore white text */ [data-theme="dark"] .menu ul li > a { color: #fff !important; } [data-theme="dark"] .menu ul li > a:hover, [data-theme="dark"] .menu ul li > a.active { color: var(--txt-footer-h) !important; } .menu > ul > li > a { position: relative; } /* Animated underline that slides in on hover / active */ .menu > ul > li > a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 60%; height: 3px; background: var(--color-main); border-radius: 2px 2px 0 0; transform: translateX(-50%) scaleX(0); transition: transform var(--ease); } .menu > ul > li > a:hover::after, .menu > ul > li > a.active::after { transform: translateX(-50%) scaleX(1); } /* ============================================================== 37. TRUST / USP BAR ============================================================== */ .trust-bar { background: var(--bg-card); border-bottom: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.05); padding: 9px 0; transition: background 0.35s ease; } .trust-bar-inner { display: flex; align-items: center; justify-content: space-around; gap: 8px; } .trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--txt-sub); white-space: nowrap; transition: color var(--ease); } .trust-item i { color: var(--color-main); font-size: 16px; flex-shrink: 0; } .trust-item:hover { color: var(--txt-main); } /* ============================================================== 38. CSS SCROLL-DRIVEN REVEAL ANIMATIONS ============================================================== */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .item, .item_news, .item_news2 { animation: revealCard linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; } @keyframes revealCard { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } } } /* ============================================================== 39. PRODUCT CARD — text clamping & image polish ============================================================== */ /* Clamp product name to 2 lines so all cards align uniformly */ .item .name_sp a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; min-height: 2.9em; } /* ============================================================== 40. MOBILE RESPONSIVE FIXES ============================================================== */ /* Prevent horizontal overflow site-wide */ html, body { overflow-x: clip; max-width: 100%; } .wapper { overflow-x: clip; } /* Flex/grid children must be allowed to shrink below content size */ .item, .item .name_sp, .item .sku_sp, .item .instock_sp, .item .gia_sp, .item .cart-product { min-width: 0; } /* All text elements wrap — use 'anywhere' so Vietnamese long syllable strings break even without a space character */ .item .sku_sp, .item .name_sp, .item .instock_sp, .item .gia_sp, .item .cart-product, .right-pro-detail, .desc-pro-detail, .content-tabs-pro-detail { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } /* Price row: wrap onto two lines if needed */ .item .gia_sp { flex-wrap: wrap; row-gap: 2px; } /* Tablet: 960px and below */ @media screen and (max-width: 960px) { .item .instock_sp { font-size: 15px !important; } .item .name_sp { font-size: 15px !important; } .item .sku_sp { font-size: 12px !important; } .item .gia_sp .giamoi { font-size: 15px !important; } .item .gia_sp .giacu { font-size: 12px !important; } /* Product detail page — ensure right panel doesn't overflow */ .right-pro-detail { overflow-x: hidden; } .price-block-detail { flex-wrap: wrap; } .attr-content-pro-detail { max-width: 100%; } /* Size/variant buttons wrap */ .size-pro-detail { white-space: normal; word-break: break-word; } } /* Mobile: 603px and below (2-column card grid) */ @media screen and (max-width: 603px) { .item .instock_sp { font-size: 13px !important; } .item .name_sp { font-size: 13px !important; } .item .sku_sp { font-size: 11px !important; } .item .gia_sp .giamoi { font-size: 13px !important; } .item .gia_sp .giacu { font-size: 11px !important; } /* Stack qty + cart-buy vertically so long VI text gets full width */ .item .cart-product { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; padding: 0 8px 10px !important; } .item .cart-product .qty-card { width: 90px; } .item .cart-product .cart-buy { width: 100% !important; font-size: 11px !important; padding: 6px 4px !important; text-align: center !important; white-space: normal !important; line-height: 1.3 !important; } /* Product detail */ .price-new-pro-detail { font-size: 20px !important; } .price-old-pro-detail { font-size: 14px !important; } .title-pro-detail { font-size: 18px !important; } .stock-status { font-size: 15px !important; } /* Desc and tabs — ensure content doesn't bleed */ .desc-pro-detail, .content-tabs-pro-detail { overflow-x: auto; max-width: 100%; word-break: break-word; } .content-tabs-pro-detail img, .desc-pro-detail img { max-width: 100% !important; height: auto !important; } } /* Small phones: 400px and below */ @media screen and (max-width: 400px) { .item .instock_sp { font-size: 12px !important; } .item .name_sp { font-size: 12px !important; } .item .gia_sp .giamoi { font-size: 12px !important; } .price-new-pro-detail { font-size: 18px !important; } }