/** * RESPONSIVE CSS - HYBRID APPROACH * * Project: PcccDahua (Yii 1.1 E-commerce) * Purpose: Mobile-friendly responsive design for small screens ONLY * Desktop (> 960px) preserves original layout completely * * IMPORTANT: * - Desktop (> 960px): NO changes, original CSS preserved 100% * - Tablet/Mobile (≤ 960px): Responsive overrides applied * * Breakpoints: * ├─ Mobile: < 768px (phones) * ├─ Tablet: 768-960px (tablets) * └─ Desktop: > 960px (NO responsive.css applied!) * * Architecture: * ├─ All styles wrapped in @media (max-width: 960px) * ├─ Desktop uses original CSS (style.css, common.css, etc.) * └─ NO mobile-first defaults to avoid desktop conflicts * * Usage: Load AFTER all other CSS in * * * Tested on: Chrome, Firefox, Safari, Edge * Last Updated: Feb 6, 2026 * Status: PRODUCTION READY */ /* ============================================================ CSS VARIABLES (Design tokens for responsive only) ============================================================ */ :root { /* Spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px; /* Colors */ --color-primary: #1E76A0; --color-accent: #C81B1B; --color-bg: #F5F5F5; --color-text: #333; --color-border: #ccc; } /* ============================================================ TABLET & MOBILE ONLY (max-width: 960px) Desktop (> 960px) uses ORIGINAL CSS completely ============================================================ */ @media (max-width: 960px) { /* Global resets for small screens */ img { max-width: 100%; height: auto; } /* Container - full width, no padding */ #noidung { width: 100% !important; max-width: 100% !important; box-sizing: border-box; padding: 0 !important; margin: 0 !important; } #noidung h1 img { width: 100%; height: auto; } /* Main product section - add padding only to middle content */ .main { padding: 0 var(--sp-md); margin: var(--sp-md) 0 0; } /* Search + Cart area - full width, no margin */ .subnav { display: flex; flex-direction: row; align-items: center; gap: var(--sp-sm); background: var(--color-primary) !important; padding: var(--sp-sm) var(--sp-md); margin: 0 !important; width: 100%; } #search { float: none !important; width: auto !important; border: none !important; order: 1; flex: 1 1 auto; } #search form { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: nowrap; } .subnav .form_search { position: static !important; margin: 0 !important; width: 100% !important; float: none !important; display: flex !important; align-items: center; } #search input { width: 100% !important; } .subnav .form_search input { margin-bottom: 0 !important; height: 36px; } .ip-search { width: auto !important; flex: 1 1 auto; float: none !important; border: 0 !important; } #search button, #search input[type="submit"] { width: auto !important; flex: 0 0 auto; white-space: nowrap; } #form_search { float: none !important; margin: 0 !important; border: 0 !important; background: var(--color-accent) !important; padding: 0 var(--sp-md) !important; height: 36px; display: flex !important; align-items: center; justify-content: center; } #form_search span { float: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap; line-height: 1; } #cart-order { float: none !important; width: auto !important; border: none !important; order: 2; flex: 0 0 auto; } .subnav a.cart { float: none; position: static !important; width: auto; text-align: center; padding: var(--sp-md) var(--sp-lg); white-space: nowrap; } .subnav a.cart { font-size: 0 !important; } .subnav a.cart .ic-cart { font-size: 16px; } /* Main content - full width, no extra padding */ #phai { width: 100% !important; float: none !important; margin: 0 !important; margin-bottom: var(--sp-lg); } #phai img { max-width: 100%; height: auto; } /* Product items - 2 per row on mobile */ .theanh { width: calc(50% - var(--sp-sm)) !important; float: left !important; margin: 0 var(--sp-sm) var(--sp-md) 0 !important; padding-right: 0 !important; text-align: center; } .theanh:nth-child(2n) { margin-right: 0 !important; } .theanh .img { width: 100% !important; } .theanh .img img, .theanh .dienthoai img { width: 100% !important; height: auto; } /* Sidebar - show category toggle on mobile */ #trai { width: 100% !important; float: none !important; padding: var(--sp-md) !important; display: block; } .sidebar_box { margin-bottom: var(--sp-lg); width: 100%; } #trai .sidebar_box { display: none; } #trai .sidebar-categories { display: block; } .sidebar-categories .tieude { display: none; } .category-toggle { display: block; width: 100%; border: 0; padding: var(--sp-md); background: var(--color-primary); color: #fff; font-weight: 700; text-transform: uppercase; text-align: center; } .sidebar-categories .sidebar-menu { display: none; margin-top: var(--sp-sm); } .sidebar-categories.is-open .sidebar-menu { display: block; } #box-cate ul ul { position: static !important; left: auto !important; top: auto !important; opacity: 1 !important; display: block !important; box-shadow: none !important; padding-left: var(--sp-md); } .sidebar_box table { width: 100% !important; } /* Hide hamburger button on mobile */ .mobile-menu-toggle { display: none !important; } /* Menu ngang - always visible, scroll horizontally on small screens */ #cssmenu { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; width: 100% !important; background: var(--color-primary) !important; overscroll-behavior-x: contain; } #cssmenu > ul { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; background: var(--color-primary) !important; margin: 0 !important; padding: 0 !important; list-style: none; width: max-content !important; min-width: 100%; } #cssmenu > ul > li { display: block !important; flex-shrink: 0 !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; float: none !important; border-right: 1px solid rgba(255,255,255,0.2) !important; } #cssmenu > ul > li:last-child { border-right: none !important; } #cssmenu > ul > li > a { display: block !important; padding: var(--sp-lg) var(--sp-xl) !important; border: none !important; color: white !important; background: transparent !important; text-decoration: none; font-size: 14px; font-weight: bold; text-transform: uppercase !important; transition: background-color 0.2s ease; } #cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover { background: rgba(0, 0, 0, 0.2) !important; } #cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a { background-color: var(--color-bg); color: var(--color-primary) !important; } #cssmenu > ul > li.active > a { color: #fff !important; } /* Blog/News layout - prevent fixed widths from overflowing */ .post-hl, .post-new, .box-relation-post, .box_news { width: 100% !important; float: none !important; margin-right: 0 !important; box-sizing: border-box !important; } .colum-summary, .colum-img { width: 100% !important; float: none !important; margin-left: 0 !important; } .box-post-hl img, .post-new img, .img_news { max-width: 100% !important; height: auto !important; } /* News headline item: image left, text right */ .box-post-hl { display: flex; align-items: flex-start; gap: var(--sp-sm); flex-wrap: nowrap; overflow: hidden; } .box-post-hl .colum-img { flex: 0 0 120px; } .box-post-hl .colum-img img { width: 120px !important; height: auto !important; display: block; max-width: 120px !important; } .box-post-hl .colum-summary { flex: 1 1 auto; min-width: 0; overflow: hidden; word-break: break-word; } /* News list items: image left, text right */ .post-new { display: flex; align-items: flex-start; gap: var(--sp-sm); flex-wrap: nowrap; overflow: hidden; } .post-new .post-img { flex: 0 0 96px; } .post-new .post-img img { width: 96px !important; height: auto !important; display: block; max-width: 96px !important; } .post-new .post-summary { flex: 1 1 auto; min-width: 0; word-break: break-word; overflow: hidden; } /* Post detail content: prevent fixed-width elements from widening the page */ #post-new, #post-new * { max-width: 100% !important; box-sizing: border-box; } #post-new table, #post-new iframe, #post-new embed, #post-new object, #post-new video { width: 100% !important; } #post-new iframe, #post-new embed, #post-new object, #post-new video { height: auto !important; } #post-new pre, #post-new code { white-space: pre-wrap; word-break: break-word; } .post-detail { padding: var(--sp-md); } .cart-page { padding: var(--sp-md); } html, body { overflow-x: hidden; } /* Carousel responsive */ .carousel { overflow: hidden; padding: 0 0 var(--sp-lg); } #carousel { min-height: 360px; } #content, #container { min-height: 360px; } .carousel .viewport { float: none !important; width: 100% !important; height: auto !important; margin-left: 0 !important; min-height: 360px; } .carousel .buttons { display: none; } .carousel .overview li { width: auto; height: auto !important; margin: 0 !important; padding: var(--sp-sm); float: left !important; box-sizing: border-box; } .carousel .overview li .theanh { width: 100% !important; float: none !important; padding: 0 !important; } .carousel .overview li .theanh .img { width: 100% !important; } /* rcarousel uses direct children; prevent global .theanh width from forcing 1 item */ #carousel .theanh { width: auto !important; float: left !important; padding: 0 !important; } #carousel .theanh .img { width: auto !important; } /* Product card image fix on mobile */ .dienthoai { height: auto !important; overflow: hidden; } .dienthoai img, .theanh .img img { max-width: 100% !important; height: auto !important; display: block; } /* Product detail: image on top, info full width */ .product { display: flex; flex-direction: column-reverse; } .product .image, .product .info { width: 100% !important; float: none !important; box-sizing: border-box; } .product .image { padding-top: 0 !important; text-align: center; } .product .info { /* padding: var(--sp-md) 0 0 !important; */ } .product .image .thumb img { width: 100% !important; max-width: 100% !important; height: auto !important; } .related-products { padding: 0 var(--sp-md); } /* Product detail tabs: one line, horizontal scroll */ ul.nav-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } ul.nav-tabs li { float: none; flex: 0 0 auto; white-space: nowrap; } ul.nav-tabs .clear { display: none; } /* Forms - full width */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select { width: 100% !important; box-sizing: border-box; padding: var(--sp-md) !important; margin-bottom: var(--sp-md); } button, .submit_dathang, .submit_chitiet { width: 100% !important; padding: var(--sp-lg) var(--sp-md) !important; margin-bottom: var(--sp-md); cursor: pointer; } /* Keep add-to-cart icon + order button inline on mobile */ .add_to_cart { display: flex; align-items: center; justify-content: center; gap: 0; width: 90%; max-width: 260px; margin: 0 auto; } .add_to_cart .ic-add-to-cart, .add_to_cart .submit_dathang, .add_to_cart .submit_chitiet { width: auto !important; margin-bottom: 0 !important; white-space: nowrap; } .add_to_cart .ic-add-to-cart { display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; line-height: 1; flex: 0 0 44px; height: 36px; border-radius: 3px 0 0 3px; } .add_to_cart .ic-add-to-cart img { display: block; width: 20px !important; height: 18px !important; max-width: none !important; } .add_to_cart .submit_dathang, .add_to_cart .submit_chitiet { font-size: 15px !important; line-height: 36px !important; padding: 0 12px !important; flex: 1 1 auto; text-align: center; border-radius: 0 3px 3px 0; } /* Hide ads on small screens */ .ads-left, .ads-right, #slide_left, #slide_right { display: none !important; } /* Footer - full width, no margin */ #footer { padding: var(--sp-lg) var(--sp-md); margin: 0 !important; width: 100%; } #footer .left, #footer .right { width: 100% !important; float: none !important; margin: 0 0 var(--sp-lg) 0; } .voithan { text-align: center; margin: var(--sp-lg) 0; } .voithan img { max-width: 100%; height: auto; } /* TABLET SPECIFIC (768px - 960px) */ @media (min-width: 768px) { #noidung { padding: 0 var(--sp-lg) !important; } /* Show sidebar below content on tablet */ #trai { display: block !important; } #phai { padding: 0 var(--sp-md) !important; } /* Products in 2 columns on tablet */ .theanh { box-sizing: border-box; width: calc(50% - var(--sp-md)) !important; float: left !important; margin-right: var(--sp-md) !important; } .theanh:nth-child(even) { margin-right: 0 !important; } .theanh:nth-child(odd) { clear: left; } } } /* ============================================================ DESKTOP (> 960px) - Hide hamburger only All other styles from original CSS preserved ============================================================ */ @media (min-width: 961px) { /* Only hide hamburger button on desktop */ .mobile-menu-toggle { display: none !important; } } /* ============================================================ ACCESSIBILITY & TOUCH (mobile/tablet) ============================================================ */ @media (max-width: 960px) and (hover: none) and (pointer: coarse) { /* Touch device - larger tap targets */ a, button { min-height: 44px; min-width: 44px; padding: var(--sp-lg) !important; } #cssmenu > ul > li > a { padding: var(--sp-2xl) var(--sp-lg) !important; } } /* ============================================================ PRINT MEDIA ============================================================ */ @media print { .ads, .ads-left, .ads-right, #cssmenu, .subnav, #trai { display: none !important; } #phai, #noidung { width: 100% !important; max-width: 100%; } } /* ============================================================ DARK MODE (Optional future) ============================================================ */ @media (prefers-color-scheme: dark) { /* Will add later if needed */ } /* ============================================================ ORIENTATION (Portrait/Landscape) ============================================================ */ @media (orientation: landscape) and (max-height: 600px) { /* Compact layout for landscape smaller screens */ #noidung { padding: var(--sp-sm); } .sidebar_box { margin-bottom: var(--sp-sm); } } /* ============================================================ END OF RESPONSIVE.CSS IMPORTANT NOTES: - Desktop (> 960px): Original layout preserved 100% - Tablet/Mobile (≤ 960px): Responsive overrides applied Rollback: Comment out responsive.css link in main.php ============================================================ */