html,body{height:100%}
@font-face{
font-family:"SVN-Gilroy";
src:url("../assets/fonts/SVN-Gilroy-Light.otf") format("opentype");
font-display:swap;
font-weight:300;
}
@font-face{
font-family:"SVN-Gilroy";
src:url("../assets/fonts/SVN-Gilroy-Bold.otf") format("opentype");
font-display:swap;
font-weight:700;
}
body{font-family:"SVN-Gilroy",sans-serif !important}
button,input,select,textarea,optgroup{font-family:inherit}
h1,h2,h3,h4,h5,h6,.footer-title{font-family:"SVN-Gilroy",sans-serif !important}
#wrapper{min-height:100%;position:relative}
#content{padding-bottom:0}
/* Header hero banner with pattern background (similar to footer) */
.t06-header-hero{
background-color:#b21726;
background-size:cover;
background-position:center top;
background-repeat:no-repeat;
padding:20px 0 16px;
position:relative;
}
.t06-header-hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(22, 78, 184, 0.5);
z-index:0;
}
.t06-header-hero .container{
position:relative;
z-index:1;
}
.t06-header-brand{display:flex;flex-direction:column;align-items:center;}
.t06-header-brand-logos{display:flex;justify-content:center;align-items:flex-start;gap:48px;flex-wrap:wrap;margin-bottom:8px;}
.t06-header-brand-item{display:flex;flex-direction:column;align-items:center;}
.t06-header-brand-title{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;}
.t06-header-title-sep{color:#fff;font-size:25px;font-weight:700;letter-spacing:1px;text-shadow:2px 2px 4px rgba(0,0,0,0.4);}
.t06-header-quochuy{
height:100px;
width:auto;
display:inline-block;
}
.t06-header-title{
color:#fff;
font-size:25px;
margin:10px 0 4px;
text-shadow:2px 2px 4px rgba(0,0,0,0.4);
font-family: 'Be Vietnam Pro', sans-serif;
/* font-family: 'Playfair Display', serif; */
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.t06-header-subtitle{
color:#fff;
font-size:14px;
font-weight:600;
margin:0;
text-shadow:1px 1px 2px rgba(0,0,0,0.3);
}
.t06-blog-gallery{margin:12px 0 16px;}
.t06-blog-main{border-radius:6px;overflow:hidden;background:#f5f5f5;}
.t06-blog-main img{width:100%;max-height:720px;object-fit:cover;}
.t06-blog-thumbs{max-height:720px;overflow:auto;padding-left:6px;}
.t06-blog-thumb-btn{display:block;width:100%;border:0;background:transparent;padding:0;margin:0 0 8px;text-align:left;}
.t06-blog-thumb{width:100%;border-radius:6px;opacity:.85;transition:opacity .15s ease,border-color .15s ease;}
.t06-blog-thumb.is-active{opacity:1;outline:2px solid #d9534f;outline-offset:2px;}
.t06-wm-wrap{position:relative;display:block;}
.t06-wm{
position:absolute;
top:10px;
right:10px;
z-index:2;
max-width:calc(100% - 20px);
background:rgba(0,0,0,.58);
color:#fff;
padding:8px 10px;
border-radius:8px;
line-height:1.25;
font-size:13px;
box-shadow:0 6px 16px rgba(0,0,0,.2);
text-align:left;
word-break:break-word;
}
.t06-wm strong{color:#fff;font-weight:700;font-size:18px;}
.t06-wm .t06-wm-addr{opacity:.95; font-size:16px;}
@media (max-width: 480px){
.t06-wm{top:8px;right:8px;font-size:12px;padding:7px 8px;}
.t06-wm .t06-wm-phone{font-size:13px;}
}
@media (max-width: 991px){
.t06-blog-thumbs{max-height:none;overflow:visible;padding-left:0;margin-top:10px;}
.t06-blog-thumb-btn{display:inline-block;width:88px;margin-right:8px;}
.t06-blog-thumb{width:88px;height:66px;object-fit:cover;}
}
@media (max-width: 767px){
.t06-header-quochuy{height:50px;}
.t06-header-title{font-size:22px;}
.t06-header-subtitle{font-size:12px;}
.t06-header-brand-logos{gap:18px;}
.t06-header-title-sep{font-size:22px;}
}
#languages-bar{background:#fff;filter:none;padding:4px 0;border-bottom:1px solid #eee;}
#languages-bar .container{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
}
/* Bootstrap clearfix pseudo-elements must be disabled for flex containers */
#languages-bar .container:before,
#languages-bar .container:after{content:none !important;display:none !important;}
/* Avoid float-based wrapping in topbar */
#languages-bar .container > *{float:none !important;}
/* Flags, metrics, marquee sizing */
#languages-bar .t06-topbar-flags{flex:0 0 auto;}
#languages-bar .t06-topbar-metrics{flex:0 0 auto;}
#languages-bar .t06-topbar-marquee{flex:1 1 auto;min-width:0;overflow:hidden;}
#languages-bar .t06-topbar-marquee marquee{display:block;white-space:nowrap;}
#languages-bar .t06-topbar-marquee a{display:inline-block;white-space:nowrap;}
.t06-marquee-star{color:#fed128;margin-right:6px;}
#languages-bar .phone{color:#333;font-weight:600}
#languages-bar .phone span{margin-right:5px}
#languages-bar ul{margin:0;margin-left:-10px;padding:0}
/* Home Hero (Featured + 5 latest)
Expand into the container padding without affecting Bootstrap columns */
.t06-home-hero{margin:18px -15px 10px;}
.t06-home-hero > .row{margin-left:0;margin-right:0;}
.t06-home-hero-feature{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;}
.t06-home-hero-carousel .carousel-indicators{display:none;}
.t06-home-hero-carousel .carousel-control{display:none;}
.t06-home-hero-feature-img{display:block;width:100%;max-height:500px;overflow:hidden;}
.t06-home-hero-feature-img img{width:100%;height:500px;max-height:500px;object-fit:cover;object-position:center;display:block;}
.t06-home-hero-feature-title{display:block;padding:14px 16px;color:#072035;text-decoration:none;font-size:18px;line-height:1.25;font-weight:700;font-family:"Roboto",-apple-system, blinkmacsystemfont, "Segoe UI", oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;text-align: justify;}
.t06-home-hero-feature-meta{padding:0 16px 14px;color:#777;font-size:12pt;display:flex;align-items:center;gap:6px;}
.t06-home-hero-feature-meta i{color:#999;}
.t06-home-hero-side{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;overflow-y:auto;}
.t06-home-hero-side{scrollbar-width:none;}
.t06-home-hero-side::-webkit-scrollbar{width:0;height:0;}
.t06-home-hero-side:hover{scrollbar-width:thin;}
.t06-home-hero-side:hover::-webkit-scrollbar{width:8px;}
.t06-home-hero-side:hover::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:10px;}
.t06-home-hero-side:hover::-webkit-scrollbar-track{background:transparent;}
.t06-home-hero-side-item{display:flex;gap:12px;align-items:flex-start;padding:12px 12px;text-decoration:none;color:#181818;}
.t06-home-hero-side-item + .t06-home-hero-side-item{border-top:1px solid #eee;}
.t06-home-hero-side-thumb{flex:0 0 84px;}
.t06-home-hero-side-thumb img{width:150px;height:100px;object-fit:cover;border-radius:8px;display:block;}
.t06-home-hero-side-title{display:block;font-size:12pt;line-height:1.25;font-weight:600; text-align: justify;color:#072035;}
.t06-home-hero-side-meta{display:block;margin-top:4px;color:#777;font-size:11pt;}
.t06-home-hero-side-meta i{color:#999;margin-right:6px;}
.t06-home-hero-side-item {
display: flex;
gap: 10px;
text-align: justify;
}
.mt-12 {
margin-top: 12px !important;
}
.t06-home-hero-side-content {
display: flex;
flex-direction: column;
}
@media (max-width: 991px){
.t06-home-hero-feature-title{font-size:18px;}
.t06-home-hero-side{margin-top:12px;}
}
@media (min-width: 992px){
.t06-home-hero-side{max-height:520px;}
}
@media (max-width: 767px){
.t06-home-hero-side{max-height:none;}
}
/* Links row (carousel + website dropdown) */
.t06-links-row{margin-top:10px;}
.t06-links-bleed{margin-left:-15px;margin-right:-15px;}
.t06-links-bleed > .t06-links-row{margin-left:0;margin-right:0;}
.t06-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #eee;}
.t06-links-row .t06-section-head{padding-bottom:10px;}
.t06-links-row .news-carousel{margin-top:6px;}
.t06-links-controls{display:flex;align-items:center;gap:10px;}
.t06-links-btn{width:28px;height:28px;border-radius:50%;border:0;background:#e6e6e6;color:#888;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;}
.t06-links-btn:hover{background:#dcdcdc;color:#666;}
.t06-links-btn:focus{outline:none;}
.t06-links-row .section-title{margin-top:0;}
.t06-website-links{background:#eee;border-radius:10px;padding:16px;min-height:120px;}
.t06-website-links-title{text-align:center;font-weight:800;letter-spacing:.5px;font-size:18px;color:#333;margin-bottom:10px;}
.t06-website-links-underline{height:3px;background:#d83c3c;width:70%;margin:0 auto 14px;}
.t06-website-links .bootstrap-select{width:100% !important;}
.t06-online-count{text-align:center;margin-top:12px;color:#058a38;font-weight:700;}
/* Home news thumbnails: same height, center-cropped */
.home-news-thumb img{width:100%;height:440px;object-fit:cover;object-position:center;display:block;}
/* Home news typography */
.home-news-thumb h4{font-size:12pt !important;text-align: justify;color:#072035 !important; text-transform: uppercase;}
.home-news-thumb p{font-size:11pt !important;text-align: justify;}
.home-news-thumb .t06-home-post-meta{display:flex;align-items:center;gap:6px;margin:0 0 6px;color:#777;font-size:9pt;}
.home-news-thumb .t06-home-post-meta i{color:#999;}
@media (max-width: 991px){
.t06-website-links{margin-top:12px;}
}
/* Home Multimedia */
.t06-multimedia{margin-top:10px;}
.t06-mm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-top:12px;border-bottom:1px solid #eee;}
.t06-mm-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px;}
.t06-mm-brand i{color:#d83c3c;font-size:22px;}
.t06-mm-brand span{color:#d83c3c;font-size:18px;}
.t06-mm-tabs{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.t06-mm-tab{display:inline-flex;align-items:center;gap:6px;color:#333;text-decoration:none;padding:6px 0;border-bottom:3px solid transparent;font-weight:700;font-size:14pt;}
.t06-mm-tab i{color:#777;}
.t06-mm-tab.is-active{color:#d83c3c;border-bottom-color:#d83c3c;}
.t06-mm-tab.is-active i{color:#d83c3c;}
.t06-multimedia-body{margin-top:12px;}
.t06-multimedia .t06-mm-pane{display:none;}
.t06-multimedia .t06-mm-pane.is-active{display:block !important;}
.t06-mm-feature{display:block;text-decoration:none;}
.t06-mm-feature-img{position:relative;width:100%;padding-top:56.25%;background-size:cover;background-position:center;border-radius:8px;overflow:hidden;}
.t06-mm-feature-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);}
.t06-mm-feature-overlay i{font-size:42px;color:#fff;}
.t06-mm-feature-text{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:rgba(0,0,0,.45);}
.t06-mm-title{color:#fff;font-size:13pt;font-weight:700;line-height:1.25;}
.t06-mm-time{color:#f1f1f1;font-size:9pt;margin-top:4px;}
.t06-mm-photo-frame{position:relative;width:100%;padding-top:56.25%;border-radius:8px;overflow:hidden;cursor:pointer;}
.t06-mm-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.t06-mm-photo-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2;}
.t06-mm-photo-prev{left:10px;}
.t06-mm-photo-next{right:10px;}
.t06-mm-photo-nav:hover,.t06-mm-photo-nav:focus{background:rgba(0,0,0,.65);outline:0;}
.t06-mm-doc-icon{margin-right:6px;}
.t06-mm-doc-pagination-wrap{margin-top:10px;}
.t06-mm-doc-pagination-wrap .t06-mm-doc-pagination{display:flex;justify-content:center;}
.t06-mm-doc-pagination-wrap .pagination{margin:0;}
.t06-mm-doc-pagination-wrap .pagination > li > a,
.t06-mm-doc-pagination-wrap .pagination > li > span{padding:6px 10px;}
.t06-mm-list{display:flex;flex-direction:column;gap:10px;}
.t06-mm-item{display:flex;gap:10px;align-items:center;text-decoration:none;}
.t06-mm-item-thumb{flex:0 0 120px;height:68px;background-size:cover;background-position:center;border-radius:6px;}
.t06-mm-item-title{display:block;color:#181818;font-weight:600;line-height:1.25;font-size:12pt; text-align: justify;}
.t06-mm-item-title .fa{margin-right:6px;}
.t06-mm-item-time{display:block;color:#666;font-size:9pt;margin-top:4px;}
@media (max-width: 991px){
.t06-mm-item-thumb{flex-basis:110px;}
}
@media (max-width: 767px){
.t06-mm-bar{align-items:flex-start;}
.t06-mm-tabs{gap:12px;}
}
[data-mm-photos] img {
max-height: 100%;
height: auto;
}
/* Khung video */
[data-mm-video-frame] {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
/* iframe gây ra đường trắng */
[data-mm-video-frame] iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block; /* QUAN TRỌNG – xoá dòng trắng */
}
/* Nút play */
[data-mm-video-play] {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.11);
border: 0;
cursor: pointer;
}
#languages-bar ul li{border-right:1px solid #eee;display:inline;margin-left:10px;padding-right:10px;text-transform:capitalize}
#languages-bar ul li a{color:#333;font-size:14px}
#languages-bar ul li img{height:11px;margin-right:2px;width:16px}
#languages-bar ul li.last-item{border-right:none}
/* Ensure dark text in the (now white) topbar */
#languages-bar,
#languages-bar .t06-topbar-metrics,
#languages-bar .t06-topbar-marquee,
#languages-bar marquee,
#languages-bar a{color:#333;}
#languages-bar a:hover{text-decoration:underline;}
#top-part{padding:5px 0px 25px 0px; background-color: #a0edff33;}
#top-part #adv-search .dropdown.dropdown-lg .dropdown-menu{margin-top:-1px;padding:14px 20px;width:515px;background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%);background:-webkit-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%);background:linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0)}
#top-part #adv-search .input-group-btn .btn-group{display:flex!important}
#top-part #adv-search .btn-group .btn{border-radius:0}
#top-part #adv-search .btn-group .form-horizontal .btn[type="submit"]{border-bottom-left-radius:4px;border-top-left-radius:4px}
#top-part #adv-search .form-horizontal .form-group{margin-left:0;margin-right:0}
#top-part #adv-search .form-group .form-control:last-child{border-bottom-left-radius:4px;border-top-left-radius:4px}
#top-part ul.shop-dropdown{list-style:none;margin:0;padding:0}
#top-part .site-logo{max-height:65px;max-width:100%}
#top-part ul.dropdown-cart{height:auto;max-height:250px;overflow-x:hidden;width:265px}
#top-part ul.shop-dropdown a.dropdown-toggle{color:#333;font-size:14px}
#top-part ul.shop-dropdown a.dropdown-toggle:hover{text-decoration:none}
#top-part ul.dropdown-cart li .item{display:block;margin:3px 0;padding:3px 10px}
#top-part ul.dropdown-cart li .item:hover{background-color:#f3f3f3}
#top-part ul.dropdown-cart li .item:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
#top-part ul.dropdown-cart li .item-in{float:left}
#top-part ul.dropdown-cart li .item-in img{height:50px;width:50px}
#top-part ul.dropdown-cart li .item-in a.item-info span{display:block;font-size:13px}
#top-part ul.dropdown-cart .go-checkout{display:inline-block;margin-bottom:7px;background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%);background:-webkit-linear-gradient(top,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%);background:linear-gradient(to bottom,#fff 0%,#f3f3f3 50%,#ededed 51%,#fff 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ffffff',GradientType=0)}
#top-part ul.dropdown-cart .item-x-absolute{position:absolute;right:10px}
#top-part ul.dropdown-cart li .item-in .left-side{float:left;width:50px}
#top-part ul.dropdown-cart li .item-in .right-side{border-bottom:1px solid #f1f1f1;float:left;margin-left:2px;width:170px}
#top-part ul.dropdown-cart .item-info .prices span{color:#fe3a3a;display:inline!important}
#top-part ul.dropdown-cart .item-info .prices,#top-part ul.dropdown-cart .item-info .currency{color:#fe3a3a;display:inline!important}
.dropdown-cart .shop-item{background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%);background:-webkit-linear-gradient(top,#fff 0%,#f6f6f6 47%,#ededed 100%);background:linear-gradient(to bottom,#fff 0%,#f6f6f6 47%,#ededed 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0)}
.navbar-brand{color:#fff;font-size:18px;margin-left:0!important;margin-right:15px;margin-top:8px;padding:0;height:auto}
.navbar-brand:hover{color:#f1f1f1}
.navbar{border-radius:0;line-height:100%;margin:0;margin-bottom:10px;moz-box-shadow:2px 2px 3px #661313;padding:1px;webkit-box-shadow:2px 2px 3px #661313;transition:background 0.3s ease, box-shadow 0.3s ease;}
/* Navbar default state: light beige background */
#main-navbar{
background:#f5f0e8 !important;
border-color:#d4c8b5 !important;
box-shadow:0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Navbar menu links: dark text on light background */
#main-navbar .nav > li > a{
color:#990606 !important;
}
/* Navbar when scrolled: red gradient */
#main-navbar.scrolled{
background:#093c9b !important;
background:radial-gradient(circle at top, #0c4a85 0%, #1161ac 45%, #135ca0 100%) !important;
border-color:#091972 !important;
box-shadow:0 2px 8px rgba(0,0,0,0.25) !important;
}
/* Navbar menu links when scrolled: white text */
#main-navbar.scrolled .nav > li > a{
color:#f0e9e9 !important;
}
/* Active/hover states when scrolled */
#main-navbar.scrolled .nav > li.active > a,
#main-navbar.scrolled .nav > li:hover > a,
#main-navbar.scrolled .nav > li.open > a{
background:#0399D4 !important;
background:linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-moz-linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-ms-linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-webkit-gradient(linear,left top,left bottom,from(#fed128),to(#A1A1A1)) !important;
color:#3B3944 !important;
}
/* Top menu + menu background: red like footer (radial gradient) - kept for other uses */
.navbar.gradient-color{
background:#b21726 !important;
background:radial-gradient(circle at top, #D83C3C 0%, #b21726 45%, #a3191f 100%) !important;
border-color:#6a0404 !important;
}
/* Navbar tools: search + language (top-right) */
.navbar .container{position:relative;}
.t06-navbar-tools{position:absolute;right:15px;top:7px;display:flex;align-items:center;gap:10px;z-index:0;}
/* Search button - default (light navbar) */
.t06-navbar-search-btn{width:34px;height:34px;border-radius:50%;border:1px solid #b21726;background:#fff;color:#b21726;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:all 0.3s ease;}
.t06-navbar-search-btn:focus{outline:none;}
/* Search button when navbar scrolled (red background) */
#main-navbar.scrolled .t06-navbar-search-btn{
background:#fff;
color:#b21726;
border-color:#fff;
}
/* Language button - default (light navbar) */
.t06-navbar-lang-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border:1px solid #b21726;border-radius:6px;color:#b21726;text-decoration:none;font-weight:700;letter-spacing:.3px;transition:all 0.3s ease; text-transform:uppercase;}
.t06-navbar-lang-btn:hover{text-decoration:none;opacity:.85;}
/* Language button when navbar scrolled (red background) */
#main-navbar.scrolled .t06-navbar-lang-btn{
border-color:rgba(255,255,255,0.9);
color:#fff;
}
.t06-navbar-search-form{display:none;margin:0;}
.t06-navbar-search-pill{display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;height:34px;padding:0 10px;min-width:260px;}
.t06-navbar-search-pill i{color:#b21726;}
.t06-navbar-search-pill input{border:0;outline:none;flex:1 1 auto;min-width:0;height:32px;line-height:32px;background:transparent;color:#333;}
.t06-navbar-search-close{border:0;background:transparent;color:#b21726;font-size:20px;line-height:1;padding:0 2px;cursor:pointer;}
.t06-navbar-search-close:focus{outline:none;}
/* open state: show search pill and hide language */
.t06-navbar-tools.is-search-open .t06-navbar-lang-btn{display:none;}
.t06-navbar-tools.is-search-open .t06-navbar-search-form{display:block;}
.t06-navbar-tools.is-search-open .t06-navbar-search-btn{display:none;}
@media (max-width: 767px){
/* leave space for the hamburger button */
.t06-navbar-tools{right:56px;top:6px;}
.t06-navbar-search-pill{min-width:200px;}
.t06-navbar-lang-btn{padding:0 10px;}
}
/* Any "menu" blocks using gradient-color / gradient-color-menu */
.gradient-color,
.gradient-color-menu{
background:#b21726 !important;
background:radial-gradient(circle at top, #D83C3C 0%, #b21726 45%, #a3191f 100%) !important;
border-color:#6a0404 !important;
}
div.product-sort.gradient-color,
div.product-sort.gradient-color-menu{
background:#b21726 !important;
background:radial-gradient(circle at top, #D83C3C 0%, #b21726 45%, #a3191f 100%) !important;
border-color:#6a0404 !important;
}
/* Scope menu item styling to TOP-LEVEL only (avoid affecting dropdown-menu items) */
.navbar .nav > li{float:left;list-style:none;padding:0 2px;position:relative}
.navbar .nav > li > a{border-radius:10px;color:#f0e9e9;display:block;font-size:14px;font-style:normal;font-weight:700;margin:0;moz-border-radius:10px;padding:6px 12px;padding:12px 7px;text-decoration:none;webkit-border-radius:10px;transition:all 0.1s ease;}
/* Default light navbar menu links */
#main-navbar .nav > li > a{
color:#9e0606 !important;
}
/* Bar menu icon (first li) - always red, no background */
#main-navbar .nav > li:first-child > a{
color:#b21726 !important;
background:transparent !important;
}
/* Bar icon on focus - stay red, no background */
#main-navbar .nav > li:first-child > a:focus{
color:#b21726 !important;
background:transparent !important;
outline:none;
}
/* Bar icon on hover - stay red, no background */
#main-navbar .nav > li:first-child:hover > a{
color:#b21726 !important;
background:transparent !important;
}
/* Bar icon when scrolled - red on red navbar */
#main-navbar.scrolled .nav > li:first-child > a{
color:#fff !important;
background:transparent !important;
}
/* Bar icon on focus when scrolled - stay white, no background */
#main-navbar.scrolled .nav > li:first-child > a:focus{
color:#fff !important;
background:transparent !important;
outline:none;
}
/* Bar icon on hover when scrolled - stay white, no background */
#main-navbar.scrolled .nav > li:first-child:hover > a{
color:#fff !important;
background:transparent !important;
}
/* Default light navbar active/hover states */
#main-navbar .nav > li.active > a,
#main-navbar .nav > li:hover > a,
#main-navbar .nav > li.open > a,
#main-navbar .nav > li.open > a:hover,
#main-navbar .nav > li.open > a:focus{
background:#b21726 !important;
background:radial-gradient(circle at top, #D83C3C 0%, #b21726 45%, #a3191f 100%) !important;
color:#fff !important;
box-shadow:0 1px 1px rgba(0,0,0,.2);
text-shadow:none;
margin-top:2px;
opacity:1 !important;
filter:none !important;
}
/* Scrolled navbar hover/active states (light gradient on red background) */
#main-navbar.scrolled .nav > li.active > a,
#main-navbar.scrolled .nav > li:hover > a,
#main-navbar.scrolled .nav > li.open > a,
#main-navbar.scrolled .nav > li.open > a:hover,
#main-navbar.scrolled .nav > li.open > a:focus{
background:#0399D4 !important;
background:linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-moz-linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-ms-linear-gradient(top,#EBEBEB,#A1A1A1) !important;
background:-webkit-gradient(linear,left top,left bottom,from(#fed128),to(#A1A1A1)) !important;
box-shadow:0 1px 1px rgba(0,0,0,.2);
color:#3B3944 !important;
moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
text-shadow:none;
webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
margin-top:2px;
opacity:1 !important;
filter:none !important;
}
/* Hamburger (first item): never show background “pill”, even when active */
#main-navbar .nav > li:first-child.active > a,
#main-navbar .nav > li:first-child.active > a:hover,
#main-navbar .nav > li:first-child.active > a:focus,
#main-navbar .nav > li:first-child:hover > a,
#main-navbar .nav > li:first-child > a:focus{
background:transparent !important;
box-shadow:none !important;
margin-top:0 !important;
border-radius:0 !important;
}
#main-navbar.scrolled .nav > li:first-child.active > a,
#main-navbar.scrolled .nav > li:first-child.active > a:hover,
#main-navbar.scrolled .nav > li:first-child.active > a:focus,
#main-navbar.scrolled .nav > li:first-child:hover > a,
#main-navbar.scrolled .nav > li:first-child > a:focus{
background:transparent !important;
box-shadow:none !important;
margin-top:0 !important;
border-radius:0 !important;
}
/* Legacy states for compatibility */
.navbar .nav > li.active > a,
.navbar .nav > li:hover > a,
.navbar .nav > li.open > a,
.navbar .nav > li.open > a:hover,
.navbar .nav > li.open > a:focus{background:#0399D4 !important;background:linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-moz-linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-ms-linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-webkit-gradient(linear,left top,left bottom,from(#fed128),to(#A1A1A1)) !important;box-shadow:0 1px 1px rgba(0,0,0,.2);color:#3B3944 !important;moz-box-shadow:0 1px 1px rgba(0,0,0,.2);text-shadow:none;webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);margin-top:2px;opacity:1 !important;filter:none !important}
/* If theme.css (cssloader) overrides active/focus states, force readable colors */
.navbar.gradient-color .nav.navbar-nav > li > a:focus{background:transparent !important;background-color:transparent !important;}
.navbar.gradient-color .nav.navbar-nav > li > a:focus,
.navbar.gradient-color .nav.navbar-nav > li > a:active{outline:none;color:#f0e9e9 !important;opacity:1 !important;filter:none !important;background:transparent !important;background-color:transparent !important;}
.navbar.gradient-color .nav.navbar-nav > li.active > a,
.navbar.gradient-color .nav.navbar-nav > li.active > a:hover,
.navbar.gradient-color .nav.navbar-nav > li.active > a:focus,
.navbar.gradient-color .nav.navbar-nav > li.open > a,
.navbar.gradient-color .nav.navbar-nav > li.open > a:hover,
.navbar.gradient-color .nav.navbar-nav > li.open > a:focus{color:#3B3944 !important;opacity:1 !important;filter:none !important;background:#0399D4 !important;background:linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-moz-linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-ms-linear-gradient(top,#EBEBEB,#A1A1A1) !important;background:-webkit-gradient(linear,left top,left bottom,from(#fed128),to(#A1A1A1)) !important;text-shadow:none !important;}
#adv-search{ margin-top: 7px; background-color: transparent; }
#search_in_title {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 19px 0 0 19px;
height: 40px;
padding: 10px 15px;
}
.button-more,.btn-go-search{border:0 none;border-radius:0;color:#fff;cursor:pointer;float:right;font:bold 15px/40px "Roboto",-apple-system, blinkmacsystemfont, "Segoe UI", oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;height:40px;overflow:visible;position:relative;text-shadow:0 -1px 0 rgba(0,0,0,0.3);text-transform:uppercase;width:100%}
.button-more::before{border-style:solid solid solid none;border-width:8px 8px 8px 0;content:"";left:-6px;position:absolute;top:12px}
.btn-go-search {
border-bottom-right-radius: 19px;
border-top-right-radius: 19px;
padding-right: 15px;
}
.basket-box {
height: 60px;
margin-left: -22px;
padding: 8px;
}
.t06-home-section-title{
color: #9b0606;
}
.green-basket{height:50px;margin-top:-5px}
.basket-box .green-basket{margin-right:20px}
.basket-box h4{margin:0}
.basket-box .center{text-align:center}
.basket-box .center a{color:#333;font-size:12px}
.basket-box table{width:100%}
.cleaner{padding-top:5px;padding-right:5px}
.btn-blue-round{display:inline-block!important;color:#fff!important;background:#d83c3c linear-gradient(to bottom,#af3232,#d83c3c) repeat scroll 0 0;border-radius:28px;color:#fff;display:inline-block;font-size:16px;padding:4px 20px;text-decoration:none}
.btn-blue-round a:hover{background:#3cb0fd;background-image:-webkit-linear-gradient(top,#3cb0fd,#3498db);background-image:-moz-linear-gradient(top,#3cb0fd,#3498db);background-image:-ms-linear-gradient(top,#3cb0fd,#3498db);background-image:-o-linear-gradient(top,#3cb0fd,#3498db);background-image:linear-gradient(to bottom,#3cb0fd,#3498db);text-decoration:none}
#home-slider{height:365px}
#home-slider .right-side{padding-top:60px}
#home-slider .left-side img{max-height:365px}
#home-slider .description{color:#666;margin-bottom:15px}
#home-slider .price{font-size:40px;margin-bottom:15px}
#home-slider .carousel-control{background-color:none}
#home-slider .carousel-control.left,#home-slider .carousel-control.right{background-image:url(imgs/carousel-sprite.png)}
#home-slider .carousel-control.left{background-position:0 center;width:100px}
#home-slider .carousel-control.right{background-position:-100px center;width:100px}
#home-slider a.option{background:#fff none repeat scroll 0 0;border:1px solid #ddd;color:#000;cursor:pointer;float:right;font-size:.85em;outline:medium none;padding:10px 30px;text-transform:uppercase;transition:all .3s ease 0}
#home-slider a.option.right-5{margin-right:5px}
#home-slider a.option:hover{text-decoration:none}
#home-slider a.option img{width:20px;margin-right:5px}
#home-slider .carousel-indicators li{border:1px solid #333}
#home-slider .carousel-indicators .active{background-color:#333}
.oaerror{background-color:#FFF;border:1px solid #eee;border-left-width:5px;border-radius:3px;font-size:18px;margin:0 auto;padding:20px;width:100%}
.oaerror.info{background-color:rgba(91,192,222,0.1);border-left-color:#5bc0de}
.oaerror.info strong{color:#5bc0de}
.table-products img.product-image{width:80px}
.final-step-form{margin-top:50px;text-align:center}
.final-step-form input,.final-step-form a{margin-bottom:5px!important}
.blog-col,.left-col-archive{margin-bottom:15px}
#search-input-blog{margin:0;margin-top:10px;margin-bottom:20px;padding:0}
#search-input-blog .search-query{padding-right:30px;padding-left:3px;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
#search-input-blog button{border:0;background:none;padding:2px 5px;margin-top:2px;position:absolute;top:5px;left:-28px;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#D9230F}
#search-input-blog .search-query:focus + button{z-index:3}
div.filter-sidebar{margin-bottom:30px}
div.filter-sidebar .title,.title.alone{font-size:20px;line-height:1;margin:0 0 10px;padding:0}
div.filter-sidebar .title span,.title.alone span{border-bottom:3px solid #6a0404;color:#04465a;display:inline-block;margin-bottom:-5px;padding-bottom:10px;margin-top:2rem}
div.filter-sidebar ul{list-style:none;padding:0}
div.filter-sidebar ul li,div.filter-sidebar ul li a{margin-bottom:4px}
div.filter-sidebar ul li a{color:#1766bc;display:inline-block;font-size:14px}
div.filter-sidebar ul li a.selected,div.filter-sidebar ul li a:hover{color:#1ee567}
div.filter-sidebar ul.children{padding-left:13px}
div.filter-sidebar ul.parent i,div.filter-sidebar ul.children i{font-size:16px}
div.filter-sidebar .title a.clear-filter,div.filter-sidebar .title i{color:#666;float:right}
div.product-list{cursor:pointer;margin-bottom:5px;padding-bottom:15px;padding-top:15px;text-align:center}
#products-side div.product-list:hover,#small_carousel.carousel .carousel-inner{box-shadow:0 6px 12px rgba(0,0,0,0.176);outline:1px solid #aaa}
.info-btn{color:#fff;margin-bottom:5px;display:block;font-size:14px;padding:5px 10px;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,0.4);vertical-align:middle;border-radius:8px}
.info-btn:hover{color:#f2f2f2}
.line-through1{text-decoration:line-through;color:#b5b2b2;font-size:12px;letter-spacing:-1px}
div.product-list div.inner div.img-container{margin-bottom:10px;overflow:hidden}
div.product-list div.inner div.img-container a{height:250px;display:inline-block;background-position:center;background-size:cover;width:100%;transition:all .2s linear 0}
div.product-list h2{height:35px;overflow:hidden;line-height:30px;margin:0;margin-bottom:10px;text-transform:uppercase;font-size:14px;font-weight:700}
div.product-list h2 a{color:#d83c3c;font-size:14px}
div.product-list h2 a:hover{text-decoration:none}
div.product-list div.price span.underline{text-decoration:underline}
div.product-list div.price span.line-through{text-decoration:line-through;color:#9f9b9b;font-weight:500}
div.product-list div.price span,div.product-list div.quantity span{font-weight:600;letter-spacing:-1px}
div.product-list div.price-discount{text-decoration:line-through}
div.product-list div.price span.price-down{background-color:#d30e0e;color:#fff;font-weight:400;padding:2px;text-decoration:none}
div.product-sort{display:inline-block;margin-bottom:20px;moz-box-shadow:2px 2px 3px #661313;padding:10px 20px;webkit-box-shadow:2px 2px 3px #661313;width:100%}
div.product-sort .form-group{margin-bottom:0}
.btn-blog{background:#33bdef linear-gradient(to bottom,#33bdef 5%,#0781ad 100%) repeat scroll 0 0;border:1px solid #057fd0;border-radius:6px;box-shadow:0 1px 0 0 #f0f7fa;color:#fff;cursor:pointer;display:inline-block;font-size:17px;font-weight:700;padding:6px 24px;text-decoration:none;text-shadow:0 -1px 0 #5b6178}
.btn-blog:hover{color:#fff}
/* Article detail */
.container.t06-article-page{width:calc(100% - 48px);max-width:1180px;padding-top:28px;padding-bottom:48px;}
.t06-article-shell{position:relative;background:#fff;border:1px solid #e4e8ec;border-radius:8px;padding:0 0 34px;box-shadow:0 18px 45px rgba(15,23,42,.08);overflow:hidden;}
.t06-article-header{padding:28px 34px 20px;border-bottom:1px solid #edf0f2;background:linear-gradient(180deg,#fff 0,#fbfcfd 100%);}
.t06-article-category{display:inline-flex;align-items:center;margin:0 0 12px;padding:5px 11px;border-radius:3px;background:#b21726;color:#fff;font-size:12px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;}
.t06-article-category:hover{background:#d83c3c;color:#fff;text-decoration:none;}
.t06-article-title{max-width:900px;}
.t06-article-title h1{margin:0;color:#073f53;font-size:30px;line-height:1.28;font-weight:700;text-transform:none;}
.t06-article-lede{max-width:860px;margin:12px 0 0;color:#5c6670;font-size:16px;line-height:1.65;}
.t06-article-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:18px 0 0;color:#7a828a;}
.t06-article-toolbar .blog-preview-time{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#7a828a;}
.t06-font-controls{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.t06-font-btn{min-width:34px;height:28px;border:1px solid #d83c3c;background:#fff;color:#d83c3c;border-radius:999px;padding:0 10px;font-weight:700;line-height:26px;transition:background .15s ease,color .15s ease,box-shadow .15s ease;}
.t06-font-btn:hover{background:#d83c3c;color:#fff;box-shadow:0 5px 14px rgba(216,60,60,.22);}
.t06-font-btn:focus{outline:none;}
.t06-article-shell .t06-blog-gallery{margin:24px 34px 30px;}
.t06-article-shell .t06-blog-main{border:1px solid #e2e6ea;border-radius:7px;background:#f6f7f8;box-shadow:0 12px 28px rgba(15,23,42,.10);}
.t06-article-shell .t06-blog-main img{display:block;width:100%;max-height:660px;object-fit:cover;}
.t06-article-shell .t06-blog-thumbs{padding-left:12px;}
.t06-article-shell .t06-blog-thumb{border:1px solid #e1e1e1;border-radius:6px;background:#fff;}
.t06-article-shell .t06-wm{top:12px;right:12px;border-radius:4px;background:rgba(10,14,18,.58);padding:8px 10px;box-shadow:0 8px 20px rgba(0,0,0,.18);}
.t06-article-shell .t06-wm strong{font-size:14px;}
.t06-article-shell .t06-wm .t06-wm-addr{font-size:13px;}
#article-content.t06-article-content{max-width:800px;margin:0 auto;color:#252a31;font-size:17px;line-height:1.85;text-align:justify;text-justify:inter-word;}
#article-content.t06-article-content p{margin:0 0 18px;}
#article-content.t06-article-content p:first-child{font-size:18px;line-height:1.85;color:#20252b;}
#article-content.t06-article-content strong{color:#173f52;font-weight:700;}
#article-content.t06-article-content img{max-width:100%;height:auto;border-radius:7px;margin:14px auto 22px;display:block;}
#article-content.t06-article-content img.aligncenter,
#article-content.t06-article-content img.size-medium,
#article-content.t06-article-content img[class*="wp-image-"],
#article-content.t06-article-content img[src*="/hung_phat_anh/"]{
width:min(100%, 680px) !important;
height:auto !important;
max-height:none;
object-fit:contain;
}
#article-content.t06-article-content .t06-wm-wrap{
width:min(100%, 680px);
margin:18px auto 26px;
}
#article-content.t06-article-content .t06-wm-wrap img{
width:100% !important;
margin:0;
}
#article-content.t06-article-content h2,#article-content.t06-article-content h3,#article-content.t06-article-content h4{color:#073f53;font-weight:700;line-height:1.35;margin:30px 0 12px;}
#article-content.t06-article-content ul,#article-content.t06-article-content ol{padding-left:24px;margin:0 0 18px;}
#article-content.t06-article-content li{margin-bottom:8px;}
.t06-article-meta{max-width:800px;margin:30px auto 0;padding-top:18px;border-top:1px solid #e6e8eb;color:#555;font-size:14px;}
.t06-article-keywords,.t06-article-tags{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.t06-article-meta strong{color:#073f53;margin-right:4px;}
.t06-tag-pill{display:inline-flex;align-items:center;min-height:28px;background:#f3f7f8;border:1px solid #dce6ea;color:#0b5367;border-radius:999px;padding:4px 11px;margin:0 2px 6px;text-decoration:none;font-weight:700;font-size:12px;}
.t06-tag-pill:hover{background:#d83c3c;border-color:#d83c3c;color:#fff;text-decoration:none;}
@media (max-width: 991px){
.container.t06-article-page{width:100%;max-width:none;padding-top:16px;padding-bottom:32px;}
.t06-article-shell{border-radius:0;border-left:0;border-right:0;}
.t06-article-header{padding:22px 18px 18px;}
.t06-article-title h1{font-size:25px;}
.t06-article-shell .t06-blog-gallery{margin:18px 18px 24px;}
#article-content.t06-article-content,.t06-article-meta{max-width:none;margin-left:18px;margin-right:18px;}
#article-content.t06-article-content img.aligncenter,
#article-content.t06-article-content img.size-medium,
#article-content.t06-article-content img[class*="wp-image-"],
#article-content.t06-article-content img[src*="/hung_phat_anh/"],
#article-content.t06-article-content .t06-wm-wrap{width:100% !important;}
}
@media (max-width: 767px){
.t06-article-title h1{font-size:21px;}
.t06-article-lede{font-size:15px;}
.t06-article-toolbar{align-items:flex-start;margin-top:14px;}
#article-content.t06-article-content{font-size:16px;line-height:1.75;}
#article-content.t06-article-content p:first-child{font-size:16px;}
.t06-article-shell .t06-wm{display:none;}
}
/* Off-canvas left sliding menu for mobile (and small tablets) */
@media (max-width: 991px) {
/* make the collapsed navbar behave as an off-canvas panel */
/* Use viewport-based width so the menu occupies ~80% (leave ~20% visible) */
/* Use 83vw so we leave ~17% visible; keep values consistent below */
#navbar.collapse {
position: fixed !important;
top: 0 !important;
left: -83vw !important; /* hidden to the left by its own width */
width: 83vw !important; /* menu takes ~83% of viewport width */
height: 100vh !important;
background:#b21726 !important; /* main menu color - always red */
background:radial-gradient(circle at top, #D83C3C 0%, #b21726 45%, #a3191f 100%) !important;
z-index: 9999 !important;
overflow-y: auto !important;
padding-top: 0 !important; /* ensure full red from top */
-webkit-transition: left .28s ease !important;
transition: left .28s ease !important;
pointer-events: auto !important;
}
/* when opened (Bootstrap adds .in on show) slide into view */
#navbar.collapse.in {
left: 0 !important;
width: 83vw !important;
}
/* Menu list vertical layout */
#navbar .nav {
display: block;
margin: 0;
padding: 0;
}
/* Force one item per line (override Bootstrap/theme floats) */
#navbar .nav > li {
display: block;
float: none !important;
clear: both !important;
width: 100% !important;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#navbar .nav > li > a {
display: block;
width: 100% !important;
color: #fff !important; /* always white text in mobile menu */
padding: 12px 20px;
font-weight: 700;
background: transparent;
}
/* dropdown children become nested blocks */
#navbar .dropdown-menu {
position: static;
float: none;
background: transparent;
border: none;
box-shadow: none;
padding-left: 10px;
display: none;
z-index: 10001 !important;
pointer-events: auto !important;
}
#navbar .dropdown.open > .dropdown-menu {
display: block;
}
#navbar .dropdown-menu li {
display: block;
float: none !important;
clear: both !important;
width: 100% !important;
z-index: 10001 !important;
pointer-events: auto !important;
}
#navbar .dropdown-menu li a {
color: #fff;
padding: 8px 20px;
font-weight: 600;
display: block;
pointer-events: auto !important;
z-index: 10001 !important;
}
#navbar .dropdown-menu li a:hover {
background: rgba(255,255,255,0.1);
}
/* when menu is open shift page content to the right */
/* Make the left panel fixed and visible; do NOT translate the page content (avoids clipping issues) */
#navbar.collapse.in { left: 0; right: auto; }
/* overlay to the right of the menu */
/* overlay sits to the right of the off-canvas panel; keep its left value in sync with #navbar width */
#nav-overlay { display: none; position: fixed; top:0; left:0 !important; right:0; bottom:0; background: rgba(0,0,0,0.35); z-index:1040; pointer-events:auto; }
body.nav-open #nav-overlay { display:block; }
/* ensure the menu sits above page content */
#navbar.collapse { z-index:1050; }
/* submenu should be above parent navbar */
#navbar .dropdown-menu { z-index:2 !important; }
/* ensure hamburger toggle stays above everything so user can always click it */
.navbar-toggle { z-index:10000 !important; position: relative; }
/* prevent body horizontal scroll when menu present */
body { overflow-x: hidden; }
}
/* Optional: slightly narrower panel on very small phones */
@media (max-width: 400px) {
/* on very small phones use a slightly larger fraction so menu remains usable */
#navbar.collapse { width: 85vw; left: -85vw; }
#navbar.collapse.in { left: 0; }
/* Do not translate #content on small screens; it breaks position:fixed descendants (menu/overlay) */
body.nav-open #content { transform: none !important; }
/* Keep overlay full-screen to avoid any white gap */
#nav-overlay { left:0 !important; }
}
.quantity-num{border:1px solid #333;margin-right:4px;padding-bottom:2px;padding-left:4px;padding-top:1px}
.paypal-image{margin:20px 0}
#checkout-page form .btm-10{margin-bottom:10px}
#checkout-page .paypal-form{background:linear-gradient(to bottom,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:-o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);background:rgba(255,255,255,1);background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(47%,rgba(246,246,246,1)),color-stop(100%,rgba(237,237,237,1)));background:-webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ededed',GradientType=0);padding-top:10px}
.payment-type-box{border:1px solid #ccc;margin:20px 0;padding:12px;position:relative}
.payment-type-box .top-header{background-color:#fff;font-size:16px;left:50%;margin-left:-75px;padding-left:5px;padding-right:5px;position:absolute;top:-12px;width:149px}
#checkout-page .form-control{border-radius:0;box-shadow:none;color:#666;font-size:14px}
#checkout-page .form-group label{color:#666;font-size:14px}
#checkout-page .left-side{margin-bottom:30px}
#checkout-page .discount{margin-bottom:20px}
#small_carousel.carousel{padding-bottom:60px}
#home-slider .carousel-inner .right-side h3 a{color:#424449}
#small_carousel.carousel .carousel-inner .item{ms-transition-property:opacity;opacity:0;text-align:center;transition-property:opacity}
#small_carousel.carousel .carousel-inner .active{ms-transition-property:opacity;opacity:1;transition-property:opacity;webkit-transition-property:opacity}
#small_carousel.carousel .carousel-indicators{bottom:10px}
#small_carousel.carousel .carousel-indicators > li{background-color:#1e88e5;border:none}
#small_carousel blockquote{border:none;text-align:center}
#small_carousel .profile-circle{border-radius:100px;height:100px;margin:0 auto;width:100px}
#small_carousel .profile-circle img{width:100%}
#small_carousel .carousel-indicators .active{height:15px;width:15px}
#small_carousel .add-to-cart{padding-left:10px;padding-right:10px}
#small_carousel .info-btn{margin-left:10px;margin-right:10px}
#small_carousel a.left.carousel-control,#small_carousel a.right.carousel-control{display:none}
#view-product h1{font-size:20px;margin-bottom:20px;margin-top:20px;color:#088ae0;text-transform:uppercase}
#view-product .the-image{border:1px solid #ddd;box-shadow:0 6px 12px rgba(0,0,0,0.176);padding:5px}
#view-product .orders-from-category{padding-top:80px}
#view-product .row-info{padding:10px 0 0}
#view-product .border-bottom{border-bottom:1px solid #d7d7d7;margin-left:10px;margin-right:10px;margin-top:10px}
#view-product .manage-buttons a{display:block;margin-bottom:5px}
#contacts .jumbotron{background:#358CCE;border-radius:0;color:#FFF}
#contacts .jumbotron-sm{padding-bottom:24px;padding-top:24px}
#contacts .jumbotron small{color:#FFF}
#contacts .h1 small{font-size:24px}
.blog-list .caption{color:#555}
.blog-list small span{margin-right:7px}
.blog-list small,.blog-list small a,.blog-preview-time{color:rgb(151, 147, 147)}
.blog-list .caption h5{font-size:17px; }
.blog-list img{width:100%;margin-top:2rem}
#blog .thumbnail{border-radius:0}
.blog-preview-time{display:inline-block;margin-bottom:10px}
.blog-description{color:#444;font-size:14px; text-align: justify;}
.blog-artchive{list-style:none;margin-bottom:20px;padding-left:0}
.blog-artchive .item{background:transparent none repeat scroll 0 0;border-color:-moz-use-text-color -moz-use-text-color #ccc;border-image:none;border-style:none none dotted;border-width:0 0 1px;moz-border-bottom-colors:none;moz-border-left-colors:none;moz-border-right-colors:none;moz-border-top-colors:none;padding:10px 0;padding-left:10px}
.blog-artchive .item a{color:#555}
.blog-home-left-categ{margin-bottom:20px}
.blog-list .description{min-height:70px;overflow:hidden;text-align:justify}
/* .blog-list h5{overflow:hidden} */
.blog-list .img-container{height:400px;overflow:hidden}
/* Category journals: 100 design, 200 build, 300 architecture */
.kat-category-page{
--kat-cat-ink:#17212b;
--kat-cat-muted:#6b7280;
--kat-cat-bg:#f5f6f3;
--kat-cat-surface:#ffffff;
--kat-cat-accent:#b08a4a;
--kat-cat-accent-2:#315c50;
--kat-cat-line:rgba(23, 33, 43, .12);
--kat-cat-shadow:0 18px 48px rgba(12, 24, 34, .12);
background:
linear-gradient(180deg, var(--kat-cat-bg) 0%, #fff 46%, var(--kat-cat-bg) 100%);
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
padding:30px 0 58px;
}
.kat-category-page #blog{background:transparent;}
.kat-category-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0, 1.35fr) minmax(270px, .65fr);
gap:28px;
min-height:330px;
overflow:hidden;
border-radius:0;
padding:54px;
color:#fff;
background:
linear-gradient(120deg, rgba(10,18,28,.96), rgba(10,18,28,.76)),
var(--kat-cat-hero);
background-size:cover;
background-position:center;
box-shadow:var(--kat-cat-shadow);
}
.kat-category-hero:before,
.kat-category-hero:after{
content:"";
position:absolute;
pointer-events:none;
}
.kat-category-hero:before{
inset:26px;
border:1px solid rgba(255,255,255,.18);
}
.kat-category-hero:after{
right:42px;
bottom:34px;
width:190px;
height:190px;
border-right:1px solid rgba(255,255,255,.22);
border-bottom:1px solid rgba(255,255,255,.22);
}
.kat-category-hero-copy,
.kat-category-hero-panel{position:relative;z-index:1;}
.kat-category-eyebrow{
display:inline-block;
margin-bottom:14px;
color:var(--kat-cat-accent);
font-size:12px;
font-weight:800;
letter-spacing:.24em;
text-transform:uppercase;
}
.kat-category-hero h1{
max-width:760px;
margin:0 0 16px;
color:#fff;
font-size:48px;
line-height:1.08;
font-weight:800;
letter-spacing:0;
text-transform:uppercase;
}
.kat-category-subtitle{
max-width:720px;
margin:0;
color:rgba(255,255,255,.88);
font-size:18px;
line-height:1.75;
}
.kat-category-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:28px;
}
.kat-category-chips span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 14px;
border:1px solid rgba(255,255,255,.24);
color:#fff;
background:rgba(255,255,255,.08);
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.kat-category-hero-panel{
align-self:end;
padding:24px 24px 22px;
border-left:3px solid var(--kat-cat-accent);
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}
.kat-category-count{
display:block;
font-size:56px;
line-height:1;
color:#fff;
font-weight:800;
}
.kat-category-count-label{
display:block;
margin-top:4px;
color:var(--kat-cat-accent);
font-size:12px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.kat-category-hero-panel p{
margin:16px 0 0;
color:rgba(255,255,255,.82);
line-height:1.65;
}
.kat-category-note{
display:grid;
grid-template-columns:80px minmax(0, 1fr);
gap:18px;
align-items:center;
margin:28px 0 24px;
color:var(--kat-cat-muted);
}
.kat-category-note span{
height:1px;
background:var(--kat-cat-accent);
}
.kat-category-note p{
margin:0;
font-size:15px;
line-height:1.65;
}
.kat-category-list{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px;
}
.kat-category-card{
display:grid;
grid-template-columns:230px minmax(0, 1fr);
min-height:250px;
overflow:hidden;
border:1px solid var(--kat-cat-line);
background:var(--kat-cat-surface);
box-shadow:0 14px 32px rgba(12, 24, 34, .08);
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.kat-category-card:hover{
transform:translateY(-4px);
border-color:color-mix(in srgb, var(--kat-cat-accent) 55%, var(--kat-cat-line));
box-shadow:var(--kat-cat-shadow);
}
.kat-category-card.is-featured{
grid-column:1 / -1;
grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
min-height:430px;
}
.kat-category-media{
position:relative;
display:block;
min-height:100%;
overflow:hidden;
background:#d6d9d5;
}
.kat-category-media:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, transparent 42%, rgba(0,0,0,.26));
opacity:.7;
}
.kat-category-media img{
width:100%;
height:100%;
min-height:250px;
object-fit:cover;
transition:transform .5s ease, filter .5s ease;
}
.kat-category-card.is-featured .kat-category-media img{min-height:430px;}
.kat-category-card:hover .kat-category-media img{
transform:scale(1.045);
filter:saturate(1.08) contrast(1.04);
}
.kat-category-content{
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
padding:26px;
}
.kat-category-card.is-featured .kat-category-content{padding:42px;}
.kat-category-card-top{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
align-items:center;
margin-bottom:13px;
}
.kat-category-subcat,
.kat-category-date{
color:var(--kat-cat-muted);
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.kat-category-subcat{
color:var(--kat-cat-accent-2);
text-decoration:none;
}
.kat-category-subcat:hover{color:var(--kat-cat-accent);text-decoration:none;}
.kat-category-card h2{
margin:0 0 14px;
color:var(--kat-cat-ink);
font-size:22px;
line-height:1.35;
font-weight:800;
letter-spacing:0;
}
.kat-category-card.is-featured h2{font-size:34px;line-height:1.22;}
.kat-category-card h2 a{color:inherit;text-decoration:none;}
.kat-category-card h2 a:hover{color:var(--kat-cat-accent-2);}
.kat-category-card p{
margin:0 0 20px;
color:#4f5965;
font-size:14px;
line-height:1.75;
text-align:justify;
}
.kat-category-read{
display:inline-flex;
align-items:center;
gap:10px;
width:max-content;
max-width:100%;
min-height:40px;
padding:9px 16px;
border:1px solid var(--kat-cat-accent);
color:var(--kat-cat-ink);
background:transparent;
font-size:12px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
text-decoration:none;
transition:background .18s ease, color .18s ease, transform .18s ease;
}
.kat-category-read:hover{
color:#fff;
background:var(--kat-cat-accent-2);
border-color:var(--kat-cat-accent-2);
text-decoration:none;
transform:translateX(3px);
}
.kat-category-pagination{margin-top:30px;}
.kat-category-pagination .pagination > li > a,
.kat-category-pagination .pagination > li > span{
border-color:var(--kat-cat-line);
color:var(--kat-cat-ink);
}
.kat-category-pagination .pagination > .active > a,
.kat-category-pagination .pagination > .active > span{
background:var(--kat-cat-accent-2);
border-color:var(--kat-cat-accent-2);
}
.kat-category-empty{
grid-column:1 / -1;
border:0;
background:var(--kat-cat-surface);
color:var(--kat-cat-ink);
box-shadow:0 12px 26px rgba(12, 24, 34, .08);
}
.kat-cat-design{
--kat-cat-bg:#f6f2ea;
--kat-cat-ink:#18251f;
--kat-cat-accent:#c28f5c;
--kat-cat-accent-2:#31584b;
--kat-cat-hero:
linear-gradient(135deg, rgba(49,88,75,.78), rgba(28,37,31,.82)),
url('../../../../../hung_phat_anh/load_web_internet/Gioi_thieu/bia.jpg');
}
.kat-cat-design .kat-category-card{
border-radius:20px 20px 6px 20px;
}
.kat-cat-design .kat-category-media:after{
background:linear-gradient(180deg, rgba(49,88,75,.05), rgba(194,143,92,.30));
}
.kat-cat-design .kat-category-card.is-featured .kat-category-content{
background:linear-gradient(90deg, rgba(246,242,234,.92), #fff);
}
.kat-cat-build{
--kat-cat-bg:#f0f1ef;
--kat-cat-ink:#202326;
--kat-cat-accent:#d6a23b;
--kat-cat-accent-2:#6f3425;
--kat-cat-hero:
linear-gradient(120deg, rgba(24,27,30,.94), rgba(65,56,43,.78)),
url('../../../../../hung_phat_anh/load_web_internet/33.jpg');
}
.kat-cat-build .kat-category-card{
border-top:4px solid var(--kat-cat-accent);
border-radius:0;
box-shadow:10px 12px 0 rgba(32,35,38,.08);
}
.kat-cat-build .kat-category-content{
background:linear-gradient(180deg, #fff 0%, #f8f4eb 100%);
}
.kat-cat-build .kat-category-media:before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,.16) 48% 50%, transparent 50% 100%),
linear-gradient(0deg, transparent 0 48%, rgba(255,255,255,.12) 48% 50%, transparent 50% 100%);
background-size:28px 28px;
opacity:.35;
pointer-events:none;
}
.kat-cat-architecture{
--kat-cat-bg:#eef3f2;
--kat-cat-ink:#142433;
--kat-cat-accent:#ba7652;
--kat-cat-accent-2:#1f4f64;
--kat-cat-hero:
linear-gradient(120deg, rgba(20,36,51,.94), rgba(31,79,100,.72)),
url('../../../../../hung_phat_anh/load_web_internet/Gioi_thieu/Key04.jpg');
}
.kat-cat-architecture .kat-category-list{
gap:28px;
}
.kat-cat-architecture .kat-category-hero:before{
border-color:rgba(255,255,255,.24);
clip-path:polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%);
}
.kat-cat-architecture .kat-category-card{
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
.kat-cat-default{
--kat-cat-bg:#f5f6f3;
--kat-cat-ink:#17212b;
--kat-cat-accent:#d1b06b;
--kat-cat-accent-2:#0c3c50;
--kat-cat-hero:linear-gradient(120deg, rgba(12,60,80,.94), rgba(11,27,36,.78));
}
@media (max-width: 991px){
.kat-category-hero{
grid-template-columns:1fr;
min-height:0;
padding:38px;
}
.kat-category-hero h1{font-size:38px;}
.kat-category-list{grid-template-columns:1fr;}
.kat-category-card,
.kat-category-card.is-featured{
grid-template-columns:260px minmax(0, 1fr);
min-height:270px;
}
.kat-category-card.is-featured .kat-category-media img{min-height:270px;}
.kat-category-card.is-featured h2{font-size:28px;}
}
@media (max-width: 767px){
.kat-category-page{padding:24px 0 42px;}
.kat-category-hero{
padding:30px 24px;
margin-left:-15px;
margin-right:-15px;
}
.kat-category-hero:before{inset:14px;}
.kat-category-hero:after{display:none;}
.kat-category-hero h1{font-size:30px;}
.kat-category-subtitle{font-size:15px;}
.kat-category-note{
grid-template-columns:42px minmax(0, 1fr);
margin:22px 0;
}
.kat-category-card,
.kat-category-card.is-featured{
display:block;
min-height:0;
}
.kat-category-media,
.kat-category-card.is-featured .kat-category-media{
height:230px;
min-height:0;
}
.kat-category-media img,
.kat-category-card.is-featured .kat-category-media img{
min-height:230px;
}
.kat-category-content,
.kat-category-card.is-featured .kat-category-content{
padding:22px;
}
.kat-category-card h2,
.kat-category-card.is-featured h2{
font-size:22px;
}
}
.btn-blue{background-color:#4285f4;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);color:#fff}
.product-list .price,.product-list .price-discount{margin-bottom:6px;height:20px;overflow:hidden}
.product-list .add-to-cart{margin-bottom:5px}
.add-to-cart.btn-add{border-top:1px solid #4b9df4;background:#c53232;background:-webkit-gradient(linear,left top,left bottom,from(#cb3434),to(#d83c3c));background:-webkit-linear-gradient(top,#134dc4,#23a2aa);background:-moz-linear-gradient(top,#bb2e2e,#d83c3c);background:-ms-linear-gradient(top,#d83c3c,#961f1f);background:-o-linear-gradient(top,#e54747,#d83c3c);padding:5px 10px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:#000 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:#fff;font-size:14px;text-decoration:none;vertical-align:middle;display:block;text-transform:uppercase}
.add-to-cart.btn-add.more-blue{background:#18679b;background:-moz-linear-gradient(top,#d83c3c 0%,#d83c3c 100%);background:-webkit-linear-gradient(top,#d83c3c 0%,#ad2929 100%);background:linear-gradient(to bottom,#d83c3c 0%,#d83c3c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#18679b',endColorstr='#3997d6',GradientType=0)}
.add-to-cart.btn-add:hover{border-top-color:#811919;background:#d83c3c;color:#f6f2f2}
.add-to-cart.btn-add:active{border-top-color:#092537;background:#112f43}
.add-to-cart1.btn-add{border-top:1px solid #f44b4b;background:#c53232;background:-webkit-gradient(linear,left top,left bottom,from(#cb3434),to(#d83c3c));background:-webkit-linear-gradient(top,#d83c3c,#cd3434);background:-moz-linear-gradient(top,#bb2e2e,#d83c3c);background:-ms-linear-gradient(top,#d83c3c,#961f1f);background:-o-linear-gradient(top,#e54747,#d83c3c);padding:5px 10px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:#000 0 1px 0;-moz-box-shadow:rgba(0,0,0,1) 0 1px 0;box-shadow:rgba(0,0,0,1) 0 1px 0;text-shadow:rgba(0,0,0,.4) 0 1px 0;color:#fff;font-size:14px;text-decoration:none;vertical-align:middle;display:block;text-transform:uppercase;text-align:center}
.add-to-cart1.btn-add.more-blue{background:#18679b;background:-moz-linear-gradient(top,#d83c3c 0%,#d83c3c 100%);background:-webkit-linear-gradient(top,#d83c3c 0%,#ad2929 100%);background:linear-gradient(to bottom,#d83c3c 0%,#d83c3c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#18679b',endColorstr='#3997d6',GradientType=0)}
.add-to-cart1.btn-add:hover{border-top-color:#06d81b;background:#06d81b;color:#ece9e9}
.add-to-cart1.btn-add:active{border-top-color:#1b435e;background:#1b435e}
.btn-inner-search{color:#f1f1f1}
.add-to-cart a .loader{display:none;left:50%;margin-left:-12px;position:absolute;width:25px}
#notificator{display:none;left:50%;margin-left:-100px;padding:15px 25px;position:fixed;text-align:center;top:20px;width:200px;z-index:5000}
#clear-form{margin-left:-4px}
#myImg{border-radius:5px;cursor:pointer;transition:.3s}
#myImg:hover{opacity:.7}
#modalImagePreview{background-color:#000;background-color:rgba(0,0,0,0.9);display:none;height:100%;left:0;overflow:auto;padding-top:100px;position:fixed;top:0;width:100%;z-index:100}
#modalImagePreview .modal-content{text-align:center;display:block;margin:auto;max-width:700px;width:80%}
#modalImagePreview #caption{color:#ccc;display:block;height:150px;margin:auto;max-width:700px;padding:10px 0;text-align:center;width:80%}
#modalImagePreview .modal-content,#modalImagePreview #caption{animation-duration:.6s;animation-name:zoom;webkit-animation-duration:.6s;webkit-animation-name:zoom}
#modalImagePreview .close{opacity:1;color:#f1f1f1;font-size:40px;font-weight:700;position:absolute;right:-10px;top:-40px;transition:.3s}
#modalImagePreview .close:hover,#modalImagePreview .close:focus{color:#bbb;cursor:pointer;text-decoration:none}
#modalImagePreview img{max-width:100%}
.inner-next,.inner-prev{position:absolute;top:50%;margin-top:-120px;background-image:url(imgs/arrows-2x.png);height:120px;width:80px}
.inner-prev{left:10px}
.inner-next{right:10px;background-position:-110px center}
.other-images-container .active img{border:3px solid #b1b1b1}
.img-series{bottom:-17px;color:#fff;font-size:16px;position:absolute;right:0}
.img-sl{cursor:pointer}
.steps{margin-bottom:30px;padding-left:15px;padding-right:15px}
.steps .step{text-align:center;padding-top:7px;padding-bottom:7px;border-left:2px solid #fff}
.step-bg-ok{background:#7db9e8;background:-moz-linear-gradient(top,#7db9e8 0%,#337ab7 100%);background:-webkit-linear-gradient(top,#7db9e8 0%,#337ab7 100%);background:linear-gradient(to bottom,#7db9e8 0%,#337ab7 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8',endColorstr='#337ab7',GradientType=0);color:#fff}
.step-bg-not-ok{background:#d9edf7;background:-moz-linear-gradient(top,#d9edf7 0%,#a6dbf4 100%);background:-webkit-linear-gradient(top,#d9edf7 0%,#a6dbf4 100%);background:linear-gradient(to bottom,#d9edf7 0%,#a6dbf4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d9edf7',endColorstr='#a6dbf4',GradientType=0);color:#424449}
#dynPage .top-bg{background-color:#fff;height:120px}
#dynPage .text-content{margin-top:-100px;background-color:#fff;border-radius:2px;padding:80px 56px;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);color:#424242}
@-webkit-keyframes zoom {
from{webkit-transform:scale(0)}
to{webkit-transform:scale(1)}
}
@keyframes zoom {
from{transform:scale(0)}
to{transform:scale(1)}
}
@media only screen and (max-width: 700px) {
#modalImagePreview .modal-content{width:100%}
}
.other-img-preview{cursor:pointer;height:100px;margin-bottom:10px;width:100px}
.relative{position:relative}
.remove-product{left:0;position:absolute;top:0}
footer{bottom:0;left:0;position:relative;width:100%}
footer .footer-icon li{display:block;height:40px;width:100%}
.full{width:100%}
.gap{clear:both;display:block;height:30px;width:100%}
.footer{background:#032f3f;border-top:1px solid #DDD;height:auto;padding-bottom:0;position:relative;width:100%}
.footer p{margin:0}
.footer img{max-width:100%}
.footer h3{border-bottom:1px solid #BAC1C8;color:#d6dde4;font-size:20px;font-weight:600;line-height:27px;padding:10px 0;text-transform:uppercase}
.footer ul{color:#f5fbfb;list-style-type:none;margin-left:0;margin-top:15px;padding-left:0}
.footer ul li a{display:block;padding:0 0 5px}
.footer a,.footer p{color:#f5fbfb}
.footer p,.footer ul{font-size:14px;color:#e3ecec}
.supportLi h4{font-size:20px;font-weight:lighter;line-height:normal;margin-bottom:0!important;padding-bottom:0}
.newsletter-box input#appendedInputButton{background:#FFF;clear:both;display:inline-block;float:left;height:30px;width:100%}
.newsletter-box .btn{border:medium none;border-radius:7px;color:#333;display:inline-block;height:40px;moz-border-radius:7px;ms-border-radius:7px;o-border-radius:7px;padding:0;webkit-border-radius:7px;width:100%}
.newsletter-box{overflow:hidden}
.bg-gray{background-image:-moz-linear-gradient(center bottom,#BBB 0%,#F0F0F0 100%);box-shadow:0 1px 0 #B4B3B3}
.social li{background:none repeat scroll 0 0 #B5B5B5;border:2px solid #B5B5B5;border-radius:50%;float:left;height:36px;line-height:36px;margin:0 8px 0 0;moz-border-radius:50%;moz-transition:all .5s ease 0;ms-border-radius:50%;ms-transition:all .5s ease 0;o-border-radius:50%;o-transition:all .5s ease 0;padding:0;text-align:center;transition:all .5s ease 0;webkit-border-radius:50%;webkit-transition:all .5s ease 0;width:36px}
.social li:hover{moz-transform:scale(1.1) rotate(360deg);ms-transform:scale(1.1) rotate(360deg);o-transform:scale(1.1) rotate(360deg);transform:scale(1.15) rotate(360deg);webkit-transform:scale(1.1) rotate(360deg)}
.social li a{color:#EDEFF1}
.social li:hover{background:#2c3e50;border:2px solid #2c3e50}
.social li a i{color:#EDEFF1!important;font-size:18px;margin:0 0 0 5px}
.footer-bottom{background:#052b3b;padding-bottom:10px;color:#e2d1d1}
.footer-bottom p.pull-left{padding-top:12px}
.payments{font-size:1.5em;padding-top:12px}
.footer .footer-icon span i{border:1px solid #a3a3a3;border-radius:100%;height:30px;line-height:25px;margin-bottom:5px;margin-right:5px;text-align:center;width:30px}
.f-cont-info{width:70%;word-break:break-all}
#show-xs-nav{border:1px solid #666;color:#666;font-size:17px;padding:3px;text-align:center;text-decoration:none}
#show-xs-nav span i{margin-left:5px}
#shopping-cart .go-shop,#checkout-page .go-shop{float:left}
#shopping-cart .go-checkout,#checkout-page .go-order{float:right}
#footer .f-col{height:250px}
#top-user-panel{font-size:13px;padding:5px 0;background:#fff;background:-moz-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:-webkit-linear-gradient(top,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);background:linear-gradient(to bottom,#fff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f6f6f6',GradientType=0)}
#top-user-panel form{float:right}
#top-user-panel form .form-control{border:1px solid #e1e1e1;border-radius:3px;height:32px;max-width:150px}
#vendor-page .vendor-title{margin:0;margin-bottom:20px}
@media (min-width: 992px) and (max-width: 1199px) {
#top-part #adv-search .dropdown.dropdown-lg .dropdown-menu{width:415px}
#home-slider{height:360px}
#home-slider .right-side h3{font-size:18px}
#home-slider .price{font-size:28px}
#home-slider .left-side img{max-height:360px}
.other-img-preview{height:75px;width:75px}
}
@media (min-width: 768px) and (max-width: 991px) {
#content{padding-bottom:700px}
#top-part ul.shop-dropdown a.dropdown-toggle{font-size:13px}
#top-part #adv-search .dropdown.dropdown-lg .dropdown-menu{width:305px}
#home-slider{height:280px}
#home-slider .right-side h3{font-size:18px}
#home-slider .price{font-size:20px}
#home-slider .right-side{padding-top:10px}
#home-slider .left-side img{max-height:280px}
#top-part .site-logo{margin-bottom:10px}
#languages-bar{margin-bottom:10px}
#nav-categories,#show-xs-nav .hidde-sp{display:none}
}
@media (min-width: 991px) {
#nav-categories{display:block!important}
}
@media screen and (max-width: 767px) {
#content{padding-bottom:0}
#products-side{padding-left:0px;padding-right:0px}
#top-part{height:auto}
#top-part ul.shop-dropdown{width:auto}
div.product-list{text-align:center}
#view-article .the-image{margin-bottom:40px}
#top-part #adv-search .dropdown.dropdown-lg .dropdown-menu{width:auto}
.navbar-toggle{border-color:#f1f1f1;margin-top:2px}
.navbar-toggle .icon-bar{background-color:#f1f1f1}
#home-slider{height:auto;padding-bottom:60px}
#home-slider .right-side .text-right{text-align:center}
#home-slider .right-side a.option{margin-bottom:5px;float:none;display:inline-block}
#home-slider .right-side a.option.right-5{margin-left:5px}
#home-slider .right-side .xs-center{text-align:center}
#home-slider .item .left-side a{display:block;text-align:center}
#home-slider .left-side img{display:inline}
.ord{margin-bottom:7px}
#view-article .filter-sidebar{padding-left:10px;padding-right:10px}
#view-article a.btn:first-child{margin-bottom:5px}
#view-article div.product-list{margin-left:10px;margin-right:10px}
#view-product .the-image{margin-bottom:30px}
.other-img-preview{height:75px;margin-bottom:50px;width:75px}
#nav-categories,#show-xs-nav .hidde-sp{display:none}
.final-left-col{margin-bottom:30px}
#top-part .site-logo{margin-bottom:10px}
#languages-bar{margin-bottom:10px}
#adv-search{margin-bottom:10px}
.basket-box{height:auto;margin-left:0}
.navbar{z-index:1}
.navbar li{float:none;position:static;z-index:1232}
.steps .step{margin-bottom:2px}
#dynPage .text-content{padding:20px}
.footer p,.footer ul{font-size:13px}
#footer .f-col{height:220px}
#top-user-panel form{width:100%;margin-top:5px}
#top-user-panel form .form-control{max-width:100%;width:100%}
.social-media-product-share{margin-bottom:20px}
.filter-sidebar{display:none}
.alone{display:none}
#adv-search{display:none}
#languages-bar{display:none}
.minheight300{min-height:300px;position:relative}
.displaynone768{display:none}
.shopping_cart1{display:none}
.basket-box{border:1px solid #e7e7e7;}
.testimonials .testimonial-item .testimonial-img { width: 60px;}
div.product-list div.inner div.img-container a { height: 350px;}
h2.section-title {margin-top: 40px;padding-bottom: 20px;font-size: 15px;}
h2.section-title-main::before{content:'';width:2rem;height:2px;background:#3498db;display:inline-block}
h2.section-title-main::after{content:'';width:2rem;height:2px;background:#3498db;display:inline-block}
h2.section-title-main::before{margin:0 10px 7px 0}
h2.section-title-main::after{margin:0 0 7px 10px}
}
@media (max-width: 480px) {
#home-slider .carousel-control.right{background-position:-140px center;width:50px}
#home-slider .carousel-control.left{background-position:0 center;width:50px}
#checkout-page a.pull-right{float:left!important;margin-top:10px}
#top-part #adv-search .dropdown.dropdown-lg .dropdown-menu{width:210px}
#shopping-cart .go-shop,#shopping-cart .go-checkout,#checkout-page .go-order,#checkout-page .go-shop{float:none;margin-bottom:7px}
}
.zalo-chat-widget{display:block!important;margin-bottom:350px;cursor:pointer;margin-right:0}
.ppocta-ft-fix{display:inline-grid;position:fixed;bottom:5%;left:20px;min-width:45px;text-align:center;z-index:99999}
#calltrap-btn .calltrap_offline{background-color:#1cb2ed;margin-bottom:40px;border-radius:100%;width:45px;height:45px;line-height:45px;box-shadow:0 0 10px -2px rgba(0,0,0,.7)}
.calltrap_offline #calltrap-ico{-webkit-animation:uptocallmini_offline 1.5s 0 ease-out infinite;-moz-animation:uptocallmini_offline 1.5s 0 ease-out infinite;-o-animation:uptocallmini_offline 1.5s 0 ease-out infinite;animation:uptocallmini_offline 1.5s 0 ease-out infinite}
#calltrap-ico{width:45px;height:45px;border:0;-webkit-border-radius:50%!important;border-radius:50%!important;-o-background-clip:padding-box;background-clip:padding-box;-webkit-animation:uptocallmini 1.5s 0 ease-out infinite;-moz-animation:uptocallmini 1.5s 0 ease-out infinite;-o-animation:uptocallmini 1.5s 0 ease-out infinite;animation:uptocallmini 1.5s 0 ease-out infinite}
a#calltrap-btn span{z-index:10;display:none;padding:10px;top:0;right:45px;width:150px;line-height:16px;border-radius:4px;box-shadow:5px 5px 8px #ccc;float:left;background:#fff;color:#000}
#calltrap-btn{display:inline-block;position:relative;width:45px;height:45px;line-height:45px;border-radius:100%;background:#1cb2ed url(https://vienkhoahocpccc.com/assets/imgs/icon-phone.png) center center no-repeat}
#calltrap-btn:hover{transform:scale(1.2);transition:all ease-in-out .3s;opacity:1;background-color:#ea918b}
#calltrap-btn span{display:none}
#calltrap-btn:hover span{display:block;float:left;margin-left:-177px}
#calltrap-btn::before{content:"";position:absolute;right:0;width:100%;height:100%;border-radius:inherit;background:rgba(11,158,75,0.374);box-shadow:0 0 10px rgba(225,15,15,0.645);animation:pulse 1s infinite}
@keyframes pulse {
0%{transform:scale(1.5);opacity:.5}
50%{transform:scale(1);opacity:.2}
100%{transform:scale(1.5);opacity:.5}
}
#messengerButton .mess-offline{background-color:#1cb2ed;margin-bottom:20px;border-radius:100%;width:45px;height:45px;line-height:45px;box-shadow:0 0 10px -2px rgba(0,0,0,.7)}
a#messengerButton span{z-index:10;display:none;padding:10px;top:0;right:45px;width:150px;line-height:16px;border-radius:4px;box-shadow:5px 5px 8px #ccc;float:left}
#messengerButton{display:inline-block;position:relative;width:45px;height:45px;line-height:45px;border-radius:100%;background:#1cb2ed url(https://vienkhoahocpccc.com/assets/imgs/icon-mess.png) center center no-repeat;margin-top:20px}
#messengerButton:hover{transform:scale(1.2);transition:all ease-in-out .3s;opacity:1;background-color:#ea918b}
#messengerButton span{display:none}
#messengerButton:hover span{display:block;float:left;margin-left:-177px}
#messengerButton::before{content:"";position:absolute;right:0;width:100%;height:100%;border-radius:inherit;background:rgba(41,206,243,0.374);box-shadow:0 0 10px rgba(108,6,6,0.645);animation:pulse2 1.1s infinite}
@keyframes pulse2 {
0%{transform:scale(1.5);opacity:.5}
50%{transform:scale(1);opacity:.2}
100%{transform:scale(1.5);opacity:.5}
}
.zalo-chat-widget{right:2px!important;top:50%;margin-bottom:0!important;bottom:unset!important}
#zaloButton .mess-offline{background-color:#1cb2ed;margin-bottom:20px;border-radius:100%;width:45px;height:45px;line-height:45px;box-shadow:0 0 10px -2px rgba(0,0,0,.7)}
a#zaloButton span{z-index:10;display:none;padding:10px;top:0;right:45px;width:150px;line-height:16px;border-radius:4px;box-shadow:5px 5px 8px #ccc;float:left}
#zaloButton{display:inline-block;position:relative;width:45px;height:45px;line-height:45px;border-radius:100%;background:#1cb2ed url(https://vienkhoahocpccc.com/assets/imgs/icon-zalo45.png) center center no-repeat;margin-top:20px}
#zaloButton:hover{transform:scale(1.2);transition:all ease-in-out .3s;opacity:1;background-color:#ea918b}
#zaloButton span{display:none}
#zaloButton:hover span{display:block;float:left;margin-left:-177px}
#zaloButton::before{content:"";position:absolute;right:0;width:100%;height:100%;border-radius:inherit;background:rgba(212,242,91,0.704);box-shadow:0 0 10px rgba(45,8,8,0.645);animation:pulse3 1s infinite}
@keyframes pulse3 {
0%{transform:scale(1.5);opacity:.5}
50%{transform:scale(1);opacity:.2}
100%{transform:scale(1.5);opacity:.5}
}
.back-to-top {
display: none;
position: fixed;
bottom: 120px;
right: 23px;
color: #fff;
border: none;
font-size: 22px;
cursor: pointer;
padding: 7px;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: #7d8080;
}
.back-to-top:hover {
background-color: #c0b8b8;
color: #141414;
}
#contacts{margin-top:20px}
/* ===== Contact page ===== */
.hp-contact-page{
margin-top:0 !important;
padding:46px 0 58px;
background:#f6f4f1;
color:#282520;
}
.hp-contact-page .container{
max-width:1180px;
}
.hp-contact-hero{
max-width:760px;
margin:0 auto 30px;
text-align:center;
}
.hp-contact-hero span{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 12px;
color:#a98250;
font-size:12px;
font-weight:800;
letter-spacing:.22em;
text-transform:uppercase;
}
.hp-contact-hero span:before,
.hp-contact-hero span:after{
content:"";
width:34px;
height:1px;
background:#d1b06b;
}
.hp-contact-hero h1{
margin:0 0 12px;
color:#183f4c;
font-size:36px;
line-height:1.2;
font-weight:800;
text-transform:uppercase;
}
.hp-contact-hero p{
margin:0;
color:#5c574f;
font-size:16px;
line-height:1.75;
}
.hp-contact-alert{
max-width:760px;
margin:0 auto 22px;
padding:14px 18px;
border-left:4px solid #b21726;
background:#fff;
color:#25313a;
box-shadow:0 12px 30px rgba(42,34,25,.08);
}
.hp-contact-panel{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
gap:26px;
align-items:stretch;
}
.hp-contact-panel:before,
.hp-contact-panel:after{
content:none !important;
display:none !important;
}
.hp-contact-form-card,
.hp-contact-info-card{
background:#fff;
border:1px solid rgba(53,47,41,.10);
border-radius:5px;
box-shadow:0 18px 44px rgba(42,34,25,.09);
}
.hp-contact-form-card{
padding:30px;
}
.hp-contact-info-card{
padding:30px;
background:
linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.90)),
radial-gradient(circle at 100% 0,rgba(209,176,107,.22),transparent 34%);
}
.hp-contact-card-head{
display:flex;
gap:16px;
align-items:flex-start;
margin:0 0 24px;
}
.hp-contact-icon{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border:1px solid rgba(169,130,80,.32);
background:#f4efe8;
color:#9a7447;
font-size:18px;
}
.hp-contact-card-head h2{
margin:0 0 6px;
color:#1f2933;
font-size:22px;
line-height:1.3;
font-weight:800;
}
.hp-contact-card-head p{
margin:0;
color:#6a645d;
font-size:14px;
line-height:1.6;
}
.hp-contact-fields{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px 18px;
}
.hp-contact-fields .form-group{
margin:0;
}
.hp-contact-wide,
.hp-contact-captcha{
grid-column:1 / -1;
}
.hp-contact-form label{
display:block;
margin:0 0 8px;
color:#312d28;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
}
.hp-contact-form .form-control{
height:46px;
border:1px solid #ded8cf;
border-radius:3px;
background:#fbfaf8;
box-shadow:none;
color:#252a31;
font-size:14px;
}
.hp-contact-form textarea.form-control{
height:auto;
min-height:156px;
resize:vertical;
}
.hp-contact-form .form-control:focus{
border-color:#a98250;
background:#fff;
box-shadow:0 0 0 3px rgba(169,130,80,.12);
}
.hp-contact-captcha-row{
display:flex;
align-items:center;
gap:12px;
max-width:320px;
}
.hp-contact-captcha-row span{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:46px;
padding:0 16px;
border:1px solid rgba(178,23,38,.22);
background:#fff7f2;
color:#b21726;
font-size:18px;
font-weight:800;
}
.hp-contact-submit{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:46px;
margin-top:22px;
padding:0 24px;
border:0;
border-radius:3px;
background:#0d5367;
color:#fff;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.hp-contact-submit:hover{
background:#b21726;
color:#fff;
transform:translateY(-1px);
box-shadow:0 12px 26px rgba(178,23,38,.22);
}
.hp-contact-office{
color:#3b3731;
font-size:16px;
line-height:1.8;
}
.hp-contact-office p{
margin:0 0 14px;
}
.hp-contact-office a{
color:#0d5367;
font-weight:800;
}
.hp-contact-map{
height:420px;
margin-top:28px;
overflow:hidden;
border:1px solid rgba(53,47,41,.12);
border-radius:5px;
box-shadow:0 18px 44px rgba(42,34,25,.10);
background:#e9ecef;
}
.hp-contact-map iframe{
display:block;
width:100%;
height:100%;
border:0;
}
.text-content{position:relative;border:1px solid #d3c8c8;border-radius:10px;margin-bottom:20px;padding:25px;box-shadow:0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.2);color:#222121}
.text-content-home{position:relative;border:1px solid #ece9e9;margin:0;padding:10px;color:#222121; border-radius: 10px; margin-top: 20px;}
.navbar-fixed{position:fixed;top:0;left:0;right:0;width:100%;z-index:10050}
.navbar-gradient{background:linear-gradient(to bottom,#40ac40,#062092)}
.go-category{font-weight:600}
.mt-5{margin-bottom:5px;text-align:center}
.testimonial-img{width:90px;border-radius:10px;border:6px solid #fff}
@media (max-width: 768px) {
.clients img{width:40%}
.back-to-top {
display: none;
position: fixed;
bottom: 62px;
right: 19px;
color: #fff;
border: none;
font-size: 22px;
cursor: pointer;
padding: 7px;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: #7d8080;
}
}
/* =============================
KAT DESIGN Theme
- A modern dark/nav + large hero + clean sections look.
- Implemented as overrides to avoid breaking existing markup.
============================= */
:root{
--hp-ink:#0b1b24;
--hp-text:#1d2730;
--hp-muted:#6b7280;
--hp-brand:#0c3c50; /* deep teal */
--hp-brand-2:#0a2f40;
--hp-accent:#d1b06b; /* warm gold */
--hp-surface:#ffffff;
--hp-soft:#f6f7f9;
--hp-border:rgba(17, 24, 39, 0.10);
--hp-shadow:0 14px 40px rgba(2, 8, 23, 0.12);
}
body{color:var(--hp-text);background:var(--hp-soft);}
/* HERO */
.t06-header-hero{
background-position:center center !important;
padding:96px 0 84px !important;
}
.t06-header-hero::before{background:rgba(4, 12, 18, 0.55) !important;}
.t06-header-quochuy{height:76px !important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));}
.t06-header-title{
font-size:38px !important;
letter-spacing:.14em !important;
font-weight:700 !important;
}
.t06-header-title-sep{opacity:.9;}
.t06-header-subtitle{opacity:.9;}
@media (max-width: 767px){
.t06-header-hero{padding:70px 0 60px !important;}
.t06-header-quochuy{height:52px !important;}
.t06-header-title{font-size:26px !important;letter-spacing:.10em !important;}
}
/* NAVBAR (dark, refined) */
#main-navbar{
background:rgba(12, 60, 80, 0.92) !important;
border:0 !important;
box-shadow:none !important;
margin-bottom:0 !important;
padding:6px 0 !important;
-webkit-backdrop-filter:saturate(140%) blur(10px);
backdrop-filter:saturate(140%) blur(10px);
}
#main-navbar.navbar-fixed{
background:rgba(12, 60, 80, 0.98) !important;
box-shadow:0 10px 30px rgba(2, 8, 23, 0.25) !important;
}
/* Keep compatibility with existing “scrolled” styles, but ensure our palette wins */
#main-navbar.scrolled{background:rgba(12, 60, 80, 0.98) !important;}
#main-navbar .nav > li > a{
background:transparent !important;
color:#fff !important;
border-radius:0 !important;
margin-top:0 !important;
padding:14px 10px !important;
font-weight:700 !important;
text-transform:uppercase;
letter-spacing:.08em;
}
#main-navbar .nav > li > a:hover,
#main-navbar .nav > li > a:focus{color:var(--hp-accent) !important;}
#main-navbar .nav > li.active > a,
#main-navbar .nav > li.open > a{
color:var(--hp-accent) !important;
box-shadow:none !important;
}
/* First “hamburger” item keeps minimal look */
#main-navbar .nav > li:first-child > a{color:#fff !important;opacity:.9;}
#main-navbar .nav > li:first-child > a:hover{opacity:1;color:var(--hp-accent) !important;}
/* Dropdown */
#main-navbar .dropdown-menu{
background:rgba(12, 60, 80, 0.98) !important;
border:1px solid rgba(255,255,255,0.10) !important;
border-radius:10px !important;
box-shadow:0 16px 40px rgba(2, 8, 23, 0.35) !important;
padding:8px 0 !important;
}
#main-navbar .dropdown-menu > li > a{
color:#fff !important;
padding:10px 16px !important;
font-weight:600;
letter-spacing:.02em;
}
#main-navbar .dropdown-menu > li > a:hover{background:rgba(255,255,255,0.06) !important;color:var(--hp-accent) !important;}
/* Navbar tools */
.t06-navbar-search-btn{border-color:rgba(255,255,255,0.65) !important;color:#fff !important;background:transparent !important;}
.t06-navbar-search-btn:hover{border-color:var(--hp-accent) !important;color:var(--hp-accent) !important;}
.t06-navbar-lang-btn{border-color:rgba(255,255,255,0.65) !important;color:#fff !important;background:transparent !important;}
.t06-navbar-lang-btn:hover{border-color:var(--hp-accent) !important;color:var(--hp-accent) !important;}
/* SECTION TITLES (centered with dividers) */
.t06-home-section-title{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin:34px 0 18px;
color:var(--hp-ink) !important;
font-weight:800;
text-transform:uppercase;
letter-spacing:.18em;
}
.t06-home-section-title:before,
.t06-home-section-title:after{
content:"";
height:1px;
background:rgba(17, 24, 39, 0.18);
flex:1 1 auto;
max-width:220px;
}
.t06-home-section-title i{color:var(--hp-accent);}
/* CONTENT SURFACES */
.text-content-home{
background:var(--hp-surface);
border:1px solid var(--hp-border) !important;
box-shadow:var(--hp-shadow);
}
/* HOME HERO cards */
.t06-home-hero-feature,
.t06-home-hero-side{border:1px solid var(--hp-border) !important;box-shadow:var(--hp-shadow);}
.t06-home-hero-feature-title{color:var(--hp-ink) !important;}
.t06-home-hero-side-title{color:var(--hp-ink) !important;}
/* PROJECT/NEWS GRID (card style) */
.home-news-thumb{margin-bottom:22px;}
.home-news-thumb a{display:block;text-decoration:none;}
.home-news-thumb img{
border-radius:14px;
box-shadow:0 14px 30px rgba(2, 8, 23, 0.10);
}
.home-news-thumb h4{
margin:12px 0 8px;
font-size:14px !important;
letter-spacing:.06em;
line-height:1.35;
color:var(--hp-ink) !important;
}
.home-news-thumb a:hover h4{color:var(--hp-brand) !important;}
/* FOOTER polish */
.footer-title{letter-spacing:.08em;text-transform:uppercase;}
.footer-top-links a:hover{color:var(--hp-accent) !important;}
/* ===== Home hero (bia.jpg) + center-logo navbar ===== */
.hp-hero{
position:relative;
height:100vh;
min-height:520px;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.hp-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.55) 100%);
}
/* Place navbar on top of hero */
body.hp-home #main-navbar,
body.hp-about #main-navbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:10050;
background:transparent !important;
box-shadow:none !important;
border:0 !important;
transition:background-color .35s ease, box-shadow .35s ease, transform .45s ease;
}
/* Scroll state (image 2) */
body.hp-home #main-navbar.scrolled,
body.hp-about #main-navbar.scrolled{
background:#0f4d66 !important;
box-shadow:0 10px 30px rgba(2, 8, 23, 0.25) !important;
}
body.hp-home #main-navbar.is-compact,
body.hp-about #main-navbar.is-compact{box-shadow:0 14px 30px rgba(2, 8, 23, 0.33) !important;}
body.hp-home #main-navbar.is-hidden,
body.hp-about #main-navbar.is-hidden{transform:translateY(-120%);}
/* Non-home pages: keep solid navbar */
body:not(.hp-home):not(.hp-about) #main-navbar{
background:#0f4d66 !important;
border:0 !important;
box-shadow:0 10px 30px rgba(2, 8, 23, 0.18) !important;
}
/* Make navbar content above overlay */
.hp-hero #main-navbar .container{position:relative;z-index:2;}
/* Desktop menu layout: left items | centered logo | right items */
.hp-navbar-layout{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
}
.hp-nav{
display:flex;
align-items:center;
gap:18px;
margin:0;
}
.hp-nav-left{justify-content:flex-end;flex:1 1 0;}
.hp-nav-right{justify-content:flex-start;flex:1 1 0;}
.hp-navbar-brand{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0;
margin:0 10px;
line-height:1;
}
.hp-navbar-brand img{
height:44px;
width:auto;
display:block;
filter:drop-shadow(0 8px 18px rgba(0,0,0,.25));
}
.hp-navbar-brand-mobile{
padding:0 !important;
height:auto !important;
margin:6px 0 0 8px !important;
}
.hp-navbar-brand-mobile img{height:34px;width:auto;display:block;}
/* Menu links like screenshot */
body.hp-home #main-navbar .nav > li > a,
body.hp-about #main-navbar .nav > li > a,
body:not(.hp-home):not(.hp-about) #main-navbar .nav > li > a{
color:#fff !important;
background:transparent !important;
font-size:12px !important;
font-weight:700 !important;
text-transform:uppercase;
letter-spacing:.12em;
padding:16px 0 !important;
}
body.hp-home #main-navbar .nav > li > a:hover,
body.hp-about #main-navbar .nav > li > a:hover,
body:not(.hp-home):not(.hp-about) #main-navbar .nav > li > a:hover{color:var(--hp-accent) !important;}
/* Remove old pill hover backgrounds on this navbar */
body.hp-home #main-navbar .nav > li.active > a,
body.hp-home #main-navbar .nav > li:hover > a,
body.hp-home #main-navbar .nav > li.open > a,
body.hp-about #main-navbar .nav > li.active > a,
body.hp-about #main-navbar .nav > li:hover > a,
body.hp-about #main-navbar .nav > li.open > a,
body:not(.hp-home):not(.hp-about) #main-navbar .nav > li.active > a,
body:not(.hp-home):not(.hp-about) #main-navbar .nav > li:hover > a,
body:not(.hp-home):not(.hp-about) #main-navbar .nav > li.open > a{
background:transparent !important;
box-shadow:none !important;
margin-top:0 !important;
}
/* Dropdown matches dark navbar */
#main-navbar .dropdown-menu{
background:#0f4d66 !important;
border:1px solid rgba(255,255,255,0.12) !important;
}
#main-navbar .dropdown-menu > li > a{color:#fff !important;}
#main-navbar .dropdown-menu > li > a:hover{background:rgba(255,255,255,0.08) !important;color:var(--hp-accent) !important;}
/* Hero text block */
.hp-hero-content{
position:relative;
z-index:1;
padding-top:58vh;
padding-bottom:110px;
color:#fff;
max-width:960px;
text-align:left;
}
.hp-hero-kicker{
color:rgba(255,255,255,0.85);
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
font-size:12px;
margin-bottom:14px;
}
.hp-hero-title{
margin:0 0 12px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
font-size:52px;
line-height:1.05;
}
.hp-hero-subtitle{
margin:0 0 18px;
max-width:720px;
color:rgba(255,255,255,0.88);
font-size:16px;
line-height:1.7;
}
.hp-hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
height:44px;
padding:0 18px;
border:1px solid rgba(255,255,255,0.75);
color:#fff;
text-decoration:none;
border-radius:2px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
background:transparent;
}
.hp-hero-btn:hover{border-color:var(--hp-accent);color:var(--hp-accent);text-decoration:none;}
/* Services section */
.hp-home-services{padding:26px 0 18px;}
.hp-home-services-grid{max-width:1200px;margin:0 auto;}
.hp-home-service-item{margin-bottom:24px;}
.hp-home-service-card{
position:relative;
display:block;
width:100%;
padding-top:70%;
border-radius:2px;
overflow:hidden;
background-size:cover;
background-position:center;
text-decoration:none;
}
.hp-home-service-card:before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.62) 100%);
transition:opacity .35s ease;
}
.hp-home-service-card span{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
color:#fff;
text-align:center;
text-transform:uppercase;
letter-spacing:.08em;
font-size:23px;
line-height:1.25;
width:82%;
z-index:1;
}
.hp-home-service-card:hover:before{opacity:.86;}
/* Footer detailed layout */
.footer-hero-content{padding:36px 15px 18px !important;}
.footer-detail-grid{
display:grid;
grid-template-columns:1.15fr 1fr 1fr;
gap:26px;
align-items:start;
margin-bottom:22px;
}
.footer-detail-brand{padding-top:8px;}
.footer-slogan{margin:6px 0 0;color:rgba(255,255,255,.85);font-size:15px;letter-spacing:.03em;}
.footer-detail-contact h3,
.footer-detail-links h3{
margin:0 0 10px;
color:#fff;
text-transform:uppercase;
letter-spacing:.08em;
font-size:16px;
}
.footer-detail-contact ul,
.footer-detail-links ul{list-style:none;margin:0;padding:0;}
.footer-detail-contact li,
.footer-detail-links li{margin-bottom:8px;color:#fff;}
.footer-detail-contact li i{width:18px;margin-right:7px;color:#f7d28e;}
.footer-detail-contact li span,
.footer-detail-contact li a,
.footer-detail-links li a{color:#fff;text-decoration:none;opacity:.96;}
.footer-detail-links li a:hover,
.footer-detail-contact li a:hover{color:#ffe0a6;text-decoration:none;}
.footer-top-links{padding-top:12px;border-top:1px solid rgba(255,255,255,.22);}
/* Hover/animation polish */
.hp-home-project-link .hp-home-project-text h3{transition:color .25s ease;}
.hp-home-project-link:hover .hp-home-project-text h3{color:#0f4d66;}
.hp-home-tabs li.active .hp-home-tab-btn,
.hp-home-tab-btn:hover{transition:all .25s ease;}
.hp-home-tab-panel{animation:hpFade .45s ease;}
@keyframes hpFade{from{opacity:.45;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (max-width: 991px){
.hp-navbar-layout{display:block;}
.hp-hero{min-height:420px;}
.hp-hero-content{padding-top:150px;padding-bottom:70px;}
.hp-hero-title{font-size:38px;}
.hp-hero-subtitle{font-size:15px;}
.footer-detail-grid{grid-template-columns:1fr;gap:20px;}
.footer-detail-brand{text-align:left !important;}
.hp-home-service-card span{font-size:19px;}
}
@media (max-width: 767px){
.hp-hero{min-height:360px;}
.hp-hero-content{padding-top:130px;padding-bottom:46px;}
.hp-hero-title{font-size:30px;}
.hp-hero-kicker{font-size:11px;letter-spacing:.12em;}
.hp-home-studio,.hp-home-projects,.hp-home-services{padding-top:22px;}
.hp-home-separator{margin-bottom:18px;}
.hp-home-lead{font-size:14px;line-height:1.65;}
.hp-home-project-text h3{font-size:17px;}
.hp-home-project-item{margin-bottom:20px;}
}
/* ===== About/Introduction page (gioi-thieu) ===== */
body.hp-about{background:#f7f5f1;}
body.hp-about #home-page{background:#f7f5f1;}
.hp-about-wrap{background:#f7f5f1;padding:54px 0 72px;}
.hp-about-wrap .container{max-width:1240px;}
.hp-about-section{padding:38px 0;}
.hp-about-section:first-child{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
align-items:stretch;
}
.hp-about-box{
position:relative;
background:linear-gradient(180deg,#fff 0%,#fbfaf8 100%);
border:1px solid rgba(169,130,80,.20);
border-radius:6px;
padding:34px 34px 32px;
box-shadow:0 20px 46px rgba(42,34,25,.09);
overflow:hidden;
}
.hp-about-box:before{
content:"";
position:absolute;
top:24px;
left:0;
width:4px;
height:72px;
background:#a98250;
}
.hp-about-box:after{
content:"";
position:absolute;
right:-42px;
top:-42px;
width:118px;
height:118px;
border:1px solid rgba(169,130,80,.18);
border-radius:50%;
}
.hp-about-box h3{
position:relative;
margin:0 0 16px;
color:#27231f;
text-transform:uppercase;
letter-spacing:.18em;
font-weight:800;
font-size:15px;
line-height:1.35;
}
.hp-about-box h3:after{
content:"";
display:block;
width:46px;
height:2px;
margin-top:12px;
background:#d1b06b;
}
.hp-about-box p{position:relative;margin:0;color:#4f4a44;line-height:1.9;font-size:15px;text-align:justify;}
.hp-about-mosaic{
grid-column:1/-1;
margin-top:12px;
}
.hp-mosaic-grid{
display:grid;
grid-template-columns:1.18fr 1fr 1fr;
gap:16px;
}
.hp-mosaic-item{
position:relative;
overflow:hidden;
border-radius:4px;
background:#eee9e1;
box-shadow:0 16px 36px rgba(42,34,25,.11);
}
.hp-mosaic-item:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.18));
pointer-events:none;
}
.hp-mosaic-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.hp-mosaic-item:hover img{transform:scale(1.035);}
.hp-mosaic-item.is-1{grid-column:1/2;grid-row:1/3;min-height:440px;}
.hp-mosaic-item.is-2,.hp-mosaic-item.is-3,.hp-mosaic-item.is-4,.hp-mosaic-item.is-5{min-height:212px;}
.hp-core-title,.hp-members-title{
position:relative;
text-align:center;
margin:0 0 38px;
color:#27231f;
font-family:"Times New Roman","Georgia","SVN-Gilroy",serif !important;
font-size:42px;
line-height:1.15;
font-weight:400;
font-style:italic;
letter-spacing:.01em;
text-transform:none;
text-rendering:optimizeLegibility;
}
.hp-core-title:after,.hp-members-title:after{
content:"";
display:block;
width:96px;
height:1px;
margin:18px auto 0;
background:linear-gradient(90deg,transparent,#8e6c43,#d1b06b,transparent);
}
.hp-members-title{
display:flex;
align-items:center;
justify-content:center;
gap:22px;
font-size:40px;
}
.hp-members-title:before,
.hp-members-title:after{
content:"";
display:block;
width:92px;
height:1px;
margin:0;
background:linear-gradient(90deg,transparent,rgba(169,130,80,.75));
}
.hp-members-title:after{
background:linear-gradient(90deg,rgba(169,130,80,.75),transparent);
}
.hp-script-title{
display:flex;
align-items:center;
justify-content:center;
min-height:92px;
margin-bottom:34px;
line-height:1;
}
.hp-script-title:before,
.hp-script-title:after{
content:none !important;
display:none !important;
}
.hp-script-title img{
display:block;
width:auto;
max-width:100%;
height:auto;
object-fit:contain;
}
.hp-core-title.hp-script-title img{max-width:330px;}
.hp-members-title.hp-script-title img{max-width:390px;}
.hp-core-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.hp-core-card{
position:relative;
min-height:190px;
background:#fff;
border:1px solid rgba(53,47,41,.12);
border-radius:4px;
padding:30px 28px 28px;
box-shadow:0 16px 36px rgba(42,34,25,.08);
transition:transform .25s ease,box-shadow .25s ease;
}
.hp-core-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(42,34,25,.13);}
.hp-core-icon{
width:46px;
height:46px;
border-radius:999px;
border:1px solid rgba(169,130,80,.38);
background:rgba(169,130,80,.08);
display:flex;
align-items:center;
justify-content:center;
margin:0 0 16px;
color:#9a7447;
font-size:18px;
}
.hp-core-card h4{text-align:left;margin:0 0 12px;color:#27231f;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;}
.hp-core-card p{margin:0;color:#4f4a44;line-height:1.78;font-size:14px;text-align:justify;}
.hp-member{
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:34px;
align-items:center;
max-width:1040px;
margin:0 auto 28px;
padding:22px;
background:#fff;
border:1px solid rgba(53,47,41,.10);
border-radius:4px;
box-shadow:0 18px 42px rgba(42,34,25,.08);
}
.hp-member.is-reverse{grid-template-columns:minmax(0,1fr) 330px;}
.hp-member-photo{position:relative;background:#e5e7eb;border-radius:4px;overflow:hidden;box-shadow:0 12px 28px rgba(42,34,25,.10);}
.hp-member-photo img{width:100%;height:330px;object-fit:cover;object-position:center top;display:block;}
.hp-member-body{padding:6px 10px;}
.hp-member-body h4{margin:0 0 8px;font-weight:800;color:#1f2933;font-size:21px;line-height:1.3;}
.hp-member-role{display:inline-flex;margin:0 0 16px;padding:5px 10px;background:#f2eee8;color:#9a7447;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
.hp-member-body p{position:relative;margin:0;color:#4f4a44;line-height:1.82;font-size:15px;}
.hp-member-body p:before{
content:"";
display:block;
width:46px;
height:2px;
margin:0 0 14px;
background:#d1b06b;
}
/* ===== Service page (dich-vu) ===== */
.hp-service-page{
background:#f7f5f2;
color:#2b2926;
}
.hp-service-page .container{
max-width:1160px;
}
.hp-service-intro{
padding:78px 0 54px;
background:
linear-gradient(120deg,rgba(14,66,79,.93),rgba(44,37,31,.88)),
url('../assets/imgs/gioi_thieu/bia.jpg') center/cover no-repeat;
color:#fff;
}
.hp-service-eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
margin:0 0 18px;
color:#d8b36f;
font-size:13px;
font-weight:800;
letter-spacing:.22em;
text-transform:uppercase;
}
.hp-service-eyebrow:before{
content:"";
width:42px;
height:1px;
background:#d8b36f;
}
.hp-service-intro h1{
max-width:780px;
margin:0 0 22px;
color:#fff;
font-size:42px;
line-height:1.18;
font-weight:800;
text-transform:uppercase;
}
.hp-service-intro p{
max-width:900px;
margin:0;
color:rgba(255,255,255,.9);
font-size:17px;
line-height:1.9;
text-align:justify;
}
.hp-service-principles{
padding:64px 0 34px;
}
.hp-service-principles .container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}
.hp-service-principles .container:before,
.hp-service-principles .container:after{
content:none !important;
display:none !important;
}
.hp-service-principle{
position:relative;
min-height:440px;
padding:34px 30px 32px;
background:#fff;
border:1px solid rgba(53,47,41,.10);
border-radius:4px;
box-shadow:0 20px 45px rgba(42,34,25,.08);
}
.hp-service-principle span{
display:block;
margin:0 0 18px;
color:#b21726;
font-size:38px;
line-height:1;
font-weight:800;
letter-spacing:.02em;
}
.hp-service-principle h2{
margin:0 0 18px;
color:#1f2933;
font-size:19px;
line-height:1.45;
font-weight:800;
text-transform:uppercase;
}
.hp-service-principle h2:after{
content:"";
display:block;
width:54px;
height:2px;
margin:18px 0 0;
background:#d1b06b;
}
.hp-service-principle p{
margin:0;
color:#4f4a44;
font-size:15px;
line-height:1.82;
text-align:justify;
}
.hp-service-strengths{
padding:38px 0 78px;
}
.hp-service-statement{
display:grid;
grid-template-columns:92px minmax(0,1fr);
gap:26px;
align-items:center;
margin:0 0 36px;
padding:30px 34px;
background:#fff;
border-left:4px solid #b21726;
box-shadow:0 16px 40px rgba(42,34,25,.08);
}
.hp-service-statement span{
width:74px;
height:74px;
border-radius:50%;
background:
linear-gradient(135deg,transparent 43%,#d1b06b 44%,#d1b06b 56%,transparent 57%),
linear-gradient(45deg,transparent 43%,#b21726 44%,#b21726 56%,transparent 57%);
opacity:.9;
}
.hp-service-statement p{
margin:0;
color:#34302b;
font-size:17px;
line-height:1.85;
text-align:justify;
}
.hp-service-strength-grid{
display:grid;
grid-template-columns:1fr;
gap:24px;
}
.hp-service-strength-card{
display:grid;
grid-template-columns:360px minmax(0,1fr);
gap:34px;
align-items:center;
padding:24px;
background:#fff;
border:1px solid rgba(53,47,41,.10);
border-radius:4px;
box-shadow:0 18px 42px rgba(42,34,25,.08);
}
.hp-service-strength-card:nth-child(even){
grid-template-columns:minmax(0,1fr) 360px;
}
.hp-service-strength-card:nth-child(even) figure{
grid-column:2;
grid-row:1;
}
.hp-service-strength-card:nth-child(even) div{
grid-column:1;
grid-row:1;
}
.hp-service-strength-card figure{
margin:0;
overflow:hidden;
border-radius:4px;
background:#ede8e1;
}
.hp-service-strength-card img{
display:block;
width:100%;
height:250px;
object-fit:cover;
transition:transform .4s ease;
}
.hp-service-strength-card:hover img{
transform:scale(1.035);
}
.hp-service-strength-card h3{
margin:0 0 14px;
color:#1f2933;
font-size:22px;
line-height:1.35;
font-weight:800;
text-transform:uppercase;
}
.hp-service-strength-card p{
margin:0;
color:#4f4a44;
font-size:15px;
line-height:1.82;
text-align:justify;
}
@media (max-width: 991px){
.hp-about-wrap{padding:30px 0 48px;}
.hp-about-section:first-child,.hp-core-grid{grid-template-columns:1fr;}
.hp-mosaic-grid{grid-template-columns:1fr 1fr;}
.hp-mosaic-item.is-1{grid-column:1/3;grid-row:auto;min-height:300px;}
.hp-mosaic-item.is-2,.hp-mosaic-item.is-3,.hp-mosaic-item.is-4,.hp-mosaic-item.is-5{grid-column:auto;grid-row:auto;min-height:180px;}
.hp-member,.hp-member.is-reverse{grid-template-columns:260px minmax(0,1fr);}
.hp-member.is-reverse .hp-member-photo{grid-column:1;grid-row:1;}
.hp-member.is-reverse .hp-member-body{grid-column:2;grid-row:1;}
.hp-member-photo img{height:280px;}
.hp-service-principles .container{grid-template-columns:1fr;}
.hp-service-principle{min-height:0;}
.hp-service-strength-card,
.hp-service-strength-card:nth-child(even){grid-template-columns:300px minmax(0,1fr);}
.hp-service-strength-card:nth-child(even) figure{grid-column:1;grid-row:1;}
.hp-service-strength-card:nth-child(even) div{grid-column:2;grid-row:1;}
.hp-service-strength-card img{height:230px;}
.hp-contact-panel{grid-template-columns:1fr;}
}
@media (max-width: 767px){
.hp-about-section{padding:26px 0;}
.hp-about-box{padding:22px 20px;}
.hp-core-title,.hp-members-title{font-size:31px;margin-bottom:24px;}
.hp-script-title{min-height:74px;margin-bottom:22px;}
.hp-core-title.hp-script-title img{max-width:260px;}
.hp-members-title.hp-script-title img{max-width:300px;}
.hp-members-title{gap:12px;}
.hp-members-title:before,.hp-members-title:after{width:38px;}
.hp-mosaic-grid{grid-template-columns:1fr;}
.hp-mosaic-item,.hp-mosaic-item.is-1,.hp-mosaic-item.is-2,.hp-mosaic-item.is-3,.hp-mosaic-item.is-4,.hp-mosaic-item.is-5{grid-column:auto;grid-row:auto;min-height:220px;}
.hp-member,.hp-member.is-reverse{grid-template-columns:1fr;gap:18px;padding:16px;}
.hp-member.is-reverse .hp-member-photo,.hp-member.is-reverse .hp-member-body{grid-column:auto;grid-row:auto;}
.hp-member-photo img{height:auto;}
.hp-member-body{padding:0;}
.hp-service-intro{padding:52px 0 38px;}
.hp-service-intro h1{font-size:28px;}
.hp-service-intro p,.hp-service-statement p{font-size:15px;line-height:1.75;}
.hp-service-principles{padding:36px 0 20px;}
.hp-service-principle{padding:26px 20px;}
.hp-service-principle span{font-size:32px;}
.hp-service-statement{grid-template-columns:1fr;gap:16px;padding:24px 20px;}
.hp-service-strengths{padding:24px 0 48px;}
.hp-service-strength-card,
.hp-service-strength-card:nth-child(even){grid-template-columns:1fr;gap:18px;padding:16px;}
.hp-service-strength-card:nth-child(even) figure,
.hp-service-strength-card:nth-child(even) div{grid-column:auto;grid-row:auto;}
.hp-service-strength-card img{height:auto;}
.hp-service-strength-card h3{font-size:18px;}
.hp-contact-page{padding:34px 0 44px;}
.hp-contact-hero h1{font-size:27px;}
.hp-contact-hero p{font-size:15px;}
.hp-contact-form-card,
.hp-contact-info-card{padding:22px 18px;}
.hp-contact-fields{grid-template-columns:1fr;}
.hp-contact-captcha-row{max-width:none;}
.hp-contact-submit{width:100%;}
.hp-contact-map{height:330px;margin-top:22px;}
}
.section-title-bold-center span,.section-title-bold span {
border: 2px solid #3498db;
padding: .4em 1.5em;
border-radius: 8px;
}
.section-title {
position: relative;
-js-display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
padding-bottom: 30px;
text-align: center;
margin-top: 60px;
align-content: flex-start;
justify-content: center;
}
.section-title span {
text-transform: uppercase;
color:rgb(226, 7, 7);
font-weight: 600;
}
.section-title-main::before{content:'';width:20rem;height:1.5px;background:#3498db;display:inline-block}
.section-title-main::after{content:'';width:20rem;height:1.5px;background:#3498db;display:inline-block}
.section-title-main::before{margin:0 10px 7px 0}
.section-title-main::after{margin:0 0 7px 10px}
/* Home: section title style like "MULTIMEDIA" (icon + bold red text) */
#home-page .t06-home-section-title{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
margin: 30px 0 16px;
padding: 0;
color: #d83c3c;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
font-size: 20px;
line-height: 1.2;
}
#home-page .t06-home-section-title i{font-size:22px;}
#home-page .t06-home-section-title span{color: #ca0808; font-weight: inherit;}
/* Home: website-links box title left-aligned */
#home-page .t06-website-links-title{ text-align:left; }
#home-page .t06-website-links-underline{ margin:0 0 14px 0; }
.testimonial-img{transition:transform .3s ease-in-out;transform-origin:center center}
.testimonial-img:hover{transform:scale(1.2)}
/* Floating contact/chat button (bottom-right) */
.site-contact-chat {
position: fixed;
right: 18px;
bottom: 58px;
z-index: 10005; /* above overlay/navbar */
display: flex;
align-items: center;
gap: 10px;
pointer-events: auto;
}
.contact-chat-label {
display: inline-block;
background: #ffffff;
color: #d83c3c;
padding: 8px 12px;
border-radius: 20px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
white-space: nowrap;
}
.contact-chat-btn {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 50%;
border: none;
background: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.14);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.contact-chat-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(216,60,60,0.12); }
.chat-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.chat-pulse {
position: absolute;
right: 6px;
top: 6px;
width: 12px;
height: 12px;
background: #ffb000;
border-radius: 50%;
box-shadow: 0 0 0 rgba(255,176,0,0.6);
animation: chatPulse 2s infinite;
}
@keyframes chatPulse {
0% { box-shadow: 0 0 0 0 rgba(255,176,0,0.6); }
70% { box-shadow: 0 0 0 10px rgba(255,176,0,0); }
100% { box-shadow: 0 0 0 0 rgba(255,176,0,0); }
}
@media (max-width: 480px) {
.site-contact-chat { right: 12px; bottom: 12px; gap: 8px; }
.contact-chat-label { display: none; } /* hide label on small screens to save space */
.contact-chat-btn { width: 50px; height: 50px; }
.chat-avatar { width: 40px; height: 40px; }
}
/* Footer hero styles (centered emblem + title) */
.footer-hero {
position: relative;
background: #b21726; /* main red */
color: #fff;
padding: 8px 0 8px 0;
overflow: hidden;
}
.footer-hero-bg {
/* subtle darker band at bottom of hero */
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.6) 56%, rgba(0,0,0,0.8) 70%);
opacity: 0.8;
pointer-events: none;
}
.footer-hero-content { position: relative; z-index: 2; padding: 30px 15px; }
.footer-emblem img { width: auto; height: 60px; object-fit: contain; border-radius: 8px; background: transparent; display: inline-block; }
.footer-title { margin-top: 14px; margin-bottom: 8px; font-size: 18px; font-weight:700; text-transform:uppercase; }
.footer-subtitle { margin-bottom: 6px; opacity: .95; }
.footer-contacts p { margin: 4px 0; }
.footer-contact,
.footer-contact a {
color: #fff;
}
.hero-bottom { background: -webkit-gradient(linear, left top, left bottom, from(#045158), to(#03151c)); color: #fff; padding: 14px 0; }
.hero-bottom p { margin: 0; font-size: 14px; }
@media (max-width: 768px) {
.footer-emblem img { width: 72px; height: 72px; }
.footer-title { font-size: 16px; }
}
/* Top links that sit on the hero background */
.footer-top-links { color: #fff; text-align: center; margin-bottom: 12px; font-weight:600; }
.footer-top-links a { color: #fff; text-decoration: none; margin: 0 6px; opacity: 0.95; }
.footer-top-links a:hover { text-decoration: underline; }
.footer-top-links .sep { color: rgba(255,255,255,0.6); margin: 0 6px; }
/* adjust hero background behavior and emblem size */
.footer-hero { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.footer-quochuy { width: 110px; height: auto; display: block; margin: 0 auto 10px; }
/* Ensure desktop dropdown menus sit above other content and accept clicks */
.navbar .dropdown-menu {
z-index: 10001; /* above off-canvas and overlays */
pointer-events: auto;
}
/* Desktop navbar: hover opens submenu (via .open added by JS), hide when mouse leaves */
@media (min-width: 768px) {
#navbar .dropdown.open > .dropdown-menu { display: block; }
/* Bootstrap default adds a small margin-top that can create a hover gap */
#main-navbar .dropdown-menu { margin-top: 0; }
}
.testimonials .testimonial-wrap{padding-left:10px}
.testimonials .testimonial-item{box-sizing:content-box;padding:20px 20px 30px 60px;margin:25px 5px;min-height:250px;box-shadow:0 2px 12px rgba(0,0,0,0.358);position:relative;background:#fff}
.testimonials .testimonial-item .testimonial-img{width:80px;border-radius:10px;border:5px solid #e7e4317a;position:absolute;left:-30px}
.testimonials .testimonial-item h3{font-size:20px;font-weight:700;margin:10px 0 5px;color:#111}
.testimonials .testimonial-item h4{font-size:16px;color:#999;margin:0}
.testimonials .testimonial-item .quote-icon-left,.testimonials .testimonial-item .quote-icon-right{color:#e1f0fa;font-size:26px}
.testimonials .testimonial-item .quote-icon-left{display:inline-block;left:-5px;position:relative}
.testimonials .testimonial-item .quote-icon-right{display:inline-block;right:-5px;position:relative;top:10px}
.testimonials .testimonial-item p{font-style:italic;margin:15px auto;text-align:justify}
.testimonials .owl-nav,.testimonials .owl-dots{margin-top:5px;text-align:center}
.testimonials .owl-dot{display:inline-block;margin:0 5px;width:12px;height:12px;border-radius:50%;background-color:#ddd!important}
.testimonials .owl-dot.active{background-color:#3498db!important}
img{vertical-align:middle;border-style:none}
.font_30{font-size:30px}
.font_20{font-size:20px}
.font_18{font-size:18px}
.white{color:#f0e9e9}
.dropdown-more:hover .dropdown-menu,.dropdown-more.hover .dropdown-menu{display:block}
.dropdown-more .dropdown-menu{display:none;position:absolute;background-color:rgba(255,255,255,0);border:none;box-shadow:none;transition-delay:.5s}
.dropdown-more:hover .dropdown-menu{transition-delay:0}
.dropdown-more .dropdown-menu a{color:transparent;padding:7px;display:block}
.dropdown-more .dropdown-menu a:hover{background-color:red;color:#d80a0a}
.border_top{border-top:1px solid #ddddddad;margin-bottom:15px}
.top-5{margin-top:5px}
#hover-effect{margin-bottom:5px;padding:8px;min-width:150px}
#hover-effect-cat{margin-bottom:5px;margin-left:5px;margin-right:5px;padding:12px 12px 10px 4px;color:#1766bc}
.hover-top{margin-left:2px;margin-right:2px;color:#f4f7eb}
.hover-top:hover{margin-left:2px;margin-right:2px;color:#90c626}
.item-count{position:absolute;top:0;right:0;margin-top:-10px;margin-right:0}
.sumOfItems{color:#e40707}
.testimonial-item:hover{background-color:rgba(182,226,245,0.645)}
.testimonial-item:hover h3,.testimonial-item:hover h4,.testimonial-item:hover p{color:#db1010;transition:color .3s ease-in-out}
.testimonial-item{transition:background-color .3s ease-in-out}
.slider-item-wrapper {
position: relative;
}
.slider-item-wrapper img {
width: 100%;
height: auto;
}
.slider-caption {
position: absolute;
top: 50%;
right: 19%;
transform: translateY(-50%);
/* background: rgba(0, 0, 0, 0.2); */
color: #0e0d0d;
padding: 20px;
max-width: 50%;
text-align: left;
font-size:20px
}
/* Homepage sections cloned from live layout */
.hp-home-studio,
.hp-home-projects{padding:30px 0 10px;}
.hp-home-separator{
position:relative;
text-align:center;
margin:0 0 24px;
}
.hp-home-separator:before{
content:"";
position:absolute;
left:0;
right:0;
top:50%;
height:1px;
background:#d7d7d7;
}
.hp-home-separator span{
position:relative;
z-index:1;
display:inline-block;
padding:0 14px;
background:#fff;
color:#393939;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:700;
font-size:22px;
}
.hp-home-studio-row{max-width:1200px;margin:0 auto;}
.hp-home-lead{
font-size:15px;
color:#4a4a4a;
line-height:1.75;
text-align:justify;
}
.hp-home-about-wrap{margin-top:20px;}
.hp-home-about-btn{
display:inline-block;
min-width:160px;
border:1px solid #000;
background:#000;
color:#fff;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:700;
padding:10px 22px;
text-decoration:none;
}
.hp-home-about-btn:hover{color:#fff;opacity:.9;text-decoration:none;}
.hp-home-video-wrap{
position:relative;
padding-top:56.25%;
border-radius:2px;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,.14);
}
.hp-home-video-wrap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0;
}
.hp-home-video-poster{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
border:0;
padding:0;
background:#111;
cursor:pointer;
}
.hp-home-video-poster img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.hp-home-video-shade{
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.28));
}
.hp-home-video-play{
position:absolute;
left:50%;
top:50%;
width:74px;
height:52px;
border-radius:15px;
background:#ff0033;
transform:translate(-50%,-50%);
box-shadow:0 10px 28px rgba(0,0,0,.28);
transition:transform .18s ease,background .18s ease;
}
.hp-home-video-play:after{
content:"";
position:absolute;
left:30px;
top:16px;
border-style:solid;
border-width:10px 0 10px 17px;
border-color:transparent transparent transparent #fff;
}
.hp-home-video-poster:hover .hp-home-video-play,
.hp-home-video-poster:focus .hp-home-video-play{
background:#e6002e;
transform:translate(-50%,-50%) scale(1.05);
}
.hp-home-video-poster:focus{outline:2px solid #a98250;outline-offset:3px;}
.hp-home-tabs{
list-style:none;
margin:0 0 24px;
padding:0;
display:flex;
justify-content:center;
align-items:center;
gap:18px;
flex-wrap:wrap;
}
.hp-home-tab-btn{
border:0;
background:transparent;
color:#3d3d3d;
text-transform:uppercase;
letter-spacing:.11em;
font-size:13px;
font-weight:700;
padding:6px 2px;
}
.hp-home-tabs li.active .hp-home-tab-btn{
color:#000;
border-bottom:2px solid #0f4d66;
}
.hp-home-tab-panel{display:none;}
.hp-home-tab-panel.active{display:block;}
.hp-home-project-grid{max-width:1200px;margin:0 auto;}
.hp-home-project-item{margin-bottom:28px;}
.hp-home-project-link{display:block;text-decoration:none;color:#111;}
.hp-home-project-image{
position:relative;
width:100%;
padding-top:56.25%;
overflow:hidden;
border-radius:2px;
}
.hp-home-project-image img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s ease;
}
.hp-home-project-link:hover .hp-home-project-image img{transform:scale(1.04);}
.hp-home-project-text{padding:12px 8px 8px;}
.hp-home-project-cat{
margin:0 0 8px;
font-size:11px;
text-transform:uppercase;
letter-spacing:.18em;
color:#6a6a6a;
font-weight:700;
}
.hp-home-project-text h3{
margin:0;
color:#151515;
font-size:21px;
line-height:1.4;
font-weight:700;
}
@media (max-width: 991px){
.hp-home-separator span{font-size:18px;}
.hp-home-project-text h3{font-size:18px;}
.hp-home-tabs{gap:10px;}
}
.kiem-dinh-container {
max-width: 600px;
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
font-family: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
color: #333;
text-align: left;
margin: 0 auto;
}
.title {
color: #d80000;
font-size: 25px;
font-weight: bold;
margin-bottom: 20px;
border-bottom: 2px solid #007bff;
display: inline-block;
padding-bottom: 4px;
}
.kiem-dinh-list {
list-style: none;
padding-left: 0;
margin-bottom: 25px;
}
.kiem-dinh-list li {
font-size: 16px;
margin-bottom: 12px;
color: #000;
}
.check-icon {
color: red;
font-weight: bold;
margin-right: 10px;
font-size: 20px;
}
.check-icon-blue {
color: blue;
font-weight: bold;
margin-right: 10px;
font-size: 18px;
}
.btn-nop-ho-so {
display: inline-block;
background: linear-gradient(to right, #ff3c00, #ffa500);
color: #fff;
padding: 12px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 6px;
margin-bottom: 15px;
transition: background 0.3s;
}
.btn-nop-ho-so:hover {
background: linear-gradient(to right, #e03500, #e69500);
}
.arrow {
font-size: 18px;
margin-left: 5px;
}
.info {
font-size: 13px;
color: #444;
}
/* Home page editorial layout */
body.hp-home{
background:#fff;
color:#27231f;
}
#home-page.container{
width:100%;
max-width:none;
}
body.hp-home #main-navbar.scrolled{
background:rgba(34,30,25,.94) !important;
box-shadow:0 8px 24px rgba(16,13,10,.18) !important;
backdrop-filter:blur(12px);
}
@media (min-width: 992px){
body.hp-home #main-navbar > .container{
width:100%;
max-width:none;
}
body.hp-home .hp-navbar-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);
align-items:center;
width:100%;
height:58px;
gap:0;
}
body.hp-home .hp-navbar-brand{
grid-column:2;
grid-row:1;
justify-self:center;
margin:0;
transform:none;
}
body.hp-home .hp-navbar-brand img{
height:58px;
}
body.hp-home .hp-nav{
min-width:0;
gap:25px;
}
body.hp-home .hp-nav-left{
grid-column:1;
grid-row:1;
justify-content:flex-end;
margin:0;
}
body.hp-home .hp-nav-right{
grid-column:3;
grid-row:1;
justify-content:flex-start;
margin:0;
}
body.hp-home #main-navbar .nav > li > a{
font-size:13px !important;
letter-spacing:.1em;
font-family:"SVN-Gilroy-Bold",sans-serif !important;
font-weight:400 !important;
}
}
body.hp-home .hp-hero-overlay{
background:linear-gradient(90deg,rgba(18,16,13,.72) 0%,rgba(18,16,13,.3) 58%,rgba(18,16,13,.08) 100%),
linear-gradient(0deg,rgba(18,16,13,.35),transparent 42%);
}
body.hp-home .hp-hero-kicker{
color:#e1c49a;
}
body.hp-home .hp-hero-btn{
border-color:#c9a777;
background:#a98250;
color:#fff;
transition:background-color .2s ease,border-color .2s ease;
}
body.hp-home .hp-hero-btn:hover{
background:#8e6c43;
border-color:#e1c49a;
color:#fff;
}
#home-page .hp-home-studio,
#home-page .hp-home-projects,
#home-page .hp-home-services{
padding:58px 0 28px;
}
#home-page .hp-home-separator{
margin:0 0 34px;
}
#home-page .hp-home-separator:before{
background:#d8d2ca;
}
#home-page .hp-home-separator span{
padding:14px 32px;
border:1px solid #6a6258;
background:#fff;
color:#332e28;
font-size:18px;
letter-spacing:.16em;
}
#home-page .hp-home-studio-row{
max-width:1120px;
}
#home-page .hp-home-lead{
color:#5e5953;
font-size:16px;
line-height:1.85;
}
#home-page .hp-home-about-btn{
border:1px solid #a98250;
background:#a98250;
letter-spacing:.1em;
transition:background-color .2s ease,border-color .2s ease;
}
#home-page .hp-home-about-btn:hover{
background:#8e6c43;
border-color:#8e6c43;
}
#home-page .hp-home-video-wrap{
box-shadow:0 16px 38px rgba(42,34,25,.13);
}
#home-page .hp-home-tabs{
gap:26px;
margin:-4px 0 30px;
padding:12px 16px;
background:repeating-linear-gradient(135deg,#f7f5f1 0,#f7f5f1 4px,#fff 4px,#fff 8px);
}
#home-page .hp-home-tab-btn{
color:#6f6961;
letter-spacing:.09em;
transition:color .2s ease;
}
#home-page .hp-home-tabs li.active .hp-home-tab-btn,
#home-page .hp-home-tab-btn:hover{
color:#9a7447;
}
#home-page .hp-home-tabs li.active .hp-home-tab-btn{
border-bottom-color:#a98250;
}
#home-page .hp-home-project-grid{
max-width:none;
margin:0;
}
#home-page .hp-home-project-item{
margin-bottom:34px;
}
#home-page .hp-home-project-image{
padding-top:56.25%;
background:#eee9e1;
}
#home-page .hp-home-project-image img{
transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
#home-page .hp-home-project-link:hover .hp-home-project-image img{
transform:scale(1.035);
}
#home-page .hp-home-project-text{
min-height:82px;
padding:14px 14px 12px;
background:repeating-linear-gradient(135deg,#f8f7f5 0,#f8f7f5 5px,#f4f3f1 5px,#f4f3f1 10px);
}
#home-page .hp-home-project-cat{
color:#9a7447;
font-size:10px;
letter-spacing:.2em;
}
#home-page .hp-home-project-text h3{
color:#302c27;
font-size:19px;
line-height:1.45;
}
#home-page .hp-home-project-link:hover .hp-home-project-text h3{
color:#9a7447;
}
#home-page .hp-home-services-grid{
max-width:1260px;
}
#home-page .hp-home-service-item{
padding-left:18px;
padding-right:18px;
margin-bottom:34px;
}
#home-page .hp-home-service-card{
padding-top:74%;
border-radius:4px;
box-shadow:0 18px 42px rgba(42,34,25,.14);
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,filter .45s ease;
}
#home-page .hp-home-service-card:before{
background:
linear-gradient(180deg,rgba(12,12,12,.06) 0%,rgba(12,12,12,.30) 46%,rgba(12,12,12,.66) 100%),
radial-gradient(circle at center,rgba(255,255,255,.08),rgba(0,0,0,.18) 72%);
}
#home-page .hp-home-service-card:after{
content:"";
position:absolute;
left:28px;
right:28px;
bottom:28px;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
z-index:1;
transform:scaleX(.72);
transform-origin:center;
transition:transform .35s ease,opacity .35s ease;
opacity:.72;
}
#home-page .hp-home-service-card span{
top:52%;
width:88%;
font-size:22px;
line-height:1.35;
letter-spacing:.18em;
font-weight:800;
text-shadow:0 2px 12px rgba(0,0,0,.48);
}
#home-page .hp-home-service-card span:before,
#home-page .hp-home-service-card span:after{
content:"";
display:block;
width:42px;
height:1px;
margin:0 auto 14px;
background:rgba(255,255,255,.82);
}
#home-page .hp-home-service-card span:after{
margin:14px auto 0;
width:30px;
background:#d1b06b;
}
#home-page .hp-home-service-card:hover{
transform:translateY(-6px);
box-shadow:0 26px 56px rgba(42,34,25,.20);
filter:saturate(1.04);
}
#home-page .hp-home-service-card:hover:before{opacity:.92;}
#home-page .hp-home-service-card:hover:after{transform:scaleX(1);opacity:1;}
@media (max-width: 991px){
#home-page .hp-home-services-grid{max-width:760px;}
#home-page .hp-home-service-card{padding-top:68%;}
#home-page .hp-home-service-card span{font-size:20px;}
}
#home-page .hp-home-featured-projects{
padding:42px 0 24px;
}
#home-page .hp-home-featured-projects .hp-home-separator{
margin-bottom:28px;
}
#home-page .hp-home-featured-projects .hp-home-separator span{
color:#b32020;
}
#home-page .hp-home-featured-grid{
max-width:none;
margin:0;
}
#home-page .hp-home-featured-item{
margin-bottom:24px;
}
#home-page .hp-home-featured-card{
display:block;
color:#302c27;
text-decoration:none;
}
#home-page .hp-home-featured-image{
position:relative;
width:100%;
padding-top:40%;
overflow:hidden;
border-radius:5px;
background:#eee9e1;
}
#home-page .hp-home-featured-image img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
transition:transform .45s ease;
}
#home-page .hp-home-featured-card:hover .hp-home-featured-image img{
transform:scale(1.035);
}
#home-page .hp-home-featured-card h3{
margin:10px 0 0;
color:#302c27;
font-size:14px;
line-height:1.45;
font-weight:700;
text-transform:uppercase;
}
#home-page .hp-home-featured-card:hover h3{
color:#9a7447;
}
#home-page .hp-drive-error{
max-width:1200px;
margin:0 auto 20px;
}
.hp-partners-strip{
padding:48px 0 22px;
background:#fff;
}
.hp-partners-inner{
max-width:1200px;
}
.hp-partners-carousel{
padding-bottom:4px;
}
.hp-partner-item{
height:150px;
display:flex;
align-items:center;
justify-content:center;
}
.hp-partner-item a{
display:flex;
width:100%;
height:100%;
align-items:center;
justify-content:center;
}
.hp-partner-item img{
display:block;
width:auto;
max-width:210px;
height:auto;
max-height:152px;
object-fit:contain;
filter:grayscale(1);
mix-blend-mode:multiply;
opacity:.9;
transition:filter .2s ease,opacity .2s ease;
}
.hp-partner-item a:hover img{
filter:grayscale(0);
opacity:1;
}
.hp-partners-carousel .owl-dots{
display:flex;
justify-content:center;
gap:7px;
margin-top:18px;
}
.hp-partners-carousel .owl-dot{
border:0;
background:transparent;
padding:3px;
line-height:0;
}
.hp-partners-carousel .owl-dot span{
display:block;
width:8px;
height:8px;
margin:0;
border:1px solid #777;
border-radius:0;
background:transparent;
}
.hp-partners-carousel .owl-dot.active span{
border-color:#27231f;
background:#27231f;
}
.hp-site-footer{
width:100%;
overflow:hidden;
border-top:1px solid rgba(209,176,107,.35);
background:
linear-gradient(135deg, rgba(10,36,48,.98), rgba(7,19,26,.98)),
radial-gradient(circle at 18% 12%, rgba(209,176,107,.18), transparent 30%);
color:#f7f1e8;
}
.hp-site-footer-inner{
position:relative;
display:flex;
flex-direction:column;
gap:26px;
max-width:1200px;
padding-top:38px;
padding-bottom:18px;
}
.hp-site-footer-inner:before{
content:"";
position:absolute;
top:0;
left:15px;
right:15px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(209,176,107,.72), transparent);
}
.hp-site-footer-brand{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
}
.hp-site-footer-logo{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:104px;
min-height:72px;
padding:10px 14px;
border:1px solid rgba(255,255,255,.16);
/* background:rgba(255,255,255,.94); */
text-decoration:none;
box-shadow:0 16px 36px rgba(0,0,0,.20);
}
.hp-site-footer-logo img{
display:block;
width:100%;
max-height:58px;
object-fit:contain;
}
.hp-site-footer-brand > div{
flex:1 1 auto;
min-width:0;
text-align:right;
}
.hp-site-footer-brand strong{
display:block;
color:#fff;
font-size:30px;
line-height:1.1;
font-weight:800;
letter-spacing:.16em;
}
.hp-site-footer-brand span{
display:block;
margin-top:8px;
color:rgba(247,241,232,.74);
font-size:14px;
line-height:1.6;
letter-spacing:.03em;
}
.hp-site-footer-item{
text-align:center;
font-size:12px;
line-height:1.65;
}
.hp-site-footer-info{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.hp-site-footer-card{
display:flex;
align-items:flex-start;
gap:14px;
min-height:118px;
padding:22px;
border:1px solid rgba(255,255,255,.13);
background:rgba(255,255,255,.06);
box-shadow:0 18px 44px rgba(0,0,0,.16);
}
.hp-site-footer-icon{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border:1px solid rgba(209,176,107,.42);
color:#d1b06b;
background:rgba(209,176,107,.10);
font-size:17px;
}
.hp-site-footer-label{
display:block;
margin-bottom:6px;
color:#d1b06b;
font-size:11px;
font-weight:800;
letter-spacing:.18em;
text-transform:uppercase;
}
.hp-site-footer-address{
max-width:none;
justify-self:auto;
}
.hp-site-footer-address p{
margin:0;
color:rgba(255,255,255,.88);
font-size:14px;
line-height:1.75;
}
.hp-site-footer-contact{
display:flex;
align-items:flex-start;
}
.hp-site-footer-phone{
display:block;
color:#fff;
font-size:24px;
font-weight:800;
line-height:1.25;
text-decoration:none;
letter-spacing:.02em;
}
.hp-site-footer-phone:hover,
.hp-site-footer-email:hover{
color:#d1b06b;
text-decoration:none;
}
.hp-site-footer-email{
display:inline-block;
margin-top:8px;
color:rgba(255,255,255,.72);
font-size:14px;
text-decoration:none;
}
.hp-site-footer-bottom{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:center;
gap:7px;
margin-top:4px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.58);
font-size:12px;
line-height:1.5;
letter-spacing:.04em;
}
.hp-site-footer-bottom strong{
color:#fff;
font-weight:800;
letter-spacing:.14em;
}
@media (max-width: 767px){
#home-page .hp-home-studio,
#home-page .hp-home-projects,
#home-page .hp-home-services{
padding:38px 0 18px;
}
#home-page .hp-home-separator{
margin-bottom:24px;
}
#home-page .hp-home-separator span{
padding:12px 18px;
font-size:15px;
letter-spacing:.12em;
}
#home-page .hp-home-tabs{
gap:12px;
padding:10px 8px;
}
#home-page .hp-home-tab-btn{
font-size:11px;
}
#home-page .hp-home-service-item{
padding-left:15px;
padding-right:15px;
margin-bottom:18px;
}
#home-page .hp-home-service-card{
padding-top:58%;
}
#home-page .hp-home-service-card span{
font-size:17px;
letter-spacing:.13em;
}
#home-page .hp-home-project-text h3{
font-size:17px;
}
#home-page .hp-home-featured-projects{
padding:30px 0 16px;
}
#home-page .hp-home-featured-card h3{
font-size:13px;
}
.hp-partners-strip{
padding:34px 0 16px;
}
.hp-partner-item{
height:72px;
}
.hp-partner-item img{
max-width:130px;
max-height:54px;
}
.hp-site-footer-inner{
gap:18px;
padding-top:30px;
padding-bottom:20px;
}
.hp-site-footer-brand{
flex-direction:column;
align-items:flex-start;
}
.hp-site-footer-brand > div{
text-align:left;
}
.hp-site-footer-brand strong{
font-size:24px;
letter-spacing:.12em;
}
.hp-site-footer-info{
grid-template-columns:1fr;
}
.hp-site-footer-address{
max-width:none;
}
.hp-site-footer-phone{
font-size:21px;
}
.hp-site-footer-card{
min-height:0;
padding:18px;
}
}
/* Use the bundled SVN-Gilroy faces throughout the public-facing interface. */
body,
body :where(:not(.fa):not(.glyphicon):not(.bi):not(.mdi):not(.icofont):not(.material-icons)){
font-family:"SVN-Gilroy",sans-serif !important;
}