File: /home/fect/web/fect.ictu.edu.vn/public_html/wp-content/themes/ictu/assets/css/header.css
.header.style-01 {
position: relative;
z-index: 99;
background-color: #ffffff;
}
.header-top__inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.header-contact-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
.header-contact-list__elm + .header-contact-list__elm {
margin-left: 15px;
}
.header-contact-list__link {
font-size: 0;
display: flex;
width: 25px;
height: 25px;
justify-content: center;
align-items: center;
line-height: 0;
position: relative;
border-radius: 50%;
overflow: hidden;
}
.header-contact-list__link--icon {
background-color: var(--main-color);
}
.header-contact-list__link i {
font-size: 15px;
line-height: 1;
color: #ffffff;
}
.header-contact-list__link img {
display: inline-block;
width: 100%;
height: auto;
object-fit: cover;
}
/*
header-top__logo*/
.header-top__logo {
display: flex;
align-items: center;
}
.header-top__logo > a {
font-size: 0;
line-height: 0;
display: inline-block;
}
.header-top__logo > a img {
width: 58px;
height: auto;
object-fit: contain;
}
.header-top__logo h2 {
display: inline-block;
white-space: pre;
margin: 0;
padding: 0 0 0 27px;
font-size: 17px;
text-transform: uppercase;
font-weight: 600;
color: var(--main-color);
}
.header-top__logo h2 span {
font-weight: 400;
}
/*.header-top__logo h2 br {*/
/* display: none;*/
/*}*/
/*
header-middle*/
.header-middle {
background-color: var(--main-color);
-webkit-transition: box-shadow 300ms cubic-bezier(.7, 1, .7, 1);
-moz-transition: box-shadow 300ms cubic-bezier(.7, 1, .7, 1);
-ms-transition: box-shadow 300ms cubic-bezier(.7, 1, .7, 1);
-o-transition: box-shadow 300ms cubic-bezier(.7, 1, .7, 1);
transition: box-shadow 300ms cubic-bezier(.7, 1, .7, 1);
}
.header-middle__inner {
display: flex;
align-items: center;
}
.header-middle__block-mobile-menu > .menu-toggle,
.header-middle__block-mobile-menu {
display: none;
}
.header-middle__block-primary-menu {
/* padding-left: 60px;*/
display: flex;
align-items: center;
-webkit-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-moz-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-ms-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-o-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
}
.sticky-logo {
font-size: 0;
line-height: 0;
display: inline-block;
-webkit-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-moz-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-ms-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-o-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
visibility: hidden;
opacity: 0;
overflow: hidden;
width: 0;
}
.sticky-logo figure {
display: inline-block;
width: 36px;
height: 36px;
}
.sticky-logo figure img {
width: 100%;
height: auto;
object-fit: contain;
max-width: 100%;
}
.header-primary-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.header-primary-menu > li > a {
color: #ffffff;
display: inline-block;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
padding: 12px 25px 11px;
-webkit-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-moz-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-ms-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
-o-transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
transition: padding-left 300ms cubic-bezier(.7, 1, .7, 1);
}
.header-primary-menu > li:hover > a {
color: var(--main-color-hover);
}
.header-primary-menu li > .desc {
display: none;
}
.menu-item-has-children {
position: relative;
}
.header-primary-menu .sub-menu {
list-style: none;
margin: 0 0 0 10px;
position: absolute;
top: 0;
left: 100%;
width: 260px;
background-color: #006cb5;
padding: 0px;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .35s ease-out;
-moz-transition: all .35s ease-out;
-ms-transition: all .35s ease-out;
-o-transition: all .35s ease-out;
transition: all .35s ease-out;
}
.header-primary-menu .sub-menu li {
display: flex;
width: 100%;
/*padding: 10px 0;*/
border-bottom: 1px solid #e3e3e3;
color: #ffffff;
line-height: 1.3;
padding: 0 10px;
}
.header-primary-menu .sub-menu li:hover {
color: #006cb5 !important;
background: #ffffffdb;
}
.header-primary-menu .sub-menu li:last-child {
border-bottom: none;
}
.header-primary-menu .sub-menu li a {
color: inherit;
flex: 1 1;
line-height: 40px;
}
.header-primary-menu .sub-menu .menu-item-has-children::after {
content: "\f105";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: inherit;
width: 5px;
align-self: flex-start;
line-height: 38px;
}
.header-primary-menu > li > .sub-menu {
left: 25px;
top: 100%;
margin: 0;
border-top: 2px solid #ffc107;
}
.menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
box-shadow: 1px 3px 9px 2px rgb(0 0 0 / 20%);
}
ul.sub-menu ul.sub-menu {
left: 250px;
border-top: 2px solid #ffc107;
top: -1px;
}
.header-middle__block-search {
margin-left: auto;
background-color: transparent;
line-height: 0;
position: relative;
}
.header-search__lbl {
width: 400px;
display: flex;
align-items: center;
background-color: transparent;
font-weight: 400;
margin: 0;
padding: 0;
}
.header-search__lbl .header-search__input {
background-color: transparent;
color: #fff;
font-weight: 400;
font-size: 14px;
padding: 6px 15px 4px;
height: auto;
flex: 1 1;
border-top-left-radius: 999px !important;
letter-spacing: .3px;
border-bottom-left-radius: 999px !important;
border: 1px solid #ffffff;
outline: none;
box-shadow: none;
}
.header-search__lbl .header-search__input:focus {
border: 1px solid #ffffff;
outline: none;
box-shadow: none;
}
.header-search__button {
width: 42px;
height: 36px;
background-color: #ffffff;
align-items: center;
display: flex;
justify-content: center;
border-radius: 0 999px 999px 0;
}
.header-search__button svg {
width: 19px;
height: 19px;
fill: var(--main-color);
}
.--header-sticky .header-middle {
top: 0;
left: 0;
right: 0;
position: fixed;
z-index: 90;
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.--header-sticky.admin-bar .header-middle {
top: 32px;
}
.--header-sticky .header-top {
margin-bottom: 47px;
}
.--header-sticky .header-primary-menu > li > a {
padding-left: 15px;
padding-right: 15px;
}
.--header-sticky .header-middle__block-primary-menu {
padding-left: 0;
}
.--header-sticky .sticky-logo {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
visibility: visible;
opacity: 1;
width: 36px;
height: 36px;
}
/********************************************************
* page banner
*********************************************************/
.page-banner {
display: block;
position: relative;
}
.page-banner .page-banner__head-text {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
text-align: center;
width: 100%;
color: #ffffff;
}
.page-banner .page-banner__media {
font-size: 0;
line-height: 0;
display: block;
width: 100%;
}
.page-banner .page-banner__media img {
max-width: 100%;
width: 100%;
height: auto;
object-fit: cover;
max-height: 400px;
}
.page-banner .theme-title {
line-height: 1.2;
margin-bottom: 8px;
}
.page-banner .theme-title,
.page-banner .theme-title span {
font-size: 40px;
text-transform: uppercase;
font-weight: 700;
text-shadow: 0px 0px 9px #000000c7;
}
.page-banner .theme-title__archive > span {
font-size: 0;
}
.page-banner .breadcrumb-trail {
display: none;
}
.page-banner .breadcrumb-trail .breadcrumb .name,
.page-banner .breadcrumb-trail .breadcrumb a:not(:hover) {
font-size: 16px;
color: #ffffff;
}
.page-banner .breadcrumb > li {
padding: 0;
}
.page-banner .breadcrumb > li + li:before {
content: "\f105";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #ffffff;
vertical-align: middle;
padding: 0 20px;
}
.open-mobile-search {
display: inline-block;
font-size: 0;
line-height: 0;
}
.open-mobile-search svg {
width: 24px;
height: 24px;
fill: #ffffff;
}
.header-middle__block-search .open-mobile-search .icon-close {
display: none;
width: 17px;
height: 17px;
}
.header-middle__block-primary-menu .header-primary-menu > .menu-item-home.menu-item-icon-font {
-webkit-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-moz-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-ms-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
-o-transition: all 300ms cubic-bezier(.7, 1, .7, 1);
transition: all 300ms cubic-bezier(.7, 1, .7, 1);
}
.--header-sticky .header-middle__block-primary-menu .header-primary-menu > .menu-item-home.menu-item-icon-font {
font-size: 0;
line-height: 0;
display: inline-block;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
visibility: hidden;
opacity: 0;
overflow: hidden;
width: 0;
}
.header-middle__block-primary-menu .menu-item-icon-font {
display: flex;
align-items: center;
}
.header-middle__block-primary-menu .menu-item-icon-font > a {
font-size: 0;
line-height: 0;
padding-right: 0;
}
.header-middle__block-primary-menu .menu-item-icon-font > a > .icon-font {
font-size: 20px;
line-height: 24px;
margin: 0 !important;
}
.header-top__logo h2 br {
display: none;
}
@media ( min-width: 1200px) {
.header-middle__block-search .header-search {
-webkit-transform: scalex(0);
-moz-transform: scalex(0);
-ms-transform: scalex(0);
-o-transform: scalex(0);
transform: scalex(0);
-webkit-transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
-moz-transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
-ms-transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
-o-transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
transition: transform .35s ease, opacity .35s ease, visibility .35s ease;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 100%;
z-index: 90;
}
.--search-header-opened .header-middle__block-search .header-search {
-webkit-transform: scalex(1);
-moz-transform: scalex(1);
-ms-transform: scalex(1);
-o-transform: scalex(1);
transform: scalex(1);
visibility: visible;
opacity: 1;
}
.header-middle__block-search .open-mobile-search {
margin-left: 5px;
display: flex;
width: 36px;
height: 36px;
justify-content: center;
align-items: center;
}
.--search-header-opened .header-middle__block-search .open-mobile-search .icon-search {
display: none;
}
.--search-header-opened .header-middle__block-search .open-mobile-search .icon-close {
display: inline-block;
}
.header-middle__block-search .header-search__lbl .header-search__input {
background-color: var(--main-color);
}
}
@media ( max-width: 1199px) {
body.header-sticky--mobile {
padding-top: 60px;
}
body.header-sticky--mobile #header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
-webkit-box-shadow: 0 1px 2px rgb(98 98 98 / 21%);
box-shadow: 0 1px 2px rgb(98 98 98 / 21%);
}
body.--header-sticky .header-top {
margin-bottom: 0;
}
.header .header-middle {
display: none;
}
.header-top__logo {
width: 100%;
}
.header-top__logo > a {
width: 40px;
}
.header-middle__block-mobile-menu > .menu-toggle {
display: none;
}
.header-top__logo h2 {
flex: 1 1;
font-size: 14px;
font-weight: 500;
padding: 2px 0 0 10px;
line-height: 1.3;
}
.page-banner .theme-title,
.page-banner .theme-title span {
font-size: 50px;
line-height: 1;
}
.page-banner .theme-title__archive > span {
font-size: 0;
}
.header-middle__block-search {
display: none;
}
.header-middle__block-mobile-menu {
display: inline-block;
font-size: 0;
line-height: 0;
margin-left: auto;
}
}
@media (max-width: 991px) {
.header-top__logo h2 {
padding: 0 0 0 10px;
}
.header-contact-list__link {
width: 24px;
height: 24px;
}
/*.header-contact-list__elm + .header-contact-list__elm {*/
/* margin-left: 7px;*/
/*}*/
.header-primary-menu > li > a {
padding-left: 10px;
padding-right: 10px;
}
}
@media (max-width: 767px) {
.header-top__logo h2 br {
display: inline-block;
}
.header-top__logo h2 span {
display: none;
}
.header-top__logo h2 {
white-space: initial;
word-break: break-word;
font-weight: 700;
}
.page-banner .theme-title,
.page-banner .theme-title span {
font-size: 22px;
}
.page-banner .theme-title__archive > span {
font-size: 0;
}
.page-banner__head-text .breadcrumb li:last-child {
display: none;
}
.header-search__lbl {
width: 100%;
}
}
.ovic-menu-clone-wrap .header-contact-list {
display: none !important;
}
@media (max-width: 550px) {
.header-top__inner {
flex-wrap: wrap;
}
.header-top__inner .header-top__right-contact {
display: none;
}
.ovic-menu-clone-wrap .header-contact-list {
display: flex !important;
}
.page-banner .breadcrumb-trail .breadcrumb .name,
.page-banner .breadcrumb-trail .breadcrumb a {
font-size: 14px;
}
}
@media (max-width: 355px) {
.header-top > .container {
padding-left: 5px;
padding-right: 5px;
}
.header-top__logo h2 {
font-size: 13px;
padding: 2px 0 0 5px;
}
}