@font-face{
    font-family:"utm-alexander";
    src:url("/assets/fonts/UTM Alexander.ttf") format("woff"),
    url("/assets/fonts/UTM Alexander.ttf") format("opentype"),
    url("/assets/fonts/UTM Alexander.ttf") format("truetype");
}
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?1');
    src:  url('fonts/icomoon.eot?1#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?1') format('truetype'),
        url('fonts/icomoon.woff?1') format('woff'),
        url('fonts/icomoon.svg?1#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
  
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-ic-showmore:before {
    content: "\e92c";
  }
  .icon-ic-5:before {
    content: "\e900";
  }
  .icon-arrow-1:before {
    content: "\e901";
  }
  .icon-minus1:before {
    content: "\e902";
  }
  .icon-plus:before {
    content: "\e903";
  }
  .icon-like-1:before {
    content: "\e904";
  }
  .icon-arrow-3:before {
    content: "\e905";
  }
  .icon-arrow-4:before {
    content: "\e906";
  }
  .icon-ic-6:before {
    content: "\e907";
  }
  .icon-arrow-9:before {
    content: "\e908";
  }
  .icon-arrow-6:before {
    content: "\e909";
  }
  .icon-arrow-2:before {
    content: "\e90a";
  }
  .icon-sort:before {
    content: "\e90b";
  }
  .icon-clock:before {
    content: "\e90c";
  }
  .icon-arrow-5:before {
    content: "\e90d";
  }
  .icon-tab-5:before {
    content: "\e90e";
  }
  .icon-close:before {
    content: "\e90f";
  }
  .icon-tab-6:before {
    content: "\e910";
  }
  .icon-tab-7:before {
    content: "\e911";
  }
  .icon-date:before {
    content: "\e912";
  }
  .icon-date-2:before {
    content: "\e913";
  }
  .icon-ic-8:before {
    content: "\e914";
  }
  .icon-ic-10:before {
    content: "\e915";
  }
  .icon-tab-2:before {
    content: "\e916";
  }
  .icon-tab-3:before {
    content: "\e917";
  }
  .icon-facebook:before {
    content: "\e918";
  }
  .icon-tab-4:before {
    content: "\e919";
  }
  .icon-google:before {
    content: "\e91a";
  }
  .icon-google-plus:before {
    content: "\e91b";
  }
  .icon-google-plus-2:before {
    content: "\e91c";
  }
  .icon-heart:before {
    content: "\e91d";
  }
  .icon-home:before {
    content: "\e91e";
  }
  .icon-home2:before {
    content: "\e91f";
  }
  .icon-home3:before {
    content: "\e920";
  }
  .icon-image:before {
    content: "\e921";
  }
  .icon-instagram:before {
    content: "\e922";
  }
  .icon-language:before {
    content: "\e923";
  }
  .icon-linkedin:before {
    content: "\e924";
  }
  .icon-lock:before {
    content: "\e925";
  }
  .icon-mail-1:before {
    content: "\e926";
  }
  .icon-mail-2:before {
    content: "\e927";
  }
  .icon-mail-3:before {
    content: "\e928";
  }
  .icon-map:before {
    content: "\e929";
  }
  .icon-tab-8:before {
    content: "\e92a";
  }
  .icon-tab-1:before {
    content: "\e92b";
  }
  .icon-minus-2:before {
    content: "\e92d";
  }
  .icon-sort-2:before {
    content: "\e92f";
  }
  .icon-phone-1:before {
    content: "\e932";
  }
  .icon-phone-2:before {
    content: "\e933";
  }
  .icon-phone-3:before {
    content: "\e934";
  }
  .icon-phone-4:before {
    content: "\e935";
  }
  .icon-mess:before {
    content: "\e937";
  }
  .icon-play:before {
    content: "\e938";
  }
  .icon-share2:before {
    content: "\e939";
  }
  .icon-plus-2:before {
    content: "\e93a";
  }
  .icon-question:before {
    content: "\e93b";
  }
  .icon-quote:before {
    content: "\e93c";
  }
  .icon-search:before {
    content: "\e93d";
  }
  .icon-search-2:before {
    content: "\e93e";
  }
  .icon-share:before {
    content: "\e93f";
  }
  .icon-share-2:before {
    content: "\e940";
  }
  .icon-smile:before {
    content: "\e942";
  }
  .icon-spin:before {
    content: "\e943";
  }
  .icon-star:before {
    content: "\e944";
  }
  .icon-talk:before {
    content: "\e946";
  }
  .icon-tick:before {
    content: "\e947";
  }
  .icon-twitter:before {
    content: "\e949";
  }
  .icon-location:before {
    content: "\e94c";
  }
  .icon-youtube:before {
    content: "\e94e";
  }
  .icon-youtube-2:before {
    content: "\e94f";
  }
  .icon-view:before {
    content: "\e953";
  }
  .icon-menu1:before {
    content: "\e959";
  }
  .icon-news:before {
    content: "\e95b";
  }
  .icon-copy:before {
    content: "\e95e";
  }
  .icon-nha:before {
    content: "\e95f";
  }
  .icon-phone:before {
    content: "\e960";
  }
  .icon-pin:before {
    content: "\e961";
  }
  .icon-share1:before {
    content: "\e962";
  }
  .icon-download1:before {
    content: "\e964";
  }
  .icon-i360:before {
    content: "\e965";
  }
  .icon-zalo:before {
    content: "\e966";
  }
  .icon-user2:before {
    content: "\e968";
  }
  .icon-tub:before {
    content: "\e969";
  }
  .icon-reset:before {
    content: "\e96a";
  }
  .icon-news1:before {
    content: "\e96d";
  }
  .icon-pin1:before {
    content: "\e96f";
  }
  .icon-reply:before {
    content: "\e970";
  }
  .icon-success:before {
    content: "\e971";
  }

:root {
    --cl1: #234D9C;
    --cl2: #111E46;
    --cl3: #FFD600;
    --cl4: #F8F5F0;
    --clb-2:#d3e1ff;
    --cl5 : rgba(235,249,255,1);
    --cl6: red;
    --cl7:rgba(59, 130, 246);
    --cl8:rgb(243, 234, 222,0.3);
    --cl9: gray;

    --h1: 24px;
    --h2: 22px;
    --h3: 20px;
    --h4: 18px;
    --h5: 16px;
    --h6: 14px;

    --body-line-height: 1.42857143;
}

body{
    width: 100%;
    font-size:14px;
    font-family: 'Roboto', sans-serif;
}
input{
    outline: none;
}
h3{
    font-weight: 400;
    font-size: var(--h3);
}
.h6,h6 {
    font-size: var(--h6);
}

.lhdef{
  line-height: var(--body-line-height) !important;
}

.cl1,.cl1 *{
    color:var(--cl1) !important;
}
.cl1-hover:hover{
  color:var(--cl1) !important;
  border:1px solid var(--cl1);
}
.cl2,.cl2 *{
    color:var(--cl2) !important;
}
.cl3,.cl3 *{
  color:var(--cl3) !important;
}
.cl3-hover:hover{
  color:var(--cl3) !important;
}
.cl4,.cl4 *{
    color:var(--cl4) !important;
}
.cl6,.cl6 *{
    color:var(--cl6) !important;
}
.cl7,.cl7 *{
    color:var(--cl7) !important;
}
.cl9,.cl9 *{
  color:var(--cl9) !important;
}

.cl-white,.cl-white *{
    color:white;
}
.border-cl1{
    border-color:var(--cl1) !important;
}
.border-cl2{
    border-color:var(--cl2) !important;
}

.tf1{
    font-family: "utm-alexander";
}

.card-body img{
    max-width: 100%;
}

.bg0{
    background-color: #fff;
}
.bg1{
    background-color: var(--cl1);
}
.bg2{
    background-color:var(--cl2);
}
.bg3{
    background-color: var(--cl3);
}
.bg3-hover:hover{
  background-color: var(--cl1);
  color: white !important;
}
.bg4{
    background-color: var(--cl4);
}
.bg5{
    background-color: rgb(209, 225, 255, 0.4);
}
.bg6{
    background-color: #f5f6fa;
}
.bg7{
    background-color: rgb(209, 225, 255,0.8);
}

.bg8{
    background-color: var(--cl8);
}
.bg9{
  background-color: rgb(199, 164, 109,0.6);
}
.fs-7,.fs-7 *{
    font-size: 12px !important;
}
.fs-8{
    font-size: 10px !important;
}
.fs-0,.fs-0 *{
    font-size:14px !important;
}

.icon-tab-1:before {
    content: "\e92b";
}
.icon-tab-2:before {
    content: "\e916";
}
.icon-tab-3:before {
    content: "\e917";
}
.icon-tab-4:before {
    content: "\e919";
}
.icon-arrow-4:before {
    content: "\e906";
}
.icon-arrow-3:before {
    content: "\e905";
}

[class*=" icon-"].ix:before,
[class*=" icon-"].iy:before,
[class^=icon-].ix:before,
[class^=icon-].iy:before {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.btn1{
    color:white !important;
    background-color: #224596;
}
.btn1:hover{
    background-color: rgba(59, 130, 246, .2);
    color:#224596 !important;
}
.btn2{
    border: 1px solid #224596 !important;
    color:#224596 !important;
}
.btn2:hover{
    background-color:#224596 !important;
    color: white !important;
}
.w-80{
    width: 80% !important;
}
.w-40{
    width: 40% !important;
}
.w-60{
    width: 60% !important;
}
.w32{
    width: 32px;
}
.h70{
    height: 65px;
}
.mh-1{
    max-height:65px;
}
.mh-2{
    max-height:75px;
}
.mw-50 {
    max-width: 50% !important;
}
.container{
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.transition{
  -webkit-transition: all .3s;
  transition: all .3s;
}
/* ul{margin-left: 20px;} */
.h40{
    height: 40px;
}
.h-1000{
    height: 1000px;
}
.text-decoration-none *{
    text-decoration: none !important;
}
p{margin-bottom: 0;}
del{
    color: #878c8f !important;
    font-size: 12px;
}
.hide{
    display: none !important;
}
.show{
    display: block !important;
}
.border-dot-one {border-style: dotted;}
.z-index-100{
    z-index: 100;
}
.scrollbar-none{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
/* cart */
#cart_number{
    width: 18px;
    height: 18px;
    bottom: 0px;
    right: -5px;
}

.hb1{
    height:28px !important;
}
.op-item{
    border-bottom: 1px dotted #a4c3ff;
}
#cart_body {
    height: calc(100vh - 270px);
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#cart_body .op-item:last-child{
    border: none;
}
.it-count{
    width: 18px;height: 18px;
    color:white !important;
    text-align:center;
    border-radius:30px;
    font-weight:600;
    top:0;
    right:0;
    position:absolute;
    background:var(--cl1);
    font-size:12px;
}
/* end cart */
/* review */
.fr-review-stars-with-bar .review{
    padding: 0 4vw 0 0;
    width: auto;
}
.fr-icon {
    overflow: visible;
    position: relative;
    /* display: inline-block; */
    float: left; margin-right: 1px;
}
.fr-icon.review_star {
    background-image: url("icons/review_star.svg");    
}
.review .review_star {
    background-size: 5em 1em;
    height: 1em;
    margin-left: 3px;
    width: 1em;
}
.review .review_star:nth-child(2) {
    margin-left: 0;
}
.review .review_star.active {
    background-position: -4em 0;
}
.review .review_star.middle {
    background-position: -2em 0;
}
.fr-review-stars-with-bar {
    -webkit-box-align: center;
    align-items: center;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    margin: 9px 0;
}
.fr-percentage-bar {
    background-color: #dadada;
    -webkit-box-flex: 1;
    flex: 1;
}
.fr-percentage-bar .fr-percentage-progress {
    background-color: #1b1b1b;
    display: block;
    font-size: 10px;
    height: 1em;
    width: 0;
}
.fr-review-stars-with-bar .fr-review-stars-with-bar-count {
    box-sizing: content-box;
    font-size: 13px;
    padding: 0 0 0 4%;
    padding: 0 0 0 4vw;
    text-align: right;
    width: 3.5em;
}
@media (min-width: 768px) {
    .mw-1{
        max-width: 340px;
    }
    .mw-modal{
        max-width: 350px;
    }
    .btn-addOrder{
        margin: 1rem !important;
    }
}
@media (max-width: 480px) {
    .container,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9,.col-6{
        padding-left:7px;
        padding-right: 7px
    }
    .row {
        margin-right:-7px;
        margin-left: -7px
    }
}

/* noble */
.banner-image {
  background-size: cover;
  height: 350px;
  background-position: bottom center;
}

.h1,h1{
  font-size: var(--h1);
}
.h2,h2{
  font-size: var(--h2);
}
.h3,h3{
  font-size: var(--h3);
}
.h4,h4{
  font-size: var(--h4);
}
.h5,h5{
  font-size: var(--h5);
}
.h6,h6{
  font-size: var(--h6);
}
@media (min-width: 1200px) {
  .h2, h2 {
      font-size: 24px !important;
  }
}

.hr{
  margin: 10px auto;
  color: var(--cl3) !important;
  opacity: 1;
  border-width: 2px;
}

.content *:has(img) {
  text-align: center !important;
  margin: 10px auto;
  max-width: 100% !important;
}
.btn-youtube{
  font-size: 48px;height: 72px;
  left: calc(50% - 24px);
  bottom: calc(50% - 36px);
  color:#CD201F !important;
}