#header{ border-bottom: solid 1px #999;border-top: solid 7px var(--nhatkhang); }
.text-nhatkhang { color: var(--nhatkhang); }
.bg-nhatkhang { background-color: var(--nhatkhang); color:#fff;}
.btn-nhatkhang{--bs-btn-color:#fff;--bs-btn-bg:var(--nhatkhang);--bs-btn-border-color:var(--nhatkhang);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#004CB0;--bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;--bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:var(--nhatkhang);--bs-btn-disabled-border-color:var(--nhatkhang)}


.text-yellow { color: #ffff00; }
.brd-bottom {
	padding-bottom:10px;
	border-bottom: solid 2px var(--nhatkhang);
}
/*--------------------------------------------------------------
# TABLE OF CONTENTS
--------------------------------------------------------------*/
/*transform: rotate(90deg) translateX(180px);
white-space: nowrap; */
#toc_details {
  position: sticky;
  left: 0px;
  top: 90px;
}

.toc {
  position: relative;
  height:100%;
}

.tocBtn {	
  position: sticky;
  left: 0px;
  top: 150px;
  z-index:99;
}

/*--------------------------------------------------------------
# IMG BORDER
--------------------------------------------------------------*/
.img-border {
    position: relative;
    height: 100%;
	min-height:300px;
}

.img-border::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 3rem;
    bottom: 3rem;
    border: 5px solid var(--nhatkhang);
    border-radius: 6px;
}

.img-border img {
    position: absolute;
    top: 3rem;
    left: 3rem;
    width: calc(100% - 3rem);
    height: calc(100% - 3rem);
    object-fit: cover;
    border-radius: 6px;
}

/*--------------------------------------------------------------
# PORTFOLIO COLORS
--------------------------------------------------------------*/
.port-danger {
	border: 1px solid rgba(255, 0, 0, .2);
}
.port-danger h4 {
	border-bottom: 1px solid rgba(255, 0, 0, .2);
	color: rgba(255, 0, 0, .9);
	background-color: rgba(255, 0, 0, .1);
}
.port-nhatkhang {
	border: 1px solid rgba(16, 110, 234, .2);
}
.port-nhatkhang h4 {
	border-bottom: 2px solid rgba(16, 110, 234, .2);
	color: rgba(16, 110, 234);
	background-color: rgba(16, 110, 234, .1);	
}
/*--------------------------------------------------------------
# PROJECT SLIDER
--------------------------------------------------------------*/
.project-item a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .5);
    border-radius: 6px;
    opacity: 0;
    transition: .5s;
}

.project-item:hover a {
    opacity: 1;
}

.project-carousel .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.project-carousel .owl-dot {
    width: 35px;
    height: 35px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #DEE2E6;
    border-radius: 35px;
    transition: .5s;
}

.project-carousel .owl-dot:hover,
.project-carousel .owl-dot.active {
    color: #FFFFFF;
    border-color: var(--primary);
    background: #106eea;
}

/*------------ NOTE -------------------------------------------
 - kiểm tra độ dài height của hero section
 - update + imgdiet hình
 - css + js riêng cho từng page
 --------------------------------------------------------------*/