/*------------------------------------------------------------------
[LAYOUT]

* body
  + Header / header
  + Page Content / .page-content .name-page
        + Section Layouts / section .name-section
        ...
  + Footer / footer

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[COLOR CODES]

# Text Color      :  
# Primary Color 01:  
# Primary Color 02:   
# Primary Color 03:  

------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TYPOGRAPHY]

Body            : 16px/1.6 '', Arial, sans-serif;
Title           : 18px/1.6 '', Arial, sans-serif;
Paragrap        : 18px/1.6 '', Arial, sans-serif;
Input, textarea : 14px/1.6 '', Arial, sans-serif;
-------------------------------------------------------------------*/



/*//////////////////////////////////////////////////////////////////
[ FONT ]*/

/*------------------------------------------------------------------
[ 1 ]*/
@font-face { font-family: Roboto-Regular; src: url('../fonts/Roboto/Roboto-Regular.ttf'); }

@font-face { font-family: Roboto-Medium; src: url('../fonts/Roboto/Roboto-Medium.ttf'); }

@font-face { font-family: Roboto-Bold; src: url('../fonts/Roboto/Roboto-Bold.ttf'); }

@font-face { font-family: Roboto-Black; src: url('../fonts/Roboto/Roboto-Black.ttf'); }

/*------------------------------------------------------------------
[ 2 ]*/
@font-face { font-family: Lato-Regular; src: url('../fonts/Lato/Lato-Regular.ttf'); }


/*//////////////////////////////////////////////////////////////////
[ RS PLUGIN ]*/

/*------------------------------------------------------------------
[ Bootstrap ]*/
.container { max-width: 1200px /*1080px;*/ }
header { /*background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0.5830707282913166) 0%, rgba(146,208,255,1) 75%);*/ }


/*//////////////////////////////////////////////////////////////////
[ LOADDING ]*/
.animsition-loading-1 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.loader05 { width: 56px; height: 56px; border: 4px solid #3563AB; border-radius: 50%; position: relative; animation: loader-scale 1s ease-out infinite; top: 50%; margin: -28px auto 0 auto; }

@keyframes loader-scale {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}


/*//////////////////////////////////////////////////////////////////
[ BUTTON BACK TO TOP ]*/
.btn-back-to-top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: fixed; width: 35px; height: 35px; bottom: -40px; right: 40px; background-color: #3563AB; justify-content: center; align-items: center; z-index: 1000; opacity: 0.6; cursor: pointer; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; }

.symbol-btn-back-to-top { font-size: 18px; color: white; line-height: 1em; }

.btn-back-to-top:hover { opacity: 1; }

@media (max-width: 575px) {
    .btn-back-to-top { bottom: 0px; right: 15px; }
}

.show-btn-back-to-top { bottom: 0; border: 1px solid #FFF; }


/*//////////////////////////////////////////////////////////////////
[ Header ]*/

/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
[ Header Desktop ]*/

/*==================================================================
[ Top-bar ]*/
.topbar {
    background-color: #426870cc;
}

.content-topbar { min-height: 40px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; }

/*---------------------------------------------*/
.left-topbar { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-left: -13px; margin-right: -13px; }

.left-topbar-item { font-family: Roboto-Regular; font-size: 12px; color: #FFF; line-height: 1.8; padding: 0 13px; position: relative; transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; }

a.left-topbar-item:hover { color: #fff; }

.left-topbar-item::before { content: ""; display: block; position: absolute; width: 1px; height: 10px; background-color: #fff; opacity: 0.5; left: 0; top: calc(50% - 5px); }

.left-topbar-item:first-child:before { display: none; }

/*---------------------------------------------*/
.right-topbar { margin-left: -4px; margin-right: -4px; }

    .right-topbar a { font-size: 18px; color: #FFF; line-height: 1.5; margin: 0 4px; transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; }

        .right-topbar a:hover { color: #FFF /*#3563AB*/; }

/*------------------------------------------------------------------
[ Topbar mobile ]*/
.topbar-mobile { background-color: #222; padding: 8px 25px 5px 25px; }

    .topbar-mobile li { padding: 5px 0; }

    .topbar-mobile .right-topbar,
    .topbar-mobile .left-topbar { justify-content: flex-start; }



/*==================================================================
[ Logo ]*/
.wrap-logo { /*background: url('../images/banner.png') no-repeat center center;*/ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; height: 190px; }

/*---------------------------------------------*/
.logo { width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: flex-start; align-items: center; }
    .logo a { margin-bottom: 50px; }
    .logo img { max-width: 100%; }

/*---------------------------------------------*/
.banner-header { width: 70%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: flex-end; align-items: center; }

    .banner-header img { max-width: 100%; max-height: 100%; }

/*---------------------------------------------*/
.wrap-logo.no-banner { justify-content: center; }

    .wrap-logo.no-banner .logo { width: 100%; height: 100%; justify-content: center; align-items: center; }

/*---------------------------------------------*/
.logo-stick { display: none; line-height: 0; margin-right: 15px; }

    .logo-stick img { max-width: 115px; max-height: 30px; }


/*==================================================================
[ Main nav ]*/
.wrap-main-nav { width: 100%; height: 55px; z-index: 1000; position: relative; }

.main-nav { /* border-bottom: 1px solid #DDD;*/ width: 100%; height: 55px; /*background-color: #fff;*/ box-shadow: 0 7px 8px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0 7px 8px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0 7px 8px 0px rgba(0,0,0,0.05); -o-box-shadow: 0 7px 8px 0px rgba(0,0,0,0.05); -ms-box-shadow: 0 7px 8px 0px rgba(0,0,0,0.05); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); }

.menu-desktop { max-width: calc(100% - 30px); width: 1170px; margin: 0 auto; height: 55px; position: relative; }

.main-menu { list-style-type: none; margin: 0; height: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; }

    .main-menu > li { height: 100%; position: relative; }

    .main-menu li:first-child a { margin-left: 0 !important; }

    .main-menu > li > a { /*text-transform: uppercase;*/ font-family: Roboto-Medium; font-size: 14px; line-height: 1.5; color: #222; position: relative; display: flex; align-items: center; height: 100%; padding: 5px 0px; margin: 0 28px; }

        /*  .main-menu > li > a::before { content: ""; display: block; position: absolute; width: calc(100% + 36px); height: 5px; bottom: 0; left: -18px; background-color: #e6e6e6; transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); }

            .main-menu > li > a::after { content: "\f2f9"; font-family: Material-Design-Iconic-Font; font-size: 16px; color: #222; line-height: 1.5; margin-left: 6px; margin-bottom: 1px; transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; }*/

        .main-menu > li > a > .icon { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #325CAF; background: #fff; text-align: center; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); }
            .main-menu > li > a > .icon img { position: absolute; top: 50%; left: 50%; max-width: 45px; transition: all .3s ease-in-out; max-height: 45px; transform: translate(-50%,-50%); }
        .main-menu > li > a:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); }

@media (max-width: 1199px) {
    .main-menu > li > a { margin: 0 18px; }

        .main-menu > li > a::before { left: -10px; width: calc(100% + 20px); }
}

/*---------------------------------------------*/
.sub-menu { list-style-type: none; position: absolute; top: 0; left: 100%; width: 225px; background-color: #fff; padding: 15px 0px 15px 0px; transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; visibility: hidden; opacity: 0; border: 1px solid #f2f2f2; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -o-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); }

    .sub-menu li { position: relative; background-color: transparent; }

.main-menu > li > .sub-menu { top: 100%; left: 0px; }

.main-menu > li.respon-sub-menu > .sub-menu { top: 100%; left: auto; right: 0; }

li.respon-sub-menu > .sub-menu .sub-menu { top: 0; left: auto; right: 100%; }

.sub-menu a { font-family: Roboto-Medium; font-size: 14px; line-height: 1.7857; color: #222; display: block; padding: 8px 17px; width: 100%; transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; }
.sub-menu .fa-caret-right { text-align: right; float: right; margin-top: 4px; }

@media (max-width: 1199px) {
    .sub-menu { width: 190px; }

        .sub-menu a { padding: 8px 20px; }
}


/*---------------------------------------------*/
.main-menu > li:hover > a:after { color: #3563AB; }

.main-menu > li:hover > a { text-decoration: none; color: #3563AB; }

.main-menu > li:hover > .sub-menu { visibility: visible; opacity: 1; }

.sub-menu li:hover > .sub-menu { visibility: visible; opacity: 1; }

.sub-menu li:hover { background-color: transparent; }

.sub-menu > li:hover > a {
    background-color: #426870cc;
    color: #fff;
    text-decoration: none;
}

/*------------------------------------------------------------------
[ Mega menu ]*/
.main-menu > li.mega-menu-item { position: static; }

.sub-mega-menu { flex-wrap: wrap; position: absolute; top: 100%; left: 0; background-color: #fff; width: 100%; display: none; border: 1px solid #f2f2f2; box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -o-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0 5px 10px 0px rgba(0,0,0,0.2); }

.main-menu > li:hover > .sub-mega-menu { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }

.sub-mega-menu .nav { width: 240px; border-right: 1px solid #f2f2f2; padding: 30px 0; }

.sub-mega-menu .tab-content { width: calc(100% - 240px); }

/*---------------------------------------------*/
.sub-mega-menu .nav-pills .nav-link { font-family: Roboto-Medium; font-size: 14px; line-height: 1.8; color: #222; border-radius: 0; padding: 8px 20px 8px 33px; }

    .sub-mega-menu .nav-pills .nav-link.active,
    .sub-mega-menu .show > .nav-pills .nav-link { color: #fff; background-color: #3563AB; }

/*---------------------------------------------*/
.sub-mega-menu .tab-content .tab-pane { padding: 25px 50px 35px 30px; }



/*==================================================================
[ Fixed menu desktop ]*/
.fix-menu-desktop .main-nav { position: fixed; top: -94px; left: 0; height: 94px !important; transition: transform 0.3s; -webkit-transition: transform 0.3s; -o-transition: transform 0.3s; -moz-transition: transform 0.3s; }
.fix-menu-desktop .show-main-nav { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); }
.fix-menu-desktop .show-main-nav {
    padding-top: 38px;
    background: #426870;
}
    .fix-menu-desktop .show-main-nav .main-menu > li > a { color: #FFF; }
    .fix-menu-desktop .show-main-nav .main-menu > li:hover .icon, .fix-menu-desktop .show-main-nav .main-menu > li:hover a { border-color: #FAA646; color: #FAA646; }
.fix-menu-desktop .menu-desktop { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: flex-start; }

    .fix-menu-desktop .menu-desktop .logo-stick { display: block; }


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
[ Header Mobile ]*/
.wrap-header-mobile { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; height: 65px; background-color: #fff; padding: 10px 25px; display: none; box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -o-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -ms-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); position: relative; z-index: 100; }

/*------------------------------------------------------------------
[ Logo mobile ]*/
.logo-mobile { display: block; position: relative; height: 100%; -webkit-flex-grow: 1; -moz-flex-grow: 1; flex-grow: 1; }

    .logo-mobile img { max-width: calc(100% - 35px); /*max-height: 60%;*/ position: absolute; top: 0; left: 0; bottom: 0; margin: auto; }

/*------------------------------------------------------------------
[ btn show menu ]*/
.hamburger { float: right; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; padding: 0; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); background: #FFF; padding: 20px; }

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before { border-radius: 0; }


/*==================================================================
[ Menu mobile ]*/
.menu-mobile { /*width: 100%; background-color: #fff; display: none;*/ width: 100%; background-color: #fff; display: none; position: absolute; z-index: 10; border-bottom: 5px solid #207AE3; top: 110px; }

.main-menu-m { padding-top: 13px; padding-bottom: 23px; background-color: #3563AB; }

    .main-menu-m > li > a { font-family: Roboto-Regular; font-size: 16px; color: #fff; line-height: 2.8; padding: 9px 25px 9px 25px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

        .main-menu-m > li > a:hover { color: #fff; }

    .main-menu-m > li { position: relative; background-color: #3563AB; }

.arrow-main-menu-m { font-size: 14px; color: #fff; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; position: absolute; right: 18px; top: 3px; padding: 10px; cursor: pointer; }

    .arrow-main-menu-m i { transform-origin: center; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

.turn-arrow-main-menu-m i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); }

/*---------------------------------------------*/
.sub-menu-m { background-color: #fff; padding: 10px 50px 15px 20px; display: none; }

    .sub-menu-m a { font-family: Roboto-Regular; font-size: 15px; color: #3563AB; line-height: 2.5; padding: 5px 15px 5px 15px; }

        .sub-menu-m a:hover { text-decoration: none; }



/*---------------------------------------------*/
@media (max-width: 991px) {
    .wrap-header-mobile { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }

    .topbar,
    .logo,
    .no-banner,
    .wrap-main-nav { display: none; }

    .wrap-logo { height: auto; }

    .banner-header { width: 100%; justify-content: center; }
}

@media (min-width: 992px) {
    .menu-mobile { display: none; }
}


/*//////////////////////////////////////////////////////////////////
[ Tab01 ]*/
.tab01 .nav-tabs { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; align-items: center; border: none; flex-grow: 1; height: 100%; }

    .tab01 .nav-tabs .nav-item-more,
    .tab01 .nav-tabs .nav-item { height: 100%; padding: 0px; margin: 0px; }

.tab01 .nav-link { font-weight: 600; font-family: Roboto-Regular; font-size: 14px; color: #555; line-height: 1.7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; height: 100%; padding: 5px 12px; border-radius: 0px; border: none; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }

    /*    .tab01 .nav-link.active::after { content: ""; display: block; position: absolute; background-color: #fff; width: 7px; height: 7px; border-left: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; left: calc(50% - 5px); bottom: -5px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
*/
    .tab01 .nav-link:hover { color: #3563AB !important; }


/*---------------------------------------------*/
.tab01-link { padding-left: 10px; white-space: nowrap; }

.tab01-title { padding-right: 25px; }
    .tab01-title span { margin-right: 10px; }
/*---------------------------------------------*/
.tab01 .nav-link.dropdown-toggle::after { display: none; }

.tab01 .dropdown-menu { min-width: 135px; border-radius: 0px; padding: 5px 0; }

    .tab01 .dropdown-menu .nav-link { width: 100%; }

        .tab01 .dropdown-menu .nav-link.active { color: #3563AB; }

            .tab01 .dropdown-menu .nav-link.active::after { display: none; }


/*//////////////////////////////////////////////////////////////////
[ Modal video 01 ]*/
body { padding-right: 0px !important; }
.modal { padding: 0px !important; z-index: 1160; overflow-x: hidden; overflow-y: auto !important; }
.modal-open { overflow-y: scroll; }

/* ------------------------------------ */
.modal-backdrop { background-color: transparent; }

#modal-video-01 { background-color: rgba(0,0,0,0.8); z-index: 1250; }

    #modal-video-01 .modal-dialog { max-width: 100%; height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; }

.wrap-video-mo-01 { width: 854px; height: auto; position: relative; margin: 15px; }

    .wrap-video-mo-01::before { content: ""; display: block; width: 100%; padding-top: 56.25%; }

.video-mo-01 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; -webkit-transition: all 2s; -o-transition: all 2s; -moz-transition: all 2s; transition: all 2s; }

    .video-mo-01 iframe { width: 100%; height: 100%; }

.close-mo-video-01 { font-size: 50px; color: white; opacity: 0.6; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 1250; width: 60px; height: 60px; top: 0; right: 0; }

    .close-mo-video-01:hover { cursor: pointer; opacity: 1; }

/*//////////////////////////////////////////////////////////////////
[ Bread crumb ]*/
.breadcrumb-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; }

    .breadcrumb-item + .breadcrumb-item::before { height: 100%; content: "\f105"; font-family: FontAwesome; font-size: 12px; padding-right: 10px; padding-left: 12px; color: #999; }

a.breadcrumb-item:hover { color: #3563AB; }

/*//////////////////////////////////////////////////////////////////
[ Pagination ]*/
.pagi-item { font-family: Roboto-Regular; font-size: 13px; line-height: 1.5; color: #808080; width: 36px; height: 36px; border: 1px solid #e9e9e9; border-radius: 50%; }

    .pagi-item.pagi-active { background-color: #3563AB; border-color: #3563AB; color: #fff; }


/*==================================================================
   COLOR COLOR COLOR COLOR COLOR COLOR COLOR COLOR COLOR COLOR COLOR 
==================================================================*/
.bocl0 { border-color: #fff; }
.bocl1 { border-color: #111; }
.bocl2 { border-color: #222; }
.bocl3 { border-color: #333; }
.bocl4 { border-color: #444; }
.bocl5 { border-color: #555; }
.bocl6 { border-color: #666; }
.bocl7 { border-color: #777; }
.bocl8 { border-color: #888; }
.bocl9 { border-color: #999; }
.bocl10 { border-color: #3563AB; }
.bocl11 { border-color: #e6e6e6; }
.bocl12 { border-color: #ccc; }
.bocl13 { border-color: #d9d9d9; }

/*---------------------------------------------*/
.cl-none { color: transparent; }
.cl0 { color: #fff; }
.cl1 { color: #111; }
.cl2 { color: #222; }
.cl3 { color: #333; }
.cl4 { color: #444; }
.cl5 { color: #555; }
.cl6 { color: #666; }
.cl7 { color: #777; }
.cl8 { color: #888; }
.cl9 { color: #999; }
.cl10 { color: #3563AB; }
.cl11 { color: #FFF /*#ccc*/; }
.cl12 { color: #e71d69; }
.cl13 { color: #15a752; }
.cl14 { color: #e3724a; }
.cl15 { color: #b2b2b2; }
.cl16 { color: #e5e5e5; }
.cl17 { color: #00b5e9; }
.cl18 { color: #2489b0; }
.cl19 { color: #FFF /* #3563AB*/; }

.cl8 .far { font-size: 12px; }
/*==================================================================
    TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ S-Text 0 - 15 ]*/
.f1-s-1 { font-family: Roboto-Regular; font-size: 14px; line-height: 1.7; }

.f1-s-2 { font-family: Roboto-Regular; font-size: 14px; line-height: 1.2; }

.f1-s-3 { font-family: Roboto-Regular; font-size: 12px; line-height: 1.7; }

.f1-s-4 { font-family: Roboto-Bold; font-size: 12px; line-height: 1.7; }

.f1-s-5 { font-family: 'Roboto-Regular' /*Roboto-Medium*/; font-size: 15px; line-height: 1.333333; text-align: justify; display: block; }

.f1-s-6 { font-family: Roboto-Medium; font-size: 12px; line-height: 1.7; }

.f1-s-7 { font-family: Roboto-Regular; font-size: 15px; line-height: 1.466667; text-align: justify; }
    .f1-s-7 span { font-size: 12px; font-style: italic; color: #888; }

.f1-s-8 { font-family: Roboto-Medium; font-size: 14px; line-height: 1.5; }

.f1-s-9 { font-family: Roboto-Black; font-size: 12px; line-height: 1.5; }

.f1-s-10 { font-family: Roboto-Bold; font-size: 13px; line-height: 1.3; }

.f1-s-11 { font-family: Roboto-Regular; font-size: 14px; line-height: 1.8; }

.f1-s-12 { font-family: Roboto-Regular; font-size: 15px; line-height: 1.8; }

.f1-s-13 { font-family: Roboto-Regular; font-size: 13px; line-height: 1.7; }

/*---------------------------------------------*/
.f2-s-1 { font-family: Lato-Regular; font-size: 14px; line-height: 1.7; }


/*//////////////////////////////////////////////////////////////////
[ M-Text 16 - 25 ]*/
.f1-m-1 { font-family: Roboto-Medium; font-size: 16px; line-height: 1.5; }

.f1-m-2 { font-family: Roboto-Regular; font-size: 18px; line-height: 1.333333; text-transform: uppercase; font-weight: 600; }

.f1-m-3 { font-family: Roboto-Medium; font-size: 20px; line-height: 1.25; text-align: justify; display: block; }

.f1-m-4 { font-family: Roboto-Bold; font-size: 16px; line-height: 1.5; }

.f1-m-5 { font-family: Roboto-Bold; font-size: 24px; line-height: 1.3; }

.f1-m-6 { font-family: Roboto-Regular; font-size: 18px; line-height: 1.333333; }

.f1-m-7 { font-family: Roboto-Bold; font-size: 20px; line-height: 1.3; }


/*//////////////////////////////////////////////////////////////////
[ L-Text >= 26 ]*/
.f1-l-1 { font-family: Roboto-Regular; font-size: 30px; line-height: 1.2; }

.f1-l-2 { font-family: Roboto-Medium; font-size: 22px; line-height: 1.272727; }

.f1-l-3 { font-family: Roboto-Regular; font-size: 30px; line-height: 1.3; }

.f1-l-4 { font-family: Roboto-Bold; font-size: 22px; line-height: 1.545454; }

.f1-l-5 { font-family: Roboto-Medium; font-size: 36px; line-height: 1.333333; }


/*==================================================================
    SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE SIZE 
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ Size ]*/
.size-a-1 { width: 45px; height: 100%; }

.size-a-2 { width: 220px; height: 45px; }

.size-a-3 { width: 100%; height: 440px; }

.size-a-4 { width: 100%; height: 244px; }

.size-a-5 { width: 100%; height: 194px; }

.size-a-56 { width: 100%; height: 105px; }

.size-a-6 { max-width: 100%; max-height: 72px; }

.size-a-7 { max-width: 100%; max-height: 54px; }

.size-a-8 { width: 30px; height: 30px; }

.size-a-9 { width: 100%; height: 60px; }

.size-a-10 { width: 55px; height: 100%; }


/*---------------------------------------------*/
.size-a-11 { width: 100%; height: 536px; }

@media (max-width: 1199px) {
    .size-a-11 { height: 400px; }
}

@media (max-width: 575px) {
    .size-a-11 { height: 350px; }
}

/*---------------------------------------------*/
.size-a-12 { width: 100%; height: 292px; }

.size-a-13 { width: 100%; height: 50px; }

.size-a-14 { width: 100%; height: 219px; }

.size-a-15 { width: 100%; min-height: 150px; }

.size-a-16 { width: 100%; max-width: 286px; height: 50px; }

.size-a-17 { max-width: 100%; min-width: 180px; height: 40px; }

/*---------------------------------------------*/
.size-a-18 { width: 100%; height: 680px; }

@media (max-width: 767px) {
    .size-a-18 { height: 480px; }
}

/*---------------------------------------------*/
.size-a-19 { width: 100%; height: 50px; }

.size-a-20 { max-width: 100%; min-width: 120px; height: 40px; }


/*//////////////////////////////////////////////////////////////////
[ Width ]*/
.size-w-0 { flex-grow: 1; }

.size-w-1 { width: 100px; }

.size-w-2 { width: calc(100% - 118px); }

.size-w-3 { width: calc(100% - 48px); }

.size-w-4 { width: 80px; }

.size-w-5 { width: calc(100% - 95px); }

.size-w-6 { width: calc(62% - 20px); }

.size-w-7 { width: calc(38% - 20px); }

.size-w-8 { width: 260px; }

.size-w-9 { width: calc(100% - 285px); }

.size-w-10 { width: 100px; }

.size-w-11 { width: calc(100% - 118px); }

/*//////////////////////////////////////////////////////////////////
[ Height ]*/
.size-h-1 { max-height: 45px; }

.size-h-2 { min-height: 40px; }

.size-h-3 { height: 95px; }

.size-h-3 { height: 95px; }

.size-h-4 { min-height: 80px; }


/*==================================================================
   BACKGROUND BACKGROUND BACKGROUND BACKGROUND BACKGROUND BACKGROUND 
==================================================================*/
.bg-none { background-color: transparent; }
.bg0 { background-color: #fff; }
.bg1 { background-color: #111; }
.bg2 {
    background-color: #426870 /*#222*/;
}
.bg3 { background-color: #333; }
.bg4 { background-color: #444; }
.bg5 { background-color: #555; }
.bg6 { background-color: #666; }
.bg7 { background-color: #777; }
.bg8 { background-color: #888; }
.bg9 { background-color: #999; }
.bg10 { background-color: #3563AB; }
.bg11 {
    background-color: #426870cc /*#151515*/;
}


/*---------------------------------------------*/
.bg-img1 { background-position: center center; background-repeat: no-repeat; background-size: cover; }

/*---------------------------------------------*/
.bg-img2 { background-position: top center; background-repeat: no-repeat; background-size: cover; }

/*---------------------------------------------*/
.bg-facebook { background-color: #3b5998; }
.bg-twitter { background-color: #1da1f2; }
.bg-youtube { background-color: #ff0000; }
.bg-google { background-color: #dd4b39; }
.bg-pinterest { background-color: #bd081c; }





/*==================================================================
 HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW HOW 
==================================================================*/

/*---------------------------------------------*/
.how-bor1 { border-bottom: 1px solid rgba(255,255,255,0.1); float: left; width: 50%; }

/*  .how-bor1:last-child { border: none; }*/

/*---------------------------------------------*/
.how-bor2 { border-bottom: 1px solid #f0f0f0; }

    .how-bor2:last-child { border: none; }

/*---------------------------------------------*/
.how-bor3 { border-bottom: 1px solid #e6e6e6; }

    .how-bor3:first-child { border-top: 1px solid #e6e6e6; }

/*---------------------------------------------*/
.how-txt1 { white-space: normal; display: box; display: -moz-box; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/*---------------------------------------------*/
.how-txt2 { white-space: normal; display: box; display: -moz-box; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/*---------------------------------------------*/
.how-txt3 { white-space: normal; overflow: hidden; }

/*---------------------------------------------*/
.how-overlay1 { position: relative; z-index: 1; }

    .how-overlay1::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; background: rgba(0,0,0,0.5); background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: -o-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }

/*---------------------------------------------*/
.how1 { position: relative; }

.how1-child1 { position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.5; background: rgba(0,0,0,0.5); background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: -o-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,0)); }

.how1:hover .how1-child1 { opacity: 0.3; }

.how1-child2 { z-index: 3; }

/*---------------------------------------------*/
.how2 {
    border-radius: 5px;
    height: 50px;
    border-bottom: 3px solid #00a3b5;
    padding: 0 15px;
    position: relative;
    background: linear-gradient(to right,#233647,#00b7cb) !important; /*background: rgb(53,99,171); background: linear-gradient(90deg, rgba(53,99,171,1) 0%, rgba(255,255,255,0.5970763305322129) 76%);*/ /* overflow: hidden;*/ /*background: rgb(250,165,69); background: linear-gradient(90deg, rgba(250,165,69,1) 0%, rgba(255,255,255,0.5970763305322129) 76%); */
}

/*.how2::before {*/ /*content: ""; display: block; position: absolute; width: 5px; height: calc(100% + 2px); top: -1px; left: -1px;*/ /*content: ""; display: block; position: absolute; width: 100%; height: calc(100% - 42px); bottom: -1px; left: -1px; }*/

.bg-right {
    background: linear-gradient(to right,#8d3f02,#e39e1d) !important;
    border-bottom: 3px solid #cf5800;
}

.how2-cl1::before { background-color: #e71d69; }

.how2-cl2::before { background-color: #15a752; }

.how2-cl3::before { background-color: #e3724a; }

.how2-cl4::before { background-color: #333; }

.how2-cl5::before { background-color: #00b5e9; }

.how2-cl6::before { background-color: #2489b0; }
.how2-cl9::before { /*background-color: #3563AB background: rgb(3,62,146); background: linear-gradient( 90deg, rgba(3,62,146,1) 0%, rgba(255,255,255,0.5970763305322129) 76%);*/ background: rgb(250,165,69); background: linear-gradient(90deg, rgba(250,165,69,1) 0%, rgba(255,255,255,0.5970763305322129) 76%); }



/*==================================================================
      PSEUDO PSEUDO PSEUDO PSEUDO PSEUDO PSEUDO PSEUDO PSEUDO PSEUDO
==================================================================*/
/*//////////////////////////////////////////////////////////////////
[ Hover ]*/

.hov-cl0:hover { color: #fff; }
.hov-bg0:hover { background-color: #fff; }

.hov-cl10:hover { color: #3563AB; }
.hov-bg10:hover { background-color: #3563AB; }
.how-bor1 .hov-cl10:hover { color: #FFF; }
/*---------------------------------------------*/
.hov-img0 { display: block; overflow: hidden; }

    .hov-img0 > img { width: 100%; -webkit-transition: transform 0.9s ease; -o-transition: transform 0.9s ease; -moz-transition: transform 0.9s ease; transition: transform 0.9s ease; }

    .hov-img0:hover > img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }

/*---------------------------------------------*/
.hov-link1:hover { color: #3563AB; text-decoration: underline; }

/*---------------------------------------------*/
.hov-btn1:hover { background-color: #3563AB; border-color: #3563AB; color: #fff; }

/*---------------------------------------------*/
.hov-btn2:hover { border-color: #3563AB; color: #3563AB; }


/*---------------------------------------------*/
.hov1:hover { opacity: 0.8; }



/*==================================================================
   OTHER OTHER OTHER OTHER OTHER OTHER OTHER OTHER OTHER OTHER OTHER 
==================================================================*/
/*------------------------------------------------------------------
[ Input ]*/
.focus-in0:focus::-webkit-input-placeholder { color: transparent; }
.focus-in0:focus:-moz-placeholder { color: transparent; }
.focus-in0:focus::-moz-placeholder { color: transparent; }
.focus-in0:focus:-ms-input-placeholder { color: transparent; }

.plh3::-webkit-input-placeholder { color: #333; }
.plh3:-moz-placeholder { color: #333; }
.plh3::-moz-placeholder { color: #333; }
.plh3:-ms-input-placeholder { color: #333; }

.plh6::-webkit-input-placeholder { color: #666; }
.plh6:-moz-placeholder { color: #666; }
.plh6::-moz-placeholder { color: #666; }
.plh6:-ms-input-placeholder { color: #666; }

.plh9::-webkit-input-placeholder { color: #999; }
.plh9:-moz-placeholder { color: #999; }
.plh9::-moz-placeholder { color: #999; }
.plh9:-ms-input-placeholder { color: #999; }

/*------------------------------------------------------------------
[ Parallax100 ]*/
.parallax100 { background-attachment: fixed; background-position: center 0; background-repeat: no-repeat; background-size: cover; }

@media (max-width: 991px) {
    .parallax100 { background-attachment: inherit; }
}

/*------------------------------------------------------------------
[ Wrap Picture ]*/
.wrap-pic-s, .wrap-pic-max-s,
.wrap-pic-w, .wrap-pic-max-w,
.wrap-pic-h, .wrap-pic-max-h { display: block; }

    .wrap-pic-w > img { width: 100%; }
    .wrap-pic-max-w > img { max-width: 100%; }

    .wrap-pic-h > img { height: 100%; }
    .wrap-pic-max-h > img { max-height: 100%; }

    .wrap-pic-s > img { width: 100%; height: 100%; }
    .wrap-pic-max-s > img { max-width: 100%; max-height: 100%; }




/*==================================================================
  RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE
==================================================================*/


@media (max-width: 1199px) {
}


@media (max-width: 991px) {
    .respon1 { font-size: 22px }
}

@media (min-width: 768px) {

    .logo-mobile img { max-height: 130% !important; }
}

@media (max-width: 767px) {
    .respon2 { font-size: 22px }
    .fix-mobiletop { margin-top: 67px; }
    .logo-mobile img { max-height: 130% !important; }
    .how-txt1 { white-space: normal; display: box; display: -moz-box; display: -webkit-box; -webkit-line-clamp: inherit; -webkit-box-orient: vertical; /* overflow: hidden; */ text-overflow: ellipsis; }
    .size-a-6, .size-a-7 { max-width: 100%; max-height: initial !important; font-size: 18px; font-weight: 600; }
}


@media (max-width: 575px) {
    .how-txt1 { white-space: normal; display: box; display: -moz-box; display: -webkit-box; -webkit-line-clamp: inherit; -webkit-box-orient: vertical; /* overflow: hidden; */ text-overflow: ellipsis; }
    .size-a-6, .size-a-7 { max-width: 100%; max-height: initial !important; font-size: 18px; font-weight: 600; }
    .size-a-3, .size-a-4 { width: 100%; height: 195px !important; }
    .logo-mobile img { max-height: 130% !important; }
    .fixhidesearch { display: none; }
    .fix-mobiletop { margin-top: 126px }
    .padding0 { padding: 0; }
    .flex-s-s .f1-s-13 { font-size: 9px; }
    .info-desc .f1 { width: 100% !important; margin-bottom: 10px !important; }
    .info-desc .f2 { float: left !important; padding-left: 0 !important; width: 100% !important; }

    .p-b-140, .p-tb-140, .p-all-140, .p-b-55, .p-tb-55, .p-all-55 { padding-bottom: 30px; }
    .p-b-40, .p-tb-40, .p-all-40 { padding-bottom: 20px; }
    .skdslider .slide-desc a { font-size: 16px; }
}


@media (max-width: 480px) {
    .how-txt1 { white-space: normal; display: box; display: -moz-box; display: -webkit-box; -webkit-line-clamp: inherit; -webkit-box-orient: vertical; /* overflow: hidden; */ text-overflow: ellipsis; }
    .size-a-6, .size-a-7 { max-width: 100%; max-height: initial !important; font-size: 18px; font-weight: 600; }
    .size-a-3, .size-a-4 { width: 100%; height: 195px !important; }

    .fixhidesearch { display: none; }
    .fix-mobiletop { margin-top: 0px }
    .padding0 { padding: 0; }
    .flex-s-s .f1-s-13 { font-size: 9px; }
    .info-desc .f1 { width: 100% !important; margin-bottom: 10px !important; }
    .info-desc .f2 { float: left !important; padding-left: 0 !important; width: 100% !important; }

    .p-b-140, .p-tb-140, .p-all-140, .p-b-55, .p-tb-55, .p-all-55 { padding-bottom: 30px; margin-top: 3em}
    .p-b-40, .p-tb-40, .p-all-40 { padding-bottom: 20px; }
    .skdslider .slide-desc a { font-size: 16px; }
    .hamburger{margin-top: -54px}
    .menu-mobile{
        top: 66px;
    }
}

.text-uppercase { font-weight: 600; font-family: Roboto !important; display: -webkit-inline-box; text-transform: none !important; }
.p-all-12, .p-b-12 a, .p-tb-12 a { font-weight: 700; font-size: 18px; text-align: justify; display: block; line-height: 25px !important; }
.f1-s-1 { text-align: justify; }
h2.f1-l-1 { border-bottom: 2px solid #DDD; }
h3.f1-l-3 { font-weight: 700; font-size: 20px; text-align: justify; display: block; line-height: 30px !important; }
.desc { font-weight: 600; text-align: justify; margin-bottom: 10px; font-size: 14px; line-height: 22px; }
.contentdetail { font-family: Roboto,Arial,Tahoma !important; font-size: 14px }
    .contentdetail * { /*text-align: justify; */ font-size: 14px; font-family: Roboto,Arial,Tahoma !important; }
    .contentdetail table { max-width: 100%; }
    .contentdetail img { max-width: 100%; height: auto !important; }
    .contentdetail .col-sm-6 { flex: auto; max-width: 100% !important; }
.others-news { }
    .others-news li { margin-bottom: 10px; list-style: disc; margin-left: 20px; }
        .others-news li a { color: #222; }
            .others-news li a:hover { color: #3563AB; }
        .others-news li span { font-style: italic; font-size: 14px; }
.header-other-news { border-top: 1px solid #DDD; }
.author { text-align: right; font-weight: bold; }
.right-contact { display: flex; margin-bottom: 20px; }
    .right-contact span { margin-right: 20px; font-size: 40px; }
.qc-home-center img { width: 100%; margin-bottom: 20px; }
.banner-right { }
    .banner-right img { width: 100%; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background: none !important; }
.linkweb { border: 1px solid #ccc; padding: 10px; width: 100%; }
/*shop*/
.shop-area { background-size: cover; }

.shop-thumb .thumb { width: 100% !important; background-image: none; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 150px; }

.shop-thumb { /*padding-top: 20px; padding-right: 30px;*/ }

    .shop-thumb img { width: 100%; }

.shop-book-name { font-size: 16px; color: #444444; margin: 0; }

.book-inner-content { padding: 15px; overflow: hidden; }

.book-writter { font-size: 13px; line-height: 1; margin: 0; margin-top: 9px; }

.book-ratings ul li { display: inline-block; font-size: 14px; color: #f6393e; margin-left: 4px; }

.book-ratings ul { margin-left: 30px; }

.book-price .price { font-size: 14px; color: #777777; font-weight: 600; }

.book-price .user-number { font-size: 15px; color: #f6393e; font-weight: 700; }

#amazingcarousel-1 img { width: 100%; border-radius: 5px; /*margin-block: 10px;*/ }

.list-albums h4 a { font-size: 18px; font-weight: 500; line-height: 1.4; text-align: justify; display: block; padding-top: 10px; text-align: justify; display: block }

.list-albums ul { padding-top: 10px; border-top: 1px solid #DDD; }

.list-albums li { list-style: revert; margin-left: 20px; margin-bottom: 10px; }

    .list-albums li a { text-align: justify; display: block; font-weight: 500 }
.fix-btn-comment { display: inline-flex; }
    .fix-btn-comment button { margin-right: 15px; }


.vbProperties table { background: #ccc; border-spacing: 0px; border-collapse: scollapse; width: 100%; font-family: Roboto,Arial,Tahoma; }
    .vbProperties table tr td { padding: 8px; background: #fff; text-align: justify; vertical-align: text-top; color: #333; font-size: 14px; }
    .vbProperties table tr.odd td { background: #F0F6FF; }
    .vbProperties table tr td.title { color: #333; font-weight: 500; }
    .vbProperties table tr td.label { background: #f6f6f6; color: #333; font-weight: 600 }
    .vbProperties table tr td p { margin: 0; }
    .vbProperties table tr td a { font-size: 14px; overflow-wrap: anywhere; }
    .vbProperties table tr td span { font-size: 14px; }
.ctvanban { padding-top: 20px; }
    .ctvanban h5 { text-align: center; font-weight: 600 }

.lis-catevb ul.p-t-20 { border: 1px solid #DDD; padding: 10px 20px; border-top: none; }
    .lis-catevb ul.p-t-20 li { border-bottom: 1px dashed #DDD; padding: 8px 0; }
        .lis-catevb ul.p-t-20 li:last-child { border: none; }
        .lis-catevb ul.p-t-20 li a { display: block; width: 100%; }
            .lis-catevb ul.p-t-20 li a i { margin-right: 10px; }
.flex-s-s { /* float: left;*/ display: inline-flex; width: 100%; /*margin-bottom: 30px;*/ margin-top: 20px; }
.sub-menu .fa-caret-right { text-align: right; float: right; margin-top: 4px; }

/*===văn ban======*/
.lts-vanban-home { /*margin-bottom: 20px;*/ }
    .lts-vanban-home .title { border: 1px solid #ddd; min-height: 14px; padding: 7px 10px; background: #f7f7fd; }
        .lts-vanban-home .title a { padding-left: 5px; color: #333; font-size: 16px; font-weight: 700 }
        .lts-vanban-home .title span { margin: 0; }
.info-desc { overflow: auto; padding: 10px 0; }
    .info-desc .f1 { width: 70%; float: left; border-right: 1px dotted #ddd; padding-right: 1.8%; font-size: 14px }
    .info-desc .f2 { width: 30%; float: right; padding-left: 2%; }
        .info-desc .f2 span { font-size: 14px; margin: 0; }
        .info-desc .f2 p { margin-bottom: 10px; font-size: 14px; line-height: normal; }
.f1 ul { margin: 10px 0 5px 0; }
    .f1 ul li { display: initial; margin-right: 20px; }
        .f1 ul li a { color: #BE1E2D; }
.f2 p span:first-child { width: 52%; float: left; }
/*=====album=========*/
.listalbum .course-1-item .course-1-content { min-height: 125px }
.listalbum .course-1-item { margin-bottom: 30px; }

.shop-area { background-size: cover; }
.shop-thumb .thumb { width: 100% !important; background-image: none; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 185px; }
.shop-thumb { /*padding-top: 20px;*/ }
.shop-book-name { font-family: Roboto,Arial,Tahoma; font-size: 16px; line-height: 1.25; text-align: justify; display: block; font-weight: 600 !important; }
    .shop-book-name a { color: #333; }
.book-inner-content { padding: 10px; }
.book-writter { font-size: 13px; line-height: 1; margin: 0; margin-top: 9px; }
.book-ratings ul li { display: inline-block; font-size: 14px; color: #f6393e; margin-left: 4px; }
.book-ratings ul { margin-left: 30px; }
.book-price .price { font-size: 14px; color: #777777; font-weight: 600; }
.book-price .user-number { font-size: 15px; color: #f6393e; font-weight: 700; }
.header-other-news span strong { display: block; text-transform: uppercase; }
.align-items-end img { width: 100%; }
.listalbumdetail { margin-bottom: 30px; }
.title-albums { font-family: Roboto,Arial,Tahoma; font-size: 20px; font-weight: 600; padding-bottom: 10px; }



.panel-group .panel { border-radius: 5px; border-color: #EEEEEE; padding: 0; margin-bottom: 10px; }

.panel-default > .panel-heading { color: #333; background-color: #f6f6f6; border: 1px solid #DDD; }

.panel-title { font-size: 16px; margin: 0; }

    .panel-title > a { display: block; padding: 15px; text-decoration: none; color: #333; font-weight: 700; }

.short-full { float: right; color: #808080; }

.panel-default > .panel-heading + .panel-collapse > .panel-body { border: 1px solid #DDD; padding: 20px; }

.fix-cctc { padding: 0 !important; }

    .fix-cctc .event-thum { width: 30%; }

        .fix-cctc .event-thum img { width: 100%; }

.singel-event-list { background-color: #fff; padding: 30px; border-radius: 5px; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }

    .singel-event-list .event-thum { width: 38%; }

        .singel-event-list .event-thum img { width: 100%; border-radius: 5px; }

    .singel-event-list .event-cont { width: 62%; padding-left: 30px; }

        .singel-event-list .event-cont h4 { font-size: 18px; font-weight: 700; }

        .singel-event-list .event-cont span { font-size: 14px; color: #8a8a8a; margin-right: 20px; }

            .singel-event-list .event-cont span i { color: #ffc600; margin-right: 3px; }

        .singel-event-list .event-cont a { display: block; }

            .singel-event-list .event-cont a h4 { padding-top: 5px; padding-bottom: 10px; color: #000; font-size: 20px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; }

            .singel-event-list .event-cont a:hover h4 { color: #ffc600; }

        .singel-event-list .event-cont p { text-align: justify; margin-bottom: 5px; }

@media (max-width: 425px) {
    .size-a-2{
        margin: 2em 0;
    }

    .skdslider{
        margin-bottom: 1em;
    }
}

@media (max-width: 544px) {
    .wrap-header-mobile { display: block !important; }
    .wrap-main-nav { display: none !important; }
    .wrap-header-mobile { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; padding: 10px 25px; display: none; box-shadow: 0 3px 8px 0px rgb(0 0 0 / 5%); -moz-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -webkit-box-shadow: 0 3px 8px 0px rgb(0 0 0 / 5%); -o-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); -ms-box-shadow: 0 3px 8px 0px rgba(0,0,0,0.05); position: absolute; z-index: 100; width: 100%; }
    .topbar-mobile { display: none; }
    .wrap-logo { padding: 0 !important; }
    .tab01-title { padding-right: 0 !important; }
    .fix-hot-mobile { overflow: hidden; padding: 0; }
    .main-menu { display: flow-root; }
    .info-desc .f1 { width: 60%; }
    .info-desc .f2 { width: 40%; }
}

@media (min-width: 544px) and (max-width: 768px) {
    .wrap-logo { padding: 0 !important; }
    .col-lg-8 { -ms-flex: 0 0 66.666667% !important; flex: 0 0 66.666667% !important; max-width: 66.666667% !important; }
    .col-lg-4 { -ms-flex: 0 0 33.333333% !important; flex: 0 0 33.333333% !important; max-width: 33.333333% !important; }
    .col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
    .fix-top1 .wrap-pic-w { width: 40%; float: left; margin-right: 20px; }
    .tab01-title { padding-right: 0 !important; }
    .fix-hot-mobile { overflow: hidden; padding: 0; }
    .main-menu { display: flow-root; }
    .info-desc .f1 { width: 60%; }
    .info-desc .f2 { width: 40%; }
}

.contentdetail video{
	Width: 100%;
}