.bike-list .boundary { max-width:unset; padding:0 10px 10px; }
#thiet-ke, #kham-pha, #tinh-nang, #thong-so-ky-thuat, #hinh-anh { scroll-margin-top: 150px; }

.bike-list .bike-list-filter { display:block; padding:0 0 10px; border-bottom:1px solid #DDD; }
.bike-list .bike-list-filter div { margin-bottom:10px; font-weight:bold; }
.bike-list .bike-list-filter .checkbox { width:15px; height:15px; display:inline-block; vertical-align:middle; }

.bike-list .bike-list-type { font-size:1.6em; margin:20px 0; text-transform:uppercase; }
.bike-list .bike-list-items .bike-item { display:inline-block; width:49%; vertical-align:top; background-color:#F0F1F2; font-size:.8em; padding:10px; box-sizing:border-box; margin-right:2%; transition:all .3s; margin-bottom:20px; }
.bike-list .bike-list-items .bike-item:hover { opacity:.5; }
.bike-list .bike-list-items .bike-item:nth-child(2n+0) { margin-right:0; }
.bike-list .bike-list-items .bike-item .bike-item-name { font-size:1.2em; font-weight:bold; text-transform:uppercase; }
.bike-list .bike-list-items .bike-item .bike-item-name .new { color:#F00; display:inline-block; margin-left:5px; font-size:.6em; }
.bike-list .bike-list-items .bike-item .bike-item-price { font-size:.9em; margin:0; color:#666; }
.bike-list .bike-list-items .bike-item .bike-item-price strong { color:#000; }
.bike-list .bike-list-items .bike-item .bike-item-description { color:#87909B; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.bike-list .bike-list-items .bike-item .color-list { text-align:center; }
.bike-list .bike-list-items .bike-item .color-list .color-icon { width:18px; height:18px; line-height:18px; }
.bike-list .bike-list-items .bike-item .color-list .color-icon div { width:15px; height:15px; line-height:15px; margin-top:1.5px; }
.bike-list .bike-list-items .bike-item .color-list .color-icon span:nth-child(2) { right:6px; bottom:-4px; }

.bike-nav { padding:0; height:50px; line-height:50px; background-color:var(--black); position:sticky; top:50px; z-index:88888; }

.bike-nav .boundary { max-width:unset; padding:0 2%; color:#FFF; }
.bike-nav .boundary.desktop { display:none; line-height:64px; }

.bike-nav .boundary .bike-nav-title { font-size:1.5em; text-transform:uppercase; }
.bike-nav .boundary .bike-nav-title .selection { float:right; width: auto; max-width:50%; background: transparent; color: #FFF; border: 0; font-size: .6em; margin-top: 10px; background-color:#000; }
.bike-nav .boundary .bike-nav-title .selection option.active { background-color:#333; }

.bike-nav .boundary.desktop .bike-nav-title { font-size:1.6em; text-transform:uppercase; font-weight:500; display:inline-block; }
.bike-nav .boundary.desktop .bike-nav-title span { font-size:.7rem; display:inline-block; vertical-align:middle; line-height:1em; font-weight:bold; margin-left:20px; color:#87909B; }
.bike-nav .boundary.desktop .bike-nav-title span strong { font-size:1.8em; color:#000; font-weight:normal; display:block; margin-bottom:7px; position:relative; }
.bike-nav .boundary.desktop .bike-nav-title span strong:after { content:""; display:inline-block; width:15px; height:15px; background:url(../images/bike-title-ico.svg) top left no-repeat; background-size:100%; margin-left:10px; }

.bike-nav .boundary.desktop .bike-nav-content { float:right; display:inline-block; }
.bike-nav .boundary.desktop .bike-nav-content a { padding:0 20px; display:inline-block; color:#87909B; font-weight:bold; }
.bike-nav .boundary.desktop .bike-nav-content a:hover, .bike-nav .boundary.desktop .bike-nav-content a.active { border-bottom:1px solid #000; color:#000; }

.bike-banner { width:100%; position:relative; }
.bike-banner:before { content:""; display:block; width:100%; height:auto; padding-top:50%; z-index:1; }
.bike-banner iframe, .bike-banner .iframe { position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; }
.bike-banner .iframe { z-index:2; }

.bike-banner .banner-desktop { display:none; }
.bike-banner { position:relative; padding-top:0; overflow:hidden; }
.bike-banner:before { content:""; padding-top:101%; display:block; width:100%; height:auto; }
.bike-banner .banner-mobile, .bike-banner .banner-desktop { position:absolute; top:0; left:0; width:100%; height:auto; }

.bike-topic-title { font-size:1.8em; text-transform:uppercase; margin-top:50px; padding:0 20px; }
.bike-topic-title:first-child { margin-top:0; }

.bike { padding:50px 0 0; }
.bike .boundary { max-width:unset; width:100%; padding:0; }

.bike .bike-version { display:none; }

.bike .bike-content { padding-bottom:50px; }

.bike .bike-content .slider360 { background-color:#F0F1F2; border:0; }
.bike .bike-content .slider360:before { padding-top:83.98%; }
.bike .bike-content .bike-images { position:relative; }
.bike .bike-content .bike-images .bike-360-icon { position:absolute; bottom:5px; left:50%; transform:translateX(-55%); width:60px; height:auto; }

.bike .bike-info { width:96%; margin:0 auto; }
.bike .bike-info .col { text-align:left; }
.bike .bike-info h1 { font-size:1.5em; line-height:1.5em;  }
.bike .bike-info .color-list .color-icon {  margin-right:5px; }

.thiet-ke { border-bottom:1px solid #DDD; }
.thiet-ke .thiet-ke-banner { position:relative; }
.thiet-ke .thiet-ke-banner .square-image:before { padding-top:72%; }
.thiet-ke .thiet-ke-banner .thiet-ke-bike { position:absolute; width:100%; height:auto; bottom:-30%; right:0; }
.thiet-ke.tinh-nang .thiet-ke-banner .thiet-ke-bike { bottom: 0; width: 80%; right: 50%; transform: translateX(50%); }
.thiet-ke .thiet-ke-banner .thiet-ke-bike:before { padding-top:83.98%; }
.thiet-ke .thiet-ke-banner .thiet-ke-bike img { object-fit:unset; left:20%; }
.thiet-ke.tinh-nang .thiet-ke-banner .thiet-ke-bike img { left:0; object-fit:cover; }

.thiet-ke .thiet-ke-banner .bike-type-name { text-transform:uppercase; font-size:5em; color:#FFF; position:absolute; top:20px; left:0; opacity:.5; z-index:100; font-weight:bold; }

.thiet-ke .thiet-ke-text { margin-top:50px; padding:0 10px; }
.thiet-ke .thiet-ke-images { margin:20px 0; box-sizing:border-box; }
.thiet-ke .thiet-ke-images .owl-stage { padding-left:0; }
.thiet-ke .thiet-ke-images .square-image:before { padding-top:75%; }
.thiet-ke .thiet-ke-images .thiet-ke-images-item { font-size:.9em; }
.thiet-ke .thiet-ke-images .thiet-ke-images-item .item-title { text-transform:uppercase; font-weight:bold; margin:10px 0 8px; }
.thiet-ke .thiet-ke-images .owl-nav { text-align:center; margin-top:10px;}
.thiet-ke .thiet-ke-images .owl-nav button { display:inline-block; width:30px; height:30px; line-height:25px; text-align:center; margin:0 5px; border:1px solid #333; border-radius:100%; }

.thong-so-ky-thuat .thong-so-ky-thuat-topic { }
.thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-title { border-bottom:1px solid #151515; border-top:1px solid #FFF; height:50px; line-height:50px; text-transform:uppercase; font-weight:500; font-size:1.5em; display:block; padding:0 20px; box-sizing:border-box; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic.active .topic-title { background-color:#F0F1F2; border-top:1px solid #151515; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-title span { display:inline-block; width:25px; height:25px; position:relative; float:right; margin-top:12.5px; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-title span:before, .thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-title span:after { content:""; display:inline-block; width:100%; height:2px; background-color:#000; top:50%; left:0; position:absolute; transition:all .3s; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic.active .topic-title span:after { transform:rotate(90deg); border-top:2px solid #FFF; }

.thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-content { display:none; }

/* .thong-so-ky-thuat .thong-so-ky-thuat-topic.active .topic-content { height:auto; } */

.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list { list-style-type:none; padding:0; margin:0; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list li { min-height:50px; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list li:nth-child(2n+0) { background:#F0F1F2; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list li p { display:inline-block; box-sizing:border-box; width:44%; vertical-align:top; padding:5px; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list li p:first-child { text-transform:uppercase; }
.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list li p:last-child { width:56%; font-weight:bold; }

.bike-slider { padding:10px; }
.bike-slider .square-image:before { padding-top:75%; }
.bike-slider .bike-slider-thumbs { width:100%; height:auto; white-space:nowrap; overflow-x:auto; margin:5px 0 10px; padding-bottom:10px; }
.bike-slider .bike-slider-thumbs::-webkit-scrollbar { height:3px; }
.bike-slider .bike-slider-thumbs .square-image { display:inline-block; vertical-align:top; width:32%; margin-right:5px; }

@media (min-width:768px){
	.bike-nav { height:80px; line-height:80px; background-color:#FFF; padding-top:10px;/*  position:sticky; top:50px; z-index:8888; */ }
	.bike-nav .boundary { display:none; padding:0; }
	.bike-nav .boundary.desktop { display:block;  color:#000; }
	.bike-nav .boundary.desktop .bike-nav-content { font-size:.8em; }
	.bike-nav .boundary.desktop .bike-nav-content a { padding:0 10px; }
	
	.bike-list .bike-list-filter div { display:inline-block; }
	.bike-list .bike-list-filter label { padding:0 10px; min-width:unset; }
	
	.bike-list .bike-list-items .bike-item { width:32%; font-size:1em; }
	.bike-list .bike-list-items .bike-item:nth-child(2n+0){ margin-right:2%; }
	.bike-list .bike-list-items .bike-item:nth-child(3n+0){ margin-right:0; }
	
	.bike-list .bike-list-items .bike-item .bike-item-price { margin:10px 0 0; }
	
	.bike-banner:before { padding-top:50%; }
	.bike-banner.video:before { padding-top:50%; }
	.bike-banner .banner-mobile { display:none; }
	.bike-banner .banner-desktop { display:block; }
	
	.bike .bike-info .bike-images { padding-right:20px; }
	.bike .bike-info h1 { margin-top:0; }
	
	.thiet-ke .thiet-ke-banner .square-image:before { padding-top:36%; }
	.thiet-ke.tinh-nang .thiet-ke-banner .square-image:before { padding-top:72%; }
	.thiet-ke .thiet-ke-banner .thiet-ke-bike { width:60%; bottom:-40%; }
	.thiet-ke .thiet-ke-banner .thiet-ke-bike:before { padding-top:83.98%; }
	
	.thiet-ke .thiet-ke-images { margin:100px 0 50px 0; padding-right:10px; }
	.thiet-ke .thiet-ke-images .owl-nav { text-align:right; }
	.thiet-ke .thiet-ke-text { width:50%; margin-top:10px; font-size:1.3em; }
	
	.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list { width:96%; margin:0 auto; }
}

@media (min-width:996px){
	/* .bike { padding:0; } */
	.bike .bike-version { position:relative; text-align:right; position:sticky; top:150px; max-height:calc(100vh - 200px); overflow-y: auto; overflow-x:hidden; }
	.bike .bike-version::-webkit-scrollbar-thumb { background-color:#DDD; }
	.bike .bike-version, .bike .bike-content { display:inline-block; vertical-align:top; width:20%; }
	
	.bike .bike-version .bike-version-block { display:inline-block; width:90%; margin-right:20px; text-align:left; font-size:.8em; padding-left:10px; box-sizing:border-box; }
	.bike .bike-version .bike-version-block .bike-version-items { margin-bottom:20px; }
	.bike .bike-version .bike-version-block .bike-version-items .bike-version-title { margin-top:0; text-transform:uppercase; border-bottom:1px solid #DDD; line-height:1.5em;  }
	
	.bike .bike-version .bike-version-block .bike-version-items .bike-list a { display:block; padding:5px 15px 5px 20px; border-radius:20px; transition:all .3s; position:relative; box-sizing:border-box; }
	.bike .bike-version .bike-version-block .bike-version-items .bike-list a:before { content:""; display:inline-block; width:7px; height:7px; border-radius:100%; background-color:#DDD; position:absolute; top:50%; transform:translateY(-50%); left:5px; }
	.bike .bike-version .bike-version-block .bike-version-items .bike-list a.active, .bike .bike-version .bike-version-block .bike-version-items .bike-list a:hover { background-color:#000; color:#FFF; }
	.bike .bike-version .bike-version-block .bike-version-items .bike-list a.active:before, .bike .bike-version .bike-version-block .bike-version-items .bike-list a:hover:before { background-color:#17A811; }
	
	.bike .bike-version .bike-version-block .bike-version-items .bike-version-title span { display:inline-block; width:15px; height:15px; position:relative; float:right; margin-top:0; }
	.bike .bike-version .bike-version-block .bike-version-items .bike-version-title span:before, .bike .bike-version .bike-version-block .bike-version-items .bike-version-title span:after { content:""; display:inline-block; width:100%; height:2px; background-color:#000; top:50%; left:0; position:absolute; transition:all .3s; }
	.bike .bike-version .bike-version-block .bike-version-items.active .bike-version-title span:after { transform:rotate(90deg); border-top:2px solid #FFF; }
	
	.bike .bike-content { width:80%; }
	.bike .bike-content h2 { text-transform:uppercase; padding:0; }
	.thong-so-ky-thuat .thong-so-ky-thuat-topic .topic-title { padding:0 30px 0 0;}
	
	
	.thong-so-ky-thuat .thong-so-ky-thuat-topic ul.list { width:100%; }
}

@media (min-width:1200px){
	.bike-nav .boundary.desktop .bike-nav-title { font-size:3em; }
	.bike-nav .boundary.desktop .bike-nav-content { font-size:1em; }
	.bike-nav .boundary.desktop .bike-nav-content a { padding:0 20px; }
	
	.bike-list .bike-list-items .bike-item { width:23.5%; }
	.bike-list .bike-list-items .bike-item:nth-child(2n+0), .bike-list .bike-list-items .bike-item:nth-child(3n+0){ margin-right:2%; }
	.bike-list .bike-list-items .bike-item:nth-child(4n+0){ margin-right:0; }
	
	.bike-slider .bike-slider-thumbs .square-image { width:19%; }
}

@media (min-width:1500px){
	.bike .bike-info, .bike .thong-so-ky-thuat, .bike-slider { width:85%; margin:0; }
}