/*
Theme Name: Smile Motor
Description: Giao diện web xe máy 50cc Smile Motor — thuộc hệ thống Xe Điện Smile. Vui, 3D, kiểu teen: khối nghiêng như logo, nút bấm nổi, thẻ bo tròn, sticker. Ba màu thương hiệu đỏ/xanh/trắng lấy từ logo anh Khoa đưa 17/9.
Version: 0.3.0
Author: An Nhiên
Text Domain: smilemotor
*/
/* Font tự chứa trong giao diện — không gọi fonts.googleapis.com nữa.
   Hai chặng mạng ngoài chặn hiển thị chữ; 87% khách vào bằng điện thoại.
   Chỉ lấy ba bộ ký tự latin · latin-ext · vietnamese (bỏ devanagari của Baloo 2). */
/* vietnamese */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo2-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo2-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo2-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* vietnamese */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo2-800-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo2-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo2-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* vietnamese */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bevietnampro-400-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bevietnampro-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bevietnampro-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* vietnamese */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bevietnampro-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bevietnampro-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/bevietnampro-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --do:#F82828;--do-dam:#C41414;--do-nhat:#FFE9E9;
  --xanh:#0058B0;--xanh-dam:#003B7A;--xanh-nhat:#E6F0FC;--xanh-troi:#F3F8FF;
  --trang:#FFFFFF;--chu:#16213A;--mo:#5E6B85;--vien:#E3E9F3;
  --bo:22px;--bo-nho:14px;
  --font-tieu-de:"Baloo 2","Segoe UI",system-ui,Arial,sans-serif;
  --font-chu:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --noi-do:0 6px 0 var(--do-dam),0 14px 24px rgba(248,40,40,.28);
  --noi-xanh:0 6px 0 var(--xanh-dam),0 14px 24px rgba(0,88,176,.28);
  --noi-the:0 10px 0 #DCE6F5,0 22px 40px rgba(0,59,122,.10);
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.65 var(--font-chu);color:var(--chu);
  background:var(--xanh-troi);
  background-image:radial-gradient(circle at 12% 8%,rgba(0,88,176,.10) 0,transparent 32%),radial-gradient(circle at 88% 20%,rgba(248,40,40,.09) 0,transparent 30%),radial-gradient(circle at 70% 90%,rgba(0,88,176,.07) 0,transparent 30%);
  background-repeat:no-repeat;background-size:100% 1400px}
a{color:var(--xanh)}img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-tieu-de);letter-spacing:-.01em}
.bao{max-width:1120px;margin:0 auto;padding:0 16px}
/* ── nút 3D ── */
.nut,.goi,.hero .nut,.cta a.nut{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-tieu-de);font-weight:800;font-size:17px;line-height:1;
  padding:14px 22px;border-radius:999px;text-decoration:none;color:var(--trang);background:var(--do);box-shadow:var(--noi-do);
  transform:translateY(0);transition:transform .12s,box-shadow .12s;white-space:nowrap}
.nut.xanh,.goi.xanh,.hero .nut.xanh,.cta a.nut.xanh{background:var(--xanh);box-shadow:var(--noi-xanh)}
.nut.trang,.hero .nut.trang{background:var(--trang);color:var(--xanh);box-shadow:0 6px 0 #C9D6EA,0 14px 24px rgba(0,59,122,.15)}
.nut:hover,.goi:hover,.cta a.nut:hover{transform:translateY(-2px)}
.nut:active,.goi:active,.cta a.nut:active{transform:translateY(4px);box-shadow:0 2px 0 var(--do-dam)}
.nut.xanh:active,.cta a.nut.xanh:active{box-shadow:0 2px 0 var(--xanh-dam)}
/* ── đầu trang ── */
.dau{background:rgba(255,255,255,.96);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20;box-shadow:0 6px 24px rgba(0,59,122,.06)}
.dau .bao{display:flex;align-items:center;gap:10px;min-height:70px}
.logo{display:block;line-height:0}.logo img{height:clamp(46px,13.5vw,54px);width:auto}
@media(min-width:900px){.logo img{height:56px}}
.menu{margin-left:auto;display:none;gap:4px}
.menu a{color:var(--chu);text-decoration:none;font-family:var(--font-tieu-de);font-weight:700;font-size:16px;padding:9px 13px;border-radius:999px;transition:background .15s,color .15s}
.menu a:hover{background:var(--xanh-nhat);color:var(--xanh)}
.goi{margin-left:auto;padding:8px 11px;font-size:13px;white-space:nowrap;box-shadow:0 3px 0 var(--do-dam)}
.goi:active{box-shadow:0 1px 0 var(--do-dam)}
@media(min-width:900px){.menu{display:flex}.goi{margin-left:8px;padding:11px 16px;font-size:16px;box-shadow:var(--noi-do)}}
/* ── mở đầu (hero) ── */
.hero{padding:34px 0 26px;position:relative;overflow:hidden}
.hero .bao{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.hero .bao{grid-template-columns:1.1fr .9fr;gap:30px}.hero{padding:54px 0 40px}}
.hero .nhan-nho{display:inline-block;font-family:var(--font-tieu-de);font-weight:800;font-size:14px;color:var(--trang);background:var(--xanh);padding:6px 14px;border-radius:8px;transform:skew(-10deg);box-shadow:0 4px 0 var(--xanh-dam);margin-bottom:14px}
.hero .nhan-nho span{display:inline-block;transform:skew(10deg)}
.hero h1{font-size:clamp(32px,5.6vw,54px);line-height:1.08;margin:0 0 14px;font-weight:800;color:var(--xanh-dam)}
.hero h1 em{font-style:normal;color:var(--do);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:.32em;background:var(--do-nhat);z-index:-1;border-radius:6px;transform:skew(-8deg)}
.hero p{font-size:18px;margin:0 0 20px;max-width:560px;color:var(--mo)}
.hero .nut-cum{display:flex;flex-wrap:wrap;gap:12px}
.hero .khung-xe{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center}
.hero .khung-xe::before{content:"";position:absolute;inset:14% 6%;background:linear-gradient(115deg,var(--do) 0 48%,var(--xanh) 52% 100%);border-radius:36px;transform:skew(-10deg) rotate(-3deg);box-shadow:0 14px 0 rgba(0,59,122,.18),0 30px 60px rgba(0,59,122,.18);opacity:.95}
.hero .khung-xe img{position:relative;width:min(92%,520px);filter:drop-shadow(0 26px 22px rgba(0,0,0,.30));animation:noi 4s ease-in-out 3}
@keyframes noi{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.sticker{position:absolute;font-family:var(--font-tieu-de);font-weight:800;font-size:14px;line-height:1.2;background:var(--trang);color:var(--xanh-dam);padding:9px 13px;border-radius:14px;box-shadow:0 5px 0 #C9D6EA,0 12px 20px rgba(0,59,122,.14);z-index:2}
.sticker.do{background:var(--do);color:var(--trang);box-shadow:0 5px 0 var(--do-dam)}
.sticker.xanh{background:var(--xanh);color:var(--trang);box-shadow:0 5px 0 var(--xanh-dam)}
.sticker.s1{top:6%;left:0;transform:rotate(-7deg)}.sticker.s2{top:10%;right:0;transform:rotate(6deg)}.sticker.s3{bottom:6%;left:8%;transform:rotate(4deg)}
@media(prefers-reduced-motion:reduce){.hero .khung-xe img,.sticker{animation:none}}
/* ── tiêu đề mục kiểu logo ── */
.tieu-de-muc{display:flex;align-items:center;gap:14px;margin:30px 0 4px;flex-wrap:wrap}
.tieu-de-muc h2{margin:0;font-size:24px;color:var(--trang);background:var(--xanh);padding:8px 18px;border-radius:10px;transform:skew(-10deg);box-shadow:0 5px 0 var(--xanh-dam)}
.tieu-de-muc h2 span{display:inline-block;transform:skew(10deg)}
.tieu-de-muc.do h2{background:var(--do);box-shadow:0 5px 0 var(--do-dam)}
.tieu-de-muc a{margin-left:auto;font-family:var(--font-tieu-de);font-weight:700;font-size:15px;text-decoration:none;background:var(--trang);padding:8px 14px;border-radius:999px;box-shadow:0 4px 0 #C9D6EA}
/* ── lưới thẻ 3D ── */
.luoi{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:18px 0 8px}
.the{background:var(--trang);border-radius:var(--bo);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--noi-the);transition:transform .18s,box-shadow .18s;position:relative}
.the:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 14px 0 #DCE6F5,0 30px 50px rgba(0,59,122,.16)}
.the a.anh{aspect-ratio:4/3;background:linear-gradient(180deg,#fff 0,var(--xanh-troi) 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.the a.anh img{object-fit:contain;width:100%;height:100%;transition:transform .25s}
.the:hover a.anh img{transform:scale(1.05) rotate(1deg)}
.the .than{padding:12px 16px 18px;display:flex;flex-direction:column;gap:6px}
.the h3{margin:0;font-size:18px;line-height:1.25;font-weight:800}.the h3 a{color:var(--chu);text-decoration:none}
.gia{color:var(--do);font-family:var(--font-tieu-de);font-weight:800;font-size:21px}
.nhan{font-size:12.5px;color:var(--mo)}
.nhan b{display:inline-block;background:var(--xanh-nhat);color:var(--xanh);border-radius:8px;padding:3px 9px;font-weight:700;margin:0 4px 4px 0;transform:skew(-8deg)}
.nhan b a{text-decoration:none;color:inherit}
.the .tem{position:absolute;top:12px;left:-6px;background:var(--do);color:var(--trang);font-family:var(--font-tieu-de);font-weight:800;font-size:13px;padding:5px 12px 5px 14px;border-radius:0 10px 10px 0;box-shadow:0 4px 0 var(--do-dam);transform:rotate(-3deg)}
/* ── khối nội dung ── */
.noi-dung{background:var(--trang);border-radius:var(--bo);padding:24px 22px;margin:22px 0;box-shadow:var(--noi-the)}
@media(min-width:700px){.noi-dung{padding:32px 36px}}
.noi-dung h1{font-size:clamp(26px,4.4vw,38px);line-height:1.15;margin:0 0 10px;color:var(--xanh-dam);font-weight:800}
.noi-dung h2{font-size:23px;margin:30px 0 10px;color:var(--xanh);font-weight:800;display:inline-block;border-bottom:5px solid var(--do-nhat);padding-bottom:2px}
.noi-dung h3{font-size:18px;margin:20px 0 8px}
.noi-dung p,.noi-dung li{font-size:17px}.noi-dung img{border-radius:var(--bo-nho);margin:12px 0}
.noi-dung>img:first-of-type,.noi-dung .wp-post-image{box-shadow:0 10px 0 #DCE6F5}
.tra-loi{border-left:6px solid var(--do);background:var(--do-nhat);padding:14px 18px;border-radius:0 var(--bo-nho) var(--bo-nho) 0;margin:0 0 18px;font-size:18px;font-weight:600}
.thong-so{width:100%;border-collapse:separate;border-spacing:0 6px;margin:10px 0}
.thong-so th,.thong-so td{padding:10px 14px;text-align:left;font-size:16px;background:var(--xanh-troi)}
.thong-so th{width:42%;font-weight:700;color:var(--xanh-dam);border-radius:12px 0 0 12px}.thong-so td{border-radius:0 12px 12px 0}
.gia-lon{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:10px 0 18px}
.gia-lon .so{font-family:var(--font-tieu-de);font-size:34px;font-weight:800;color:var(--trang);background:var(--do);padding:6px 18px;border-radius:12px;transform:skew(-10deg);box-shadow:0 6px 0 var(--do-dam)}
.gia-lon .so span{display:inline-block;transform:skew(10deg)}
.gia-lon .ghi{color:var(--mo);font-size:14px;max-width:420px}
.cta{background:linear-gradient(135deg,var(--xanh-nhat),#fff);border:2px dashed var(--xanh);border-radius:var(--bo);padding:20px;margin:26px 0}
.cta b{font-family:var(--font-tieu-de);font-size:20px;color:var(--xanh-dam)}
.cta>div{margin:6px 0 12px;color:var(--mo)}
.cta a.nut{margin:6px 8px 0 0;font-size:16px;padding:12px 18px}
.hop-ky{border-top:3px dotted var(--xanh-nhat);margin-top:30px;padding-top:14px;color:var(--mo);font-size:15px}
/* ── lọc & phân trang ── */
.loc{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.loc a{background:var(--trang);border-radius:999px;padding:8px 14px;text-decoration:none;color:var(--chu);font-family:var(--font-tieu-de);font-weight:700;font-size:14px;box-shadow:0 4px 0 #DCE6F5;transition:transform .12s}
.loc a:hover{transform:translateY(-2px)}.loc a.chon{background:var(--xanh);color:var(--trang);box-shadow:0 4px 0 var(--xanh-dam)}
.trang-so{display:flex;gap:8px;justify-content:center;margin:24px 0}
.trang-so a,.trang-so span{padding:8px 14px;border-radius:12px;background:var(--trang);text-decoration:none;box-shadow:0 4px 0 #DCE6F5;font-weight:700}
.trang-so .current{background:var(--do);color:var(--trang);box-shadow:0 4px 0 var(--do-dam)}
.breadcrumb{font-size:14px;color:var(--mo);margin:16px 0 0}.breadcrumb a{color:var(--mo)}
/* ── chân trang ── */
.chan{position:relative;background:var(--xanh-dam);color:#C9D9EE;padding:54px 0 96px;margin-top:48px;font-size:14px}
.chan::before{content:"";position:absolute;left:0;right:0;top:-28px;height:30px;background:var(--xanh-dam);clip-path:polygon(0 100%,0 40%,8% 70%,16% 30%,24% 65%,32% 25%,40% 60%,48% 30%,56% 70%,64% 35%,72% 65%,80% 30%,88% 60%,96% 35%,100% 55%,100% 100%)}
.chan h4{color:var(--trang);margin:0 0 10px;font-size:17px}.chan a{color:#fff}
.chan .cot{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.chan ul{list-style:none;padding:0;margin:0}.chan li{margin:6px 0}
.chan .logo-chan img{height:40px;width:auto;margin-bottom:12px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.thanh-goi{position:fixed;left:12px;right:12px;bottom:12px;display:flex;gap:10px;z-index:30}
.thanh-goi a{flex:1;text-align:center;padding:14px 8px;font-family:var(--font-tieu-de);font-weight:800;color:var(--trang);text-decoration:none;font-size:16px;border-radius:999px}
.thanh-goi a:first-child{background:var(--do);box-shadow:var(--noi-do)}.thanh-goi a:last-child{background:var(--xanh);box-shadow:var(--noi-xanh)}
@media(min-width:900px){.thanh-goi{display:none}.chan{padding-bottom:54px}}
/* ── ba lý do (trang chủ) ── */
.ly-do{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:18px 0}
.ly-do div{background:var(--trang);border-radius:var(--bo);padding:20px;box-shadow:var(--noi-the);transition:transform .18s}
.ly-do div:hover{transform:translateY(-5px) rotate(.5deg)}
.ly-do .icon{font-size:38px;line-height:1;margin-bottom:8px;display:inline-block;transform:rotate(-8deg)}
.ly-do b{display:block;font-family:var(--font-tieu-de);font-size:19px;color:var(--xanh-dam);margin-bottom:4px}
.ly-do p{margin:0;color:var(--mo);font-size:15px}