/* Vòng Quay Bike (xedap) — trang chủ y hệt mockup (đen #232323 + đỏ #d60009 màu gốc), cỡ đo theo mockup x1.925 (10-03) */
:root { --xd-dk: #1F1F1F; --xd-dk2: #232323; --xd-red: #D60009; --xd-red2: #B30008; --xd-ink: #111111; --xd-text: #3C3C3C; --xd-muted: #6E6E6E; --xd-line: #E2E2E4; --xd-soft: #EEEEF0; }
body, p, li, a, input, select, textarea, button, h1, h2, h3, h4, td, th, label, .nav > li > a { font-family: "Inter", sans-serif !important; }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; }
/* ---------- header ---------- */
#header .header-main { background: var(--xd-dk) !important; height: 69px; }
#header .header-main .header-inner { height: 69px; }
#header #logo { width: 330px !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; display: flex !important; align-items: center; height: 58px; padding-left: 72px; background: url(icons/logo.png) left center / 58px 58px no-repeat; color: #fff !important; font-size: 29px !important; font-weight: 800 !important; font-style: italic; letter-spacing: -.3px; line-height: 1; text-transform: none !important; white-space: nowrap; }
@media (min-width: 850px) { #header .header-main .flex-left { flex: 1 1 auto; justify-content: center; } }
#header .header-nav-main { flex-wrap: nowrap !important; } #header .header-nav-main > li { margin: 0 14px !important; white-space: nowrap; border: 0 !important; }
#header .header-nav-main > li > a { font-size: 14.5px !important; font-weight: 500 !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; line-height: 40px !important; flex-wrap: nowrap !important; background: transparent !important; }
#header .header-nav-main > li > a:hover { color: #FF4B53 !important; }
#header .header-nav-main > li > a::before, #header .header-nav-main > li > a::after { display: none !important; }
#header .flex-right .header-nav-main > li { margin: 0 !important; }
#header .flex-right .header-nav-main > li.header-search-form { margin-right: 34px !important; }
#header .header-search-form { flex: 0 0 auto; width: 236px; } #header .header-search-form .searchform { width: 236px; }
#header .header-search-form input[type=search] { height: 40px !important; border-radius: 20px !important; background: #333 url(icons/search.png) 16px center / 17px 17px no-repeat !important; border: 1px solid #444 !important; box-shadow: none !important; padding: 0 16px 0 42px !important; font-size: 14px !important; color: #fff !important; }
#header .header-search-form input::placeholder { color: #9A9A9A; }
#header .header-search-form .search-form-categories, #header .header-search-form .ux-search-submit, #header .header-search-form .flex-col:last-child { display: none !important; }
#header .cart-item .header-cart-link { position: relative; padding: 0 !important; background: transparent !important; }
#header .cart-item i.icon-shopping-bag, #header .cart-item i.icon-shopping-cart, #header .cart-item i.icon-shopping-basket { font-size: 0 !important; display: inline-block; width: 28px; height: 28px; background: url(icons/bag-w.png) center / contain no-repeat !important; }
#header .cart-item i::before, #header .cart-item i::after { display: none !important; content: none !important; }
#header .header-cart-title, #header .cart-price { display: none !important; }
.mobile-nav i, .mobile-nav .icon-menu { color: #fff !important; }
.home .page-title { display: none !important; }
/* ---------- chung ---------- */
.xd-sec p:not([class]), .xd-footer p:not([class]) { display: contents; }
.xd-sec p, .xd-footer p { margin-bottom: 0; }
.xd-sec .col, .xd-footer .col { padding-bottom: 0 !important; }
.xd-sec ul, .xd-footer ul { margin: 0; padding: 0; list-style: none; } .xd-sec li, .xd-footer li { margin: 0 !important; }
.xd-sec, .xd-footer { word-break: normal !important; }
.xd-sec img[src=""] { visibility: hidden; }
.xd-h2 { color: var(--xd-ink) !important; font-size: 39px !important; font-weight: 800 !important; line-height: 46px !important; letter-spacing: -.02em; margin: 0 !important; }
.xd-h2-w { color: #fff !important; }
.xd-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--xd-red); color: #fff !important; font-size: 18px; font-weight: 600; min-height: 51px; padding: 0 32px; line-height: 1.2; text-decoration: none !important; margin: 0; text-transform: none; letter-spacing: 0; transition: background .2s; border: 0; }
.xd-btn:hover { background: var(--xd-red2); }
.xd-btn-sm { min-height: 48px; min-width: 172px; font-size: 16.5px; padding: 0 20px; }
.xd-more, .xd-rd { color: var(--xd-red) !important; font-size: 17px; font-weight: 600; white-space: nowrap; text-decoration: none !important; }
.xd-more i, .xd-rd i { font-style: normal; display: inline-block; margin-left: 8px; transition: transform .2s; } .xd-more:hover i, .xd-rd:hover i { transform: translateX(3px); }
.xd-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.xd-head .xd-h2 { flex: 0 1 auto; width: fit-content; min-width: 0; }
/* ---------- hero ---------- */
.section.xd-hero { min-height: 547px; padding: 0 !important; align-items: flex-start !important; }
.xd-hero .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.3) 35%, rgba(0,0,0,0) 55%); pointer-events: none; }
.xd-hero-in { padding: 178px 0 56px; }
.xd-h1 { color: #fff !important; font-size: 94px !important; font-weight: 900 !important; line-height: 92px !important; letter-spacing: -.03em; text-transform: uppercase; margin: 0 0 12px !important; text-shadow: 0 2px 14px rgba(0,0,0,.25); }
.xd-lead { color: #fff; font-size: 26px; font-weight: 500; line-height: 34px; margin: 0 0 24px; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.xd-hero .xd-btn { min-width: 214px; }
/* ---------- bạn đạp xe để làm gì ---------- */
.section.xd-use-sec { padding: 26px 0 30px !important; }
.xd-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 16px; }
.xd-use { position: relative; display: block; aspect-ratio: 318 / 402; overflow: hidden; border-radius: 3px; background: #DDD; text-decoration: none !important; }
.xd-use img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .xd-use:hover img { transform: scale(1.04); }
.xd-use::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); }
.xd-use span { position: absolute; left: 24px; right: 16px; bottom: 18px; z-index: 1; color: #fff; font-size: 18px; font-weight: 500; line-height: 24px; }
.xd-use span b { display: block; font-size: 38px; font-weight: 800; line-height: 44px; letter-spacing: -.01em; }
/* ---------- xe nổi bật ---------- */
.section.xd-feat-sec { padding: 22px 0 22px !important; }
.xd-feats { display: grid; gap: 19px; margin-top: 14px; }
.xd-ft { display: grid; grid-template-columns: 528px minmax(0, 1fr) auto; align-items: center; gap: 0 30px; background: #fff; border-radius: 4px; min-height: 212px; overflow: hidden; padding-right: 18px; }
.xd-ft-img { display: block; height: 212px; background: #EEEFF1; }
.xd-ft-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.xd-ft-b { min-width: 0; padding: 20px 0; }
.xd-ft-t { color: var(--xd-ink) !important; font-size: 28px !important; font-weight: 700 !important; line-height: 36px !important; margin: 0 0 6px !important; letter-spacing: -.01em; }
.xd-ft-t a { color: inherit !important; } .xd-ft-t a:hover { color: var(--xd-red) !important; }
.xd-ft-p { color: var(--xd-red); font-size: 30px; font-weight: 700; line-height: 36px; margin: 0 0 14px; }
.xd-sp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--xd-line); padding-top: 12px; max-width: 590px; }
.xd-sp > div { min-width: 0; padding: 2px 16px; } .xd-sp > div:first-child { padding-left: 0; } .xd-sp > div + div { border-left: 1.5px solid var(--xd-line); }
.xd-sp b { display: block; color: var(--xd-ink); font-size: 15.5px; font-weight: 600; line-height: 22px; }
.xd-sp span { display: block; color: var(--xd-muted); font-size: 15px; line-height: 22px; }
/* ---------- size ---------- */
.section.xd-size-sec { padding: 26px 0 10px !important; }
.xd-size { display: grid; grid-template-columns: 684fr 470fr; gap: 0 120px; align-items: start; }
.xd-size-l { min-width: 0; }
.xd-tbl { border: 1px solid #DCDCDE; margin-top: 16px; }
.xd-tr { display: grid; grid-template-columns: 266fr 418fr; }
.xd-tr > div { text-align: center; font-size: 16.5px; line-height: 39px; color: var(--xd-text); }
.xd-tr > div + div { border-left: 1px solid #DCDCDE; }
.xd-tr + .xd-tr { border-top: 1px solid #DCDCDE; }
.xd-th { background: #F0F0F2; } .xd-th > div { color: var(--xd-ink); font-weight: 600; line-height: 42px; }
.xd-note { color: var(--xd-muted); font-size: 16px; line-height: 24px; margin-top: 14px; }
.xd-size-r { position: relative; min-width: 0; margin-top: 8px; padding-left: 10px; }
.xd-size-r img { display: block; width: 100%; height: auto; }
.xd-lb { position: absolute; color: var(--xd-red); font-size: 16.5px; font-weight: 600; line-height: 22px; text-align: center; }
.xd-lb1 { left: -8px; top: 34%; transform: translateX(-100%); } .xd-lb2 { left: 60%; top: 2%; }
/* ---------- khám phá thêm ---------- */
.section.xd-grid-sec { padding: 22px 0 32px !important; }
.xd-tabs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 18px; }
.xd-tabs button { margin: 0; min-height: 36px; padding: 0 22px; border: 0; border-radius: 3px; background: transparent; color: var(--xd-text); font-size: 16.5px; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 36px; cursor: pointer; }
.xd-tabs button.is-on { background: var(--xd-red); color: #fff; font-weight: 600; }
.xd-tabs button:hover:not(.is-on) { color: var(--xd-red); }
.xd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 15px; }
.xd-cd { min-width: 0; }
.xd-cd-img { position: relative; display: block; aspect-ratio: 318 / 169; background: #EEEFF1; overflow: hidden; }
.xd-cd-img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .4s; } .xd-cd-img:hover img { transform: scale(1.04); }
.xd-off { position: absolute; top: 8px; right: 8px; background: var(--xd-red); color: #fff; font-size: 15px; font-weight: 700; line-height: 28px; padding: 0 10px; border-radius: 14px; }
.xd-cd-t { color: var(--xd-ink) !important; font-size: 16.5px !important; font-weight: 700 !important; line-height: 22px !important; margin: 10px 0 2px !important; }
.xd-cd-t a { color: inherit !important; } .xd-cd-t a:hover { color: var(--xd-red) !important; }
.xd-cd-p { display: flex; align-items: baseline; gap: 10px; } .xd-cd-p b { color: var(--xd-red); font-size: 18px; font-weight: 700; line-height: 26px; } .xd-cd-p del { color: #9A9A9A; font-size: 16px; }
.xd-empty { display: none; grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--xd-muted); font-size: 17px; } .xd-empty a { color: var(--xd-red) !important; font-weight: 700; }
/* ---------- dịch vụ xưởng ---------- */
.section.xd-svc-sec { padding: 14px 0 24px !important; background: var(--xd-dk2) !important; }
.xd-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.xd-svc { display: flex; align-items: center; gap: 30px; min-width: 0; }
.xd-svc + .xd-svc { border-left: 1px solid rgba(255,255,255,.18); padding-left: 32px; }
.xd-svc img { width: 72px; height: 72px; flex: 0 0 auto; }
.xd-svc h3 { color: #fff !important; font-size: 23px !important; font-weight: 700 !important; line-height: 30px !important; margin: 0 0 6px !important; }
.xd-svc div div { color: #B9B9B9; font-size: 16.5px; line-height: 24px; }
/* ---------- đạp cùng nhau ---------- */
.section.xd-group { min-height: 315px; padding: 0 !important; }
.xd-group .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,0) 60%); }
.xd-group-in { padding: 64px 0 40px; }
.xd-group-h { color: #fff !important; font-size: 46px !important; font-weight: 800 !important; line-height: 54px !important; margin: 0 0 4px !important; letter-spacing: -.02em; }
.xd-group-d { color: #fff; font-size: 20px; font-weight: 500; line-height: 30px; margin: 0 0 24px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
/* ---------- tư vấn ---------- */
.section.xd-bl-sec { padding: 22px 0 22px !important; }
.xd-bls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; margin-top: 14px; }
.xd-bl { min-width: 0; }
.xd-bl-img { display: block; aspect-ratio: 425 / 183; overflow: hidden; background: #DDD; }
.xd-bl-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .xd-bl-img:hover img { transform: scale(1.03); }
.xd-bl-t { color: var(--xd-ink) !important; font-size: 19.5px !important; font-weight: 700 !important; line-height: 26px !important; margin: 12px 0 6px !important; }
.xd-bl-t a { color: inherit !important; } .xd-bl-t a:hover { color: var(--xd-red) !important; }
.xd-bl-d { color: var(--xd-muted); font-size: 16px; line-height: 25px; margin: 0 0 8px; }
/* ---------- footer ---------- */
#footer .absolute-footer { display: none; }
.section.xd-footer { padding: 22px 0 0 !important; background: var(--xd-dk2) !important; }
.xd-ft-g { display: grid; grid-template-columns: 390fr 300fr 335fr 300fr; padding-bottom: 18px; }
.xd-ft-col { border-left: 1px solid rgba(255,255,255,.14); padding-left: 32px; min-width: 0; }
.xd-ft-col:first-of-type { border-left: 0; }
.xd-ft-logo { display: flex; align-items: center; gap: 12px; color: #fff !important; font-size: 25px; font-weight: 800; font-style: italic; line-height: 1; text-decoration: none !important; }
.xd-ft-logo img { width: 58px; height: 58px; }
.xd-ft-sl { color: #BDBDBD; font-size: 16.5px; line-height: 24px; margin: 8px 0 14px 70px; }
.xd-ft-ct li { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 6px !important; }
.xd-ft-ct li img { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 3px; }
.xd-ft-ct li a, .xd-ft-ct li span { color: #E6E6E6 !important; font-size: 16.5px; line-height: 26px; }
.xd-ft-col h4 { color: #fff !important; font-size: 18px !important; font-weight: 700 !important; line-height: 24px !important; margin: 6px 0 10px !important; }
.xd-ft-col li { line-height: 29px; } .xd-ft-col li a { color: #BDBDBD !important; font-size: 16px; } .xd-ft-col li a:hover { color: #fff !important; }
.xd-ft-cta div { color: #BDBDBD; font-size: 16px; line-height: 26px; margin: 0 0 18px; }
.xd-ft-cta .xd-btn { min-width: 188px; min-height: 50px; }
.xd-ft-bot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); padding: 10px 0 12px; color: #A8A8A8; font-size: 15px; line-height: 22px; }
.xd-ft-so { display: flex; gap: 22px; } .xd-ft-so img { width: 28px; height: 28px; }
/* ---------- khoảng giữa ---------- */
@media (min-width: 850px) and (max-width: 1199px) {
	.xd-h1 { font-size: 70px !important; line-height: 72px !important; } .xd-hero-in { padding-top: 140px; }
	.xd-ft { grid-template-columns: 360px minmax(0, 1fr); } .xd-ft > .xd-btn { grid-column: 2; justify-self: start; margin: 0 0 18px; } .xd-ft-img { grid-row: span 2; height: 100%; }
	.xd-size { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 50px; } .xd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.xd-svc { flex-direction: column; align-items: flex-start; gap: 12px; } .xd-ft-g { grid-template-columns: 1.3fr 1fr 1fr 1fr; } .xd-ft-col { padding-left: 18px; }
}
@media (min-width: 850px) and (max-width: 1365px) { #header .header-search-form { display: none !important; } }
/* ---------- mobile ---------- */
@media (max-width: 849px) {
	#header .header-main, #header .header-main .header-inner { height: 62px; }
	#header #logo { width: auto !important; } #header #logo a { height: 42px; padding-left: 52px; background-size: 42px 42px; font-size: 22px !important; }
	.section.xd-hero { min-height: 0; padding-top: 260px !important; background-color: var(--xd-dk) !important; }
	.xd-hero .section-bg { top: 0; bottom: auto; height: 260px; } .xd-hero .section-bg img.bg { object-position: 62% 50% !important; } .xd-hero .section-bg::after { display: none; }
	.xd-hero-in { padding: 26px 0 34px; } .xd-h1 { font-size: 52px !important; line-height: 54px !important; } .xd-lead { font-size: 18px; line-height: 26px; } .xd-hero .xd-btn { width: 100%; }
	.xd-h2 { font-size: 29px !important; line-height: 36px !important; }
	.xd-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .xd-use span { left: 14px; bottom: 12px; font-size: 14px; } .xd-use span b { font-size: 24px; line-height: 30px; }
	.xd-ft { grid-template-columns: minmax(0, 1fr); padding: 0 0 18px; gap: 0; } .xd-ft-img { height: 190px; } .xd-ft-b { padding: 16px 16px 12px; } .xd-ft > .xd-btn { margin: 0 16px; }
	.xd-ft-t { font-size: 22px !important; line-height: 28px !important; } .xd-ft-p { font-size: 22px; } .xd-sp > div { padding: 2px 8px; } .xd-sp b, .xd-sp span { font-size: 13.5px; white-space: normal; }
	.xd-size { grid-template-columns: minmax(0, 1fr); } .xd-size-r { margin-top: 26px; padding-left: 74px; } .xd-lb { font-size: 13px; line-height: 17px; } .xd-lb1 { left: 0; transform: none; }
	.xd-head { flex-wrap: wrap; } .xd-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .xd-tabs button { flex: 0 0 auto; padding: 0 14px; font-size: 15px; }
	.xd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .xd-cd-t { font-size: 14.5px !important; line-height: 20px !important; } .xd-cd-p { flex-wrap: wrap; gap: 0 8px; } .xd-cd-p b { font-size: 16px; } .xd-cd-p del { font-size: 13px; }
	.xd-svcs { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 8px; } .xd-svc + .xd-svc { border-left: 0; padding-left: 0; } .xd-svc img { width: 56px; height: 56px; } .xd-svc { gap: 18px; }
	.section.xd-group { padding-top: 220px !important; min-height: 0; background-color: var(--xd-dk) !important; } .xd-group .section-bg { top: 0; bottom: auto; height: 220px; } .xd-group .section-bg img.bg { object-position: 68% 50% !important; } .xd-group .section-bg::after { display: none; }
	.xd-group-in { padding: 24px 0 30px; } .xd-group-h { font-size: 34px !important; line-height: 40px !important; } .xd-group-d { font-size: 17px; line-height: 26px; } .xd-group .xd-btn { width: 100%; }
	.xd-bls { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.xd-ft-g { grid-template-columns: minmax(0, 1fr); gap: 24px; } .xd-ft-col { border-left: 0; padding-left: 0; } .xd-ft-sl { margin-left: 0; } .xd-ft-bot { flex-direction: column; gap: 10px; }
}

/* mid-fix */
@media (min-width: 850px) and (max-width: 1199px) { #header #logo { width: 236px !important; min-width: 236px; margin-right: 16px !important; } #header #logo a { font-size: 22px !important; padding-left: 54px; background-size: 44px 44px; } }
/* /mid-fix */
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }