/*
Theme Name: HoangHa Mobile Store
Author: Custom Studio
Description: Responsive Vietnamese electronics storefront inspired by supplied reference. WooCommerce compatible.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: hoangha-mobile
*/
:root{--green:#005348;--accent:#008e80;--light:#f5f7f8}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#17222a;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1200px,94%);margin:auto}.topbar{background:#f4f4f4;color:#555;font-size:12px;padding:8px}.topbar .container{display:flex;justify-content:space-between}.mainhead{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:20px 0}.logo{font-size:23px;font-weight:900;color:var(--green);white-space:nowrap}.logo span{color:#009c8b}.search{display:flex;max-width:470px;width:100%;box-shadow:0 3px 12px #0002;border-radius:10px;overflow:hidden}.search input{padding:14px;border:0;flex:1;min-width:0}.search button,.btn{background:var(--green);color:white;border:0;padding:13px 18px;cursor:pointer;border-radius:7px}.head-actions{display:flex;gap:18px;align-items:center;font-size:14px}.nav{background:var(--green);color:white;border-radius:15px;display:flex;justify-content:space-around;flex-wrap:wrap;padding:14px 8px;margin-bottom:15px}.nav a{text-align:center;font-size:13px;min-width:80px}.nav b{display:block;font-size:23px;margin-bottom:4px}.hero{height:345px;border-radius:16px;overflow:hidden;position:relative;background:linear-gradient(115deg,#2ddfe9,#418efa 55%,#823bff);display:flex;align-items:center;justify-content:center;color:white;text-align:center}.hero h1{font-size:clamp(30px,4vw,55px);margin:0 0 8px;text-shadow:0 2px 6px #0002}.hero strong{font-size:clamp(35px,6vw,80px)}.hero p{font-size:23px}.hero .emoji{font-size:90px;position:absolute;bottom:12px;left:5%;opacity:.85}.hero .right{left:auto;right:5%}.promo{margin:15px 0 30px;background:#0a1420;color:white;display:flex;align-items:center;justify-content:space-around;padding:18px;gap:15px}.promo h2{margin:0}.promo a{background:white;color:#cf003b;padding:12px 24px;border-radius:9px;font-weight:bold}.section{padding:18px 0 35px}.section h2{font-size:22px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{background:#f2f4f6;border:1px solid #ddd;border-radius:12px;padding:10px 17px;cursor:pointer}.products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.product{border:1px solid #e3e7e8;border-radius:12px;padding:12px;box-shadow:0 3px 9px #0001;display:flex;flex-direction:column;min-height:345px}.product .photo{height:190px;display:flex;align-items:center;justify-content:center;background:#fafafa;border-radius:8px;overflow:hidden}.product img{width:100%;height:100%;object-fit:contain}.product h3{font-size:14px;line-height:1.45;min-height:42px}.price{color:var(--green);font-weight:bold;font-size:17px}.old{color:#888;text-decoration:line-through;font-size:12px}.note{background:#f0f0f0;font-size:12px;padding:8px;margin-top:9px}.stars{color:#ff9a00;margin-top:auto;padding-top:8px}.accessories{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}.accessory{height:126px;border-radius:14px;padding:12px;color:white;font-weight:bold;font-size:13px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 3px 8px #0002}.accessory span{font-size:45px;text-align:right}.footer-top{background:#f7f7f7;padding:35px 0}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;font-size:13px;line-height:2}.footer-grid h3{font-size:15px}.footer-grid a{display:block}.footer-bottom{background:#005348;color:white;text-align:center;padding:22px;font-size:13px}.muted{color:#667}.mobile-menu{display:none}@media(max-width:900px){.products{grid-template-columns:repeat(3,1fr)}.accessories{grid-template-columns:repeat(5,1fr)}.mainhead{flex-wrap:wrap}.search{order:3;max-width:none}.hero{height:290px}.footer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.products{grid-template-columns:repeat(2,minmax(0,1fr))}.accessories{grid-template-columns:repeat(3,1fr)}.hero{height:250px}.hero .emoji{font-size:45px}.hero p{font-size:16px}.promo{flex-direction:column;text-align:center}.nav a{min-width:70px;font-size:11px}.footer-grid{grid-template-columns:1fr}.head-actions{font-size:12px}}