*{margin:0;padding:0;box-sizing:border-box;font-family: 'Be Vietnam Pro', sans-serif;} body{color:#4E4E4E;font-family:"Inter",sans-serif;margin:0 auto;background:#fff;font-weight:400} html{font-size:16px;line-height: 20px;font-family:"Inter",sans-serif} img{max-width:100%;height:auto} a{text-decoration:none;color: inherit;} .clearfix{content:"";clear:both} ul,li{list-style:none} .gap-16{gap:16px;} .gap-8 {gap: 8px;} table{border-collapse:collapse;width:100%} .ul,.ol{margin:0;padding:0;list-style:none} .d-flex{display:flex!important} .align-items-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center} .justify-content-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center} .justify-content-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between} .justify-content-around{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-around} .flex-around{justify-content:space-around} .flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column} .flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row} .global-breadcrumb ol{padding:13px 0} .global-breadcrumb li:last-child .gach-cheo{display:none !important;} .global-breadcrumb li:first-child span{margin-right:5px} .grid{display:-ms-grid;display:grid;gap:12px} .grid--6-cols{grid-template-columns:repeat(6,1fr)} .grid--5-cols{grid-template-columns:repeat(5,1fr)} .grid--4-cols{grid-template-columns:repeat(4,1fr)} .grid--2-cols{grid-template-columns:repeat(2,1fr)} .grid--3-cols{grid-template-columns:repeat(3,1fr)} .grid--2-rows{grid-template-rows:repeat(2,1fr)} .grid--product-details{-ms-grid-columns:3fr 1fr;grid-template-columns:3fr 1fr} .grid--product-details-inside{-ms-grid-columns:5.13fr 6.48fr;grid-template-columns:7fr 5.76fr} .justify-content-between{justify-content:space-between} .d-block{display:block} .d-none,.hide{display:none!important} .flex-wrap{flex-wrap:wrap!important} .text-center{text-align:center!important} .align-items{align-items:center!important} .space-between{justify-content:space-between!important} .space-center{justify-content:center!important} .d-block{display:block!important} .flex-direction{flex-direction:column} .container{padding:0 10px;max-width:1210px;margin:0 auto} .line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .line-clamp-4{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .font-weight-700{font-weight:700} .font-weight-600{font-weight:600} .font-weight-500{font-weight:500} .swiper-button-next,.swiper-button-prev{width:30px;height:50px;background:rgba(0,0,0,.15)} .swiper-button-prev{border-radius:0 10px 10px 0;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)} .swiper-button-next{border-radius:10px 0 0 10px;-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)} .swiper-button-next::after,.swiper-button-prev::after{font-size:16px;color:var(--white)} .swiper{width:100%;height:100%;margin-left:auto;margin-right:auto} .swiperShowcase{border-radius:15px} .swiper-slide img{display:block;width:100%} .swiper-pagination-bullet{width:10px!important;height:10px!important;border-radius:5px!important;background:#fff!important;} .swiper-pagination-bullet-active{ background:#fff!important;} .swiper-slide-product{height:auto;background:#fff;border-radius:15px} .swiper-slide-product:hover{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)} .swiper-slide-product:hover .card-img img{-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s;-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)} .static-html a, .static-html b, .static-html h1, .static-html h2, .static-html h3, .static-html h4, .static-html h5, .static-html h6, .static-html ol, .static-html p, .static-html span, .static-html strong, .static-html ul { margin: revert; padding: revert; } /*HEADER*/ .box-header{ background-color: #fff; padding: 12px 0; box-shadow: 0px -3px 10px rgba(0, 0, 0, 0.25); } .box-header-mobile{ display: none; } .box-header .header-left .title{ margin-left: 8px; text-transform: uppercase; color: #000; } .box-header .header-right a{ text-transform: uppercase; color: #989898; margin-right: 28px; } .box-header .header-right a:last-child{ margin-right: 0; font-size: 22px; color: #1778f2; } .box-header .header-right a:hover, .box-header .header-right a.active{ color: #000; text-decoration: underline; } /* HOMEPAGE */ .homepage .box-home-banner{ position: relative; margin-bottom: 20px; } .homepage .box-home-banner .banner-content{ color: #fff; position: absolute; z-index: 1; margin: 0 auto; transform: translate(-50%, -50%); top: 65%; left: 50%; } .homepage .box-home-banner .banner-content .title{ background: rgba(0,0,0,0.4); padding: 12px; width: max-content; margin: 0 auto 20px; } .homepage .box-home-banner .banner-content .title h2{ text-transform: uppercase; font-size: 34px; line-height: 38px; text-align: center; margin: 0; font-weight: 400; } .homepage .box-home-banner .banner-content .btn-banner{ background: #DD9933; border: 1px solid #FFFFFF; width: max-content; padding: 9px 14px; margin: 0 auto; } .homepage .box-home-banner .banner-content .btn-banner:hover{ background: #fff; color: #8c8c8c8c; } .homepage .box-home-banner .banner-content .btn-register-banner{ font-size: 20px; line-height: 24px; text-transform: uppercase; text-align: center; } .homepage .box-descreption-home .title{ font-size: 28px; line-height: 30px; text-align: center; color: #3A6981; margin-bottom: 24px; } .homepage .box-descreption-home .text{ font-size: 18px; margin: 0 auto 30px; text-align: center; line-height: 30px; max-width: 760px; } .homepage .box-descreption-home h3{ font-size: 24px; line-height: 40px; text-align: center; max-width: 1100px; margin: 0 auto; font-weight: 400; margin-bottom: 30px; } .homepage .box-descreption-home .title-center{ padding: 0 37px; width: 100%; text-align: center; font-size: 20px; text-transform: uppercase; line-height: 24px; } .homepage .box-descreption-home .underline{ border: 1px solid #DD9933; width: 50%; height: 1px; } .homepage .box-descreption-home .list-descreption-home{ gap:50px; } .homepage .box-descreption-home .item-text{ font-size: 14px; text-align: center; margin-top: 20px; line-height: 24px; color: #727272; } .homepage .box-banner-about-home{ margin: 40px 0 30px; position: relative; } .homepage .banner-about-home-mobile{ display: none; } .homepage .text-about-trust-home{ max-width: 930px; text-align: center; margin: 0 auto; color: #727272; font-size: 28px; line-height: 36px; margin-bottom: 30px; } .homepage .box-banner-about-home img{ width: 100%; } .homepage .box-banner-about-home .content-banner-about-home{ position: absolute; z-index: 1; margin: 0 auto; transform:translate(-50%, -50%); left: 50%; top: 50%; width: 100%; } .homepage .box-banner-about-home h2{ font-size: 40px; color: #fff; line-height: 46px; margin-bottom: 20px; text-align: center; font-weight: 300; } .homepage .btn-home{ border: 1px solid #FFFFFF; padding: 8px 20px; width: max-content; margin: 0 auto; color: #fff; } .homepage .btn-home:hover{ background: #fff; color: #727272; } .homepage .box-support-home{ background: #78909C; padding: 26px 0 30px; } .homepage .box-support-home .text{ font-size: 20px; text-align: center; color: #fff; line-height: 34px; max-width: 860px; margin: 0 auto 20px; } .homepage .box-bottom-home{ gap: 40px; padding: 30px 10px; line-height: 32px; text-align: justify; } /*ABOUT*/ .box-content-page{ padding: 14px 10px 100px; gap: 40px; } .box-content-page .box-content-page-left .title{ font-size: 20px; line-height: 32px; margin-bottom: 10px; } .box-content-page .box-content-page-left h3{ margin: 12px 0; } .box-content-page .box-content-page-left p{ text-align: justify; line-height: 24px; } .box-content-page .btn-content-page { background: #DD9933; padding: 9px 26px; width: max-content; margin-top: 20px; color: #fff; cursor: pointer; } .box-content-page .btn-content-page:hover{ background-color: #fff; color: #4E4E4E; border: 1px solid #4E4E4E; } .box-content-page-left, .box-content-page-right{ width: 50%; } .box-content-page-right .btn-content-page-right{ display: none; } /*LOCATION PAGE*/ .location-page .box-content-page{ padding-bottom: 60px; } .location-page .box-content-page:nth-child(even){ flex-direction: row-reverse; padding-bottom: 100px; } .btn-location-right{display:none;} /*PHOTOSOS IMG*/ .photos-images-page .item-photos-image{ width: calc(100% / 4 - 9px); } .photos-images-page .box-list-photos-images{ gap: 60px 12px; padding: 0 10px 20px; } .photos-images-page .item-photos-image .time-item-img{ position: absolute; bottom: 4px; left: 0; color: #fff; background: #2D2D2D; border-radius: 0px 15px; padding: 6px 8px; } .photos-images-page .item-photos-image .time-item-img p{ font-size: 20px; line-height: 24px; } .photos-images-page .item-photos-image .time-item-img span{ font-size: 13px; line-height: 16px; } .photos-images-page .item-img{ position: relative; display: block; } .photos-images-page .title{ margin-top: 12px; height: 38px; font-size: 16px; } /*CONTACT*/ .box-contact{ padding: 20px 10px 20px; gap: 14px; } .box-contact .box-contact-left{ width: 60%; } .box-contact .box-contact-right{ width: 40%; } .box-contact .item-title img{ width: 24px; height: 24px; margin-right: 8px; } .box-contact .item-title p{ font-size: 12px; line-height: 16px; } .box-contact .item-title h2{ text-transform: uppercase; color: #4E4E4E; font-size:12px; font-weight:400; } .box-contact .img-contact img{ width: 100%; margin-top: 14px; } .box-contact .box-contact-right p{ font-size: 14px; line-height: 16px; margin-bottom: 6px; } .box-contact .box-contact-right input{ width: 100%; border: 1px solid #E0E0E0; outline: none; height: 32px; padding: 0 10px; margin-bottom: 16px; } .box-contact .box-contact-right::placeholder { color: #C3C3C3; font-size: 12px } .box-contact .box-contact-right textarea{ width: 100%; border: 1px solid #E0E0E0; padding: 10px; height: 293px; } .box-contact .btn-contact{ background: #DD9933; width: max-content; color: #fff; padding: 9px; text-align: center; margin-top: 14px; width: 160px; border: 1px solid #DD9933; } .box-contact .btn-contact:hover{ background: #fff; color:#4E4E4E; border: 1px solid #4E4E4E; } /*ARTILCE*/ .box-article-home{ margin-top: 14px; margin-bottom: 30px; } .box-article-home .box-list-arrticle { gap:50px 12px; } .box-article-home .item-arrticle{ width: calc(100% / 3 - 12px); } .box-article-home .item-arrticle img{ border-radius: 16px; margin-bottom: 14px; } .box-article-home .item-arrticle span{ display: block; font-size: 14px; line-height: 18px; color: #999999; margin: 10px 0; } .box-article-home .item-arrticle .title-item{ height: 40px; display: block; } .box-article-home .item-arrticle .title-item h2{font-size:16px;color: #000;} .box-article-home .item-arrticle p{ font-size: 12px; line-height: 16px; text-align: justify; color: #000; } /*FOOTER*/ .box-footer{ background: #4E4E4E; padding: 12px 0; } .box-footer .title{ font-size: 13px; line-height: 18px; color: #fff; text-align: center; } .scroll-top-btn { font-size: 36px; width: 60px; height: 60px; position: fixed; bottom: 100px; right: 10px; background: #78909C; border-radius: 50%; z-index: 999; -webkit-box-shadow: 0 1px 5px #000; box-shadow: 0 1px 5px #000; color: #fff; } /*MENU MOBILE*/ .bg-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 7; display: none; } .top-menu{ padding: 30px 10px 0 20px; } .global-menu-container { position: fixed; top: 0; left: -100%; bottom: 0; background: #fff; z-index: 99; width: 58%; -webkit-box-shadow: 4px 0px 6px 2px rgba(0, 0, 0, 0.3); box-shadow: 4px 0px 6px 2px rgba(0, 0, 0, 0.3); overflow: auto; -webkit-transition: .4s all; transition: .4s all; } .global-menu-container.show { -webkit-transition: .4s all; transition: .4s all; left: 0; } .global-menu-container .header-user { position: relative; padding-left: 70px; font-size: 16px; line-height: 55px; color: #9b9b9b; } .global-menu-container .header-user::before { content: ''; background: url(/static/assets/default/images/lock.png) no-repeat; background-color: #d0d0d0; background-position: 10px 8px; width: 55px; height: 55px; border-radius: 50%; position: absolute; top: 0; left: 0; } .global-menu-container .header-user a { color: #797979; } .global-menu-container .icon-close { width: 26px; height: 26px; background-position: -97px -2px; } .icon-mb { background: url(/static/assets/default/images/lock.png) no-repeat; } .global-menu-container .global-menu-list { margin-top: 32px; } .global-menu-container .title { font-weight: 700; font-size: 18px; margin-bottom: 20px; padding: 0 10px 0 20px; text-transform: uppercase; } .global-menu-container .title::before { content: ''; background: url(/static/assets/default/images/menu-dm.png) no-repeat; width: 25px; height: 22px; display: inline-block; vertical-align: bottom; margin-right: 10px; } .cat-list-group .cat-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; border-bottom: 1px solid #E4E4E4; padding: 6px 10px 6px 16px; } .global-menu-container .cat-list-group a { border: 0; } .global-menu-container .cat-list-group a { padding: 5px 0; font-weight: lighter; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; } .global-menu-container .cat-thum { width: 30px; margin-right: 10px; height: 25px; background-position: center; background-repeat: no-repeat; background-size: contain; } .global-menu-container .cat-title { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-transform: capitalize; font-weight: 700; } .global-menu-container i{ font-size: 16px; width: 18px; margin-right: 12px; } .album-artilce p{margin:0 !important;} .album-artilce{padding-bottom: 30px;} .list-album-image{ gap: 8px; } .box-detail-artilce .album-artilce p img{width:100%;cursor: pointer;display: none;} .detail-article-information img{width: 100%;} .box-article-related{ border-top: 1px solid rgba(227, 227, 227, 0.7); padding-top: 12px; } .box-article-related .title{ font-size: 24px; line-height: 30px; margin-bottom: 16px; color: #000; } @media screen and (max-width: 1200px){ html{ font-size: 14px; line-height: 18px; } .homepage .box-home-banner .banner-content .title{ padding: 10px; } .homepage .box-home-banner .banner-content .title h2{ font-size: 26px; line-height: 30px; } .homepage .box-home-banner .banner-content .title{ margin: 0 auto 12px; } .homepage .box-home-banner .banner-content .btn-banner { padding: 6px 14px; } .homepage .box-descreption-home .text{ margin-bottom: 20px; } .homepage .box-home-banner .banner-content .btn-register-banner{ font-size: 18px; line-height: 20px; } .homepage .box-descreption-home h3{ font-size: 22px; line-height: 36px; } .homepage .box-descreption-home .title-center{ padding: 0 16px; } .homepage .box-banner-about-home h2{ font-size: 36px; margin-bottom: 16px; } .homepage .btn-home{ padding: 6px 16px; } .homepage .box-descreption-home .list-descreption-home{ gap: 30px; } .homepage .text-about-trust-home{ font-size: 22px; } .homepage .box-support-home .text{ font-size: 18px; } .box-content-page .box-content-page-left .title{ font-size: 18px; line-height: 24px; } .box-content-page{ padding: 12px 10px 80px; } .box-content-page .box-content-page-left p{ line-height: 20px; } .box-content-page .btn-content-page{ padding: 10px 24px; } .photos-images-page .title{ margin-top: 8px; } .photos-images-page .item-photos-image .time-item-img{ bottom: 4px; padding: 4px 6px; } .photos-images-page .item-photos-image .time-item-img p{ font-size: 18px; line-height: 20px; } .box-contact .box-contact-right textarea{ height: 206px; } .box-contact .btn-contact{ padding: 6px; width: 130px; } .box-article-home .box-list-arrticle{ gap: 35px 12px; } .box-article-home .item-arrticle img{ margin-bottom: 10px; } .box-article-home .item-arrticle span{ margin: 6px 0; font-size: 13px; } .scroll-top-btn{ width: 50px; height: 50px; } } @media screen and (max-width: 992px) { html{ font-size: 13px; } .box-header .header-right a{ margin-right: 8px; } .box-article-home .item-arrticle .title-item h2{font-size:14px;} .homepage .box-home-banner .banner-content .title h2{ font-size: 22px; line-height: 26px; } .photos-images-page .title{font=size: 13px;} .homepage .box-home-banner .banner-content .title{ margin: 0 auto 8px; } .homepage .box-home-banner .banner-content .title { padding: 8px; } .homepage .box-home-banner .banner-content .btn-register-banner{ font-size: 15px; } .homepage .box-home-banner .banner-content{ top: 62%; } .homepage .box-home-banner .banner-content .btn-banner{ padding: 4px 10px; } .homepage .box-descreption-home h3{ font-size: 21px; } .homepage .box-descreption-home .title{ font-size: 20px; line-height: 26px; margin-bottom: 16px; } .homepage .box-descreption-home .text{ margin-bottom: 16px; font-size: 16px; line-height: 24px; } .homepage .box-descreption-home .list-descreption-home{ gap: 0; grid-template-columns: repeat(1,1fr); } .homepage .box-descreption-home .underline{ width: 100%; } .homepage .box-descreption-home .title-center{ width: 60%; } .homepage .item-descreption-home{ margin-bottom: 30px; } .homepage .box-banner-about-home h2{ font-size: 32px; margin-bottom: 12px; } .homepage .text-about-trust-home{ font-size: 20px; line-height: 30px; } .homepage .box-bottom-home{ padding: 24px 10px; line-height: 26px; gap:30px; } .location-page .box-content-page:nth-child(even){ flex-direction: column; gap: 0; padding-bottom: 60px; } .about-us-page .box-content-page{ flex-direction: column-reverse; gap: 0; padding-bottom: 60px; } .location-page .box-content-page{ flex-direction: column; gap: 0; padding-bottom: 60px; } .box-content-page-left, .box-content-page-right { width: 100%; } .box-content-page-right{ position: relative; } .box-content-page-left{ width: 100%; } .box-content-page-right img{ width: 100%; margin-top: 0; } .box-content-page-right .btn-content-page-right{ display: block; position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); border: 1px solid #fff; font-size: 16px; font-weight: 700; } .box-content-page-left{ margin-top: 12px; } .box-content-page .btn-content-page-left{ display: none; } .location-page .box-content-page{ padding-bottom: 20px; } .photos-images-page .box-list-photos-images{ gap: 40px 12px; } .photos-images-page .item-photos-image{ width: calc(100% / 3 - 8px); } .box-contact{ flex-direction: column; } .box-contact .box-contact-left{ width: 100%; } .box-contact .box-contact-right{ width: 100%; margin-top: 20px; } .btn-location-left{display: none !important;} .box-content-page-right img{margin-top: 12px;} .box-content-page-left { margin-top: 0; } .btn-location-right{display:block;} } @media screen and (max-width: 768px){ .box-header-pc{ display: none; } .swiper-banner-mobile{display: block !important;} .swiper-banner-pc{display: none !important;} .homepage .box-home-banner .banner-content .title h2{ font-size: 12px; line-height: 18px; } .homepage .box-home-banner .banner-content .btn-banner{padding: 0px 9px;} .homepage .box-home-banner .banner-content .btn-register-banner{ font-size:10px; } .homepage .box-home-banner .banner-content .title{padding:2px 4px;} .box-header-mobile{ display: flex; padding: 8px 10px; box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.25); } .box-header-mobile a{ font-size: 20px; } .box-header-mobile .header-center-mobile p{ text-align: center; margin-left: 6px; font-size: 12px; color: #000; } .box-header-mobile .header-mobile-right{ font-size: 26px; color: #1778f2; } .box-main-hompage{ margin-top: 14px; } .homepage .box-descreption-home .title{ font-size: 16px; margin-bottom: 12px; } .homepage .box-descreption-home .text{ font-size: 12px; } .homepage .box-descreption-home h3{ font-size: 18px; line-height: 30px; margin-bottom: 16px; } .homepage .box-descreption-home .title-center{ font-size: 16px; width: 100%; } .homepage .box-descreption-home .item-text{ margin-top: 12px; font-size: 12px; } .homepage .item-descreption-home{ margin-bottom: 18px; } .banner-about-home-pc{ display: none; } .homepage .banner-about-home-mobile{ display: block; } .homepage .box-banner-about-home h2{ font-size: 30px; line-height: 36px; } .homepage .btn-home { padding: 4px 11px; } .homepage .box-banner-about-home{ margin: 12px 0; } .homepage .text-about-trust-home{ margin-bottom: 20px; line-height: 26px; } .homepage .box-support-home{ padding: 26px 0 24px; } .homepage .box-support-home .btn-home{ font-size: 16px; padding: 9px 24px; } .homepage .box-bottom-home{ grid-template-columns: repeat(1,1fr); padding: 20px 10px; font-size: 16px; line-height: 30px; gap: 20px; } .box-footer .title{ font-size: 10px; } .box-content-page .box-content-page-left .title{ font-size: 14px; margin-bottom: 8px; } .box-content-page .box-content-page-left h3{ font-size: 16px; margin: 8px 0; } .box-content-page{ padding: 0 10px; } .about-us-page .box-content-page{ padding-bottom: 20px; } .box-content-page-right .btn-content-page-right{ padding:4px 20px; bottom: 30px; } .box-contact .box-contact-right{ margin-top:0; } .box-contact { padding: 0 10px 20px; } .box-contact .btn-contact{ width: 112px; font-size: 16px; font-weight: 700; } .box-contact .box-contact-left .box-title{ flex-direction: column-reverse; align-items: flex-start; gap: 16px; } .box-contact .box-contact-left .img-contact{display: none;} .box-contact{flex-direction: column-reverse;} .box-article-home .item-arrticle{ width: calc(100% / 2 - 12px); } .box-article-home{margin-top:0;} .box-article-home .box-list-arrticle{gap: 20px 12px;} .box-article-home .item-arrticle img { margin-bottom: 4px; border-radius: 6px; } .box-article-home .item-arrticle span { margin: 2px 0; font-size: 10px; } .box-article-home .item-arrticle p{font-size: 10px;} .location-page .box-content-page:nth-child(even){padding-bottom: 20px;} .photos-images-page .item-photos-image{ width: calc(100% / 2 - 6px); } .photos-images-page .box-list-photos-images { gap: 20px 12px; } .photos-images-page .item-photos-image .time-item-img span { font-size: 10px; } .photos-images-page .item-photos-image .time-item-img p { font-size: 15px; } .list-album-image{ -ms-grid-columns:(1fr)[2]; grid-template-columns:repeat(2,1fr); } .box-article-related .title{ font-size: 16px; line-height: 24px; margin-bottom: 12px; } }