/* ============================================================
	MOBILE CSS STRUCTURE (<= 1024px)
	Chia theo tung trang de de quan ly.
	Thu tu: Common -> Home -> About -> Service -> Project -> Contact...
	============================================================ */

@media only screen and (max-width: 1024px) {

	 /* ========================================================
		 0. COMMON (dung chung tat ca trang)
		 ======================================================== */
	 /*
	 .container,
	 .container-fluid {
		  padding-left: 16px;
		  padding-right: 16px;
	 }
	 */


	 /* ========================================================
		 1. HOME PAGE
		 body class: .home
		 File template lien quan: templates/template.home.php
		 ======================================================== */

	 /* Home stats */
	 .home .sc_home-statics {
		  padding: 13.16px;
          font-weight: bold;
	 }

    .home .sc_home-statics-item {
		  justify-content: center;
	 }


	 .home .sc_home-statics-item .title {
		  font-size: 12px;
	 }

	 .home .sc_home-statics-item .content {
		  font-size: 8px;
	 }

	 .home .box_video_full {
		  width: 353.26px;
		  height: 183.65px;
		  margin-left: auto;
		  margin-right: auto;
	 }

	 .home .sc_home-slide-item .title {
		  font-size: 12px;
	 }

	 .home .sc_home-slide-item .content-bottom {
		  font-size: 10px;
	 }

     .home .sc_home-slide-item .content-bottom .col-xs-12:first-child {
        padding-right: 15px;
     }

     .home .sc_home-slide-item .content-box {
        height: 95px;
     }

	 .home .sc_home-slide-item .vertical-line {
		  right: auto;
		  left: 100%;
		  transform: unset;
	 }

	 .home .sc_home-slide_project .sc_home-project-item {
		  width: 100%;
	 }

	 .home .sc_tab_content_items {
		  display: flex !important;
		  flex-wrap: wrap;
	 }

	 .home .sc_tab_content_item {
		  width: 50% !important;
		  margin-top: 20px;
		  margin-bottom: 10px;
	 }

	 .home .sc_tab_content_item .title {
		  font-size: 12px;
	 }

	 .home .sc_tab_content_item .content {
		  display: none;
	 }

	 /* Home blocks (placeholder - them CSS tiep tai day) */
	 /* .home .sc_home-slide-item {} */
	 /* .home .sc_home-project {} */
	 /* .home .sc_home-baochi {} */


	 /* ========================================================
		 2. ABOUT PAGE (placeholder)
		 ======================================================== */
	 /* .page-template-template-about .about-section {} */


	 /* ========================================================
		 3. SERVICE SECTION (HOME & ALL PAGES)
		 Mobile carousel implementation
		 ======================================================== */
	 .home-service-section .wrapper {
		  padding: 48px 0;
	 }

	 .home-service-section .sc-service-carousel {
		  display: flex !important;
		  gap: 0;
		  border: none;
		  margin-top: 0;
	 }

	 .home-service-section .sc-service-carousel .service-item {
		  flex: none !important;
		  border-right: none;
		  height: 100%;
		  flex-basis: 100%;
	 }

	 .home-service-section .sc-service-carousel .service-item .icon svg {
		  width: 22px !important;
		  height: auto !important;
	 }

	 .home-service-section .sc-service-carousel .service-item h3 {
		  font-size: 10px !important;
	 }

	 .home-service-section .sc-service-carousel .service-item .bottom .content {
		  display: none;
	 }

	 .home-service-section .sc-service-carousel .service-item .bottom {
		  justify-content: flex-start;
	 }

	 .home-service-section .sc-service-carousel .service-item .bottom .service-item-mobile-btn {
		  display: inline-flex;
		  align-items: center;
		  gap: 8px;
		  padding: 0;
		  border: 0;
		  background: transparent;
		  color: #fff;
		  text-transform: uppercase;
	 }

	 .home-service-section .sc-service-carousel .service-item .bottom .service-item-mobile-btn span {
		  font-size: 8px;
		  line-height: 1;
		  letter-spacing: 0.5px;
	 }

	 .home-service-section .sc-service-carousel .service-item .bottom .service-item-mobile-btn svg {
		  width: 14px;
		  height: 14px;
		  flex-shrink: 0;
	 }

	 /* Owl Carousel specific styles */
	 .home-service-section .owl-carousel {
		  /* display: flex; */
	 }

	 .home-service-section .owl-stage {
		  display: flex;
	 }

	 .home-service-section .owl-item {
		  display: flex;
		  padding: 0 6px;
	 }

	 .home-service-section .owl-item .service-item {
		  width: 100%;
		  flex-basis: auto;
	 }

	 .home-service-section .owl-dots {
		  margin-top: 24px;
		  text-align: center;
	 }

	 .home-service-section .owl-dot span {
		  width: 10px;
		  height: 10px;
		  margin: 0 6px;
		  background: rgba(255, 255, 255, 0.3);
		  border-radius: 50%;
	 }

	 .home-service-section .owl-dot.active span {
		  background: #FFBA00;
	 }

	 /* Navigation buttons */
	 .home-service-section .owl-prev,
	 .home-service-section .owl-next {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  width: 40px;
		  height: 40px;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  background: rgba(0, 0, 0, 0.5);
		  color: #FFBA00;
		  border: none;
		  cursor: pointer;
		  z-index: 10;
		  font-size: 18px;
	 }

	 .home-service-section .owl-prev {
		  left: 10px;
	 }

	 .home-service-section .owl-next {
		  right: 10px;
	 }

	 .home-service-section .owl-prev:hover,
	 .home-service-section .owl-next:hover {
		  background: rgba(0, 0, 0, 0.8);
	 }

	 /* Reset nav buttons layout for 3d carousel on mobile */
	 .home-service-section .sc_carousel-3d .owl-prev,
	 .home-service-section .sc_carousel-3d .owl-next {
		  position: static;
		  top: unset;
		  bottom: unset;
		  left: unset;
		  right: unset;
		  transform: unset;
		  display: block;
	 }

	 .sbs-brand-journey__card {
		  width: 90vw !important;
		  height: 60vh !important;
	 }

	 .sbs-brand-journey {
		  height: 70vh !important;
	 }

	 .sbs-ecosystem__inner {
		  display: block !important;
		  text-align: center;
	 }

	 .sbs-ecosystem__inner .sbs-ecosystem__col,
	 .sbs-ecosystem__inner .sbs-ecosystem__center {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
	 }

	 .sbs-ecosystem__mosaic img,
	 .sbs-ecosystem__mosaic-img {
		  object-fit: contain;
		  height: auto;
	 }


	 /* ========================================================
		 4. CONTACT PAGE (placeholder)
		 ======================================================== */
	 /* .page-template-template-contactus .contact-section {} */


	 /* ========================================================
		 4. CONTACT PAGE (placeholder)
		 ======================================================== */
	 /* .page-template-template-contactus .contact-section {} */
}