body {
  padding-top: 80px;
  background: rgba(255, 255, 255, 0.9)  url(../images/bg-header.jpg) no-repeat;
}

.LockOff {
	display: none;
	visibility: hidden;
}


.LockOn {
	display: block;
	color:#f0f0f0;
	font-size:larger;
	visibility: visible;
	position: fixed;
	z-index: 999;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: #303030;
	text-align: center;
	padding-top: 20%;
	filter: alpha(opacity=96);
	opacity: 0.96;
}

@font-face {
    font-family: myfont;
    src: url(../fonts/MYRIADPRO-BOLD.OTF);
}

@font-face {
    font-family: myfont1;
    src: url(../fonts/MYRIADPRO-REGULAR.OTF);
}

.panel, .navbar-fixed-top {
	box-shadow: 1px 1px 3px #888888;
	background-color: #3b5998;
}

.panel.panel-primary {
	background-color: rgba(255, 255, 255, 1);
}

.container > .row {
	min-height: 100%;
}

.jumbotron {
	padding:30px;
	background-color: rgba(238, 238, 238,0.9);
	box-shadow: 1px 1px 15px #888888;
}

.jumbotron h3 {
	font-weight:bold;
	font-size:22px;
}

.jumbotron p {
	font-size:15px;
}

.footer{
    padding-top: 5px;
    /*background: rgba(238, 238, 238,0.5);*/
    border-top: 1px solid #d9edf7;
    min-height:50px;
    line-height: 18px;
    text-align: center;
    /*font-style: italic;*/
    color:green;
    font-size:12px;
}

 .footer a {
 	color:black;
 }

.table thead tr.title-table th {
	vertical-align: middle;
    line-height: 35px;
    font-size: 17px;
    padding: 0px;
    margin: 0px;
    color: darkblue;
}

p.descript{
	margin: 0px;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    color: #b9a8a8;
    padding: 5px 10px;
    font-family: "Times New Roman",Arial,Tahoma;
}
p.descript b {
	font-size:15px;
	margin-top:15px;
	display:block;
	color:#A52A2A;
	font-weight: bold;
}

form label {
	font-weight: bold;
	/*text-transform: uppercase;*/
	clear: both;
	display: block;
	margin-top: 15px;
	color: #58595b;
	opacity: 0.9;
}

form .form-group {
	margin-top: 20px;
}

a:focus, a:hover {
    color: #3b5998;
    text-decoration: underline;
}
/* ==============================
   MENU LOGO TRUNG TÂM – 5 HÀNG
   ============================== */
/* ==============================
   MENU NỔI – HIỆU ỨNG NEON
   ============================== */

/* ==============================
   MENU THẦN KHÍ JX2 – NEON GOLD
   ============================== */

.top-menu {
    width: 100%;
    text-align: center;
    margin-top: 150px;
}

/* /* LOGO */
.top-logo img.logo-img {
    height: 400px;
    transition: .4s;
    filter: drop-shadow(0 0 20px rgba(255,215,0,0.8))
            drop-shadow(0 0 40px rgba(255,215,0,0.4));
}
.top-logo img.logo-img:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 0 35px #ffea00)
            drop-shadow(0 0 60px #ffc400);
}
 */
/* MENU BOX */
/* ==============================
   MENU THẦN KHÍ JX2 — NO BOX BORDER
   ============================== */

/* Bỏ viền dài */
/* ================================
   TÁCH RỜI CÁC HÀNG – THƯA ĐỀU
   ================================ */

/* --- KHỐI MENU CHÍNH --- */
.menu-wrapper {
    text-align: center;
    margin-top: 40px;
}

/* --- MỖI HÀNG MENU --- */
.menu-row {
    list-style: none;
    padding: 0;
    margin: 20px 0 !important; /* ⭐ Tách hàng rõ ràng */
    display: flex;
    justify-content: center;
    gap: 30px; /* Khoảng cách giữa các nút */
}

/* --- NÚT MENU --- */
.menu-row li a {
    display: inline-block;
    padding: 10px 18px;
    background: rgba(0,0,0,0.35);
    border: 2px solid #c9a038;
    border-radius: 8px;

    color: gold;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;

    /* Hiệu ứng JX2 */
    transition: 0.15s ease-in-out;
}

/* --- HOVER RUNG NHẸ + SÁNG VIỀN THẦN KHÍ --- */
.menu-row li a:hover {
    transform: scale(1.06);
    box-shadow: 0 0 15px #ffd45c;
    border-color: #ffd45c;
}

/* Dòng cuối đặc biệt */
.menu-highlight {
    background: linear-gradient(90deg, #844400, #d9a300);
    color: #fff !important;
    border-color: #ffea9c !important;
}

/* ==============================
   MENU LOGO TRUNG TÂM – 5 HÀNG
   ============================== */
.top-menu {
    width: 100%;
    text-align: center;
    margin-top: 170px;
    margin-bottom: 100px;
}

/* LOGO */
.top-logo img.logo-img {
	
    height: 290px;
    transition: .25s ease;
}






/* Từng hàng (row) */
.menu-row {
    list-style: none;
    padding: 0;
    margin: 28px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Các mục menu */
.menu-row li a {
    display: block;
    padding: 18px 22px;
    border-radius: 10px;
    background: rgba(255,255,255,0.75);
    border: 2px solid #ffcc00; /* viền vàng JX2 */
    color: #d40000;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(5px);
    transition: 0.25s ease;
    box-shadow: 0 0 10px rgba(255,255,255,0.4);
}

/* Icon */
.menu-row li a i {
    margin-right: 6px;
    color: #b30000;
}

/* Hiệu ứng hover rung nhẹ */
.menu-row li a:hover {
    background: rgba(255,255,255,0.95);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 12px rgba(255,0,0,0.7);
    animation: shake 0.2s;
}

/* Animation rung */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* Mục nổi bật */
.menu-highlight {
    background: rgba(255,255,255,0.95) !important;
    color: #a00000 !important;
    border-color: gold !important;
    box-shadow: 0 0 12px gold !important;
}

.menu-highlight:hover {
    color: #ffcc00 !important;
    text-shadow: 0 0 10px #ffcc00;
}

/* MOBILE */
@media (max-width: 768px) {
    .menu-row {
        flex-direction: column;
        gap: 10px;
    }
    .top-logo img.logo-img {
        height: 150px;
    }
}

				.gi-3x {
					font-size: 1.8em;
					}
					.zid_header_inner {
					margin: 0 auto;
					
					padding-left: 10px;
					padding-right: 10px;
					
					}
					.zid_mainlogo  {
					background-image: url(assets/images/logo.png);
					background-repeat: no-repeat;
					height: 50px;
					width: 100px;
					background-size: 100px 80px;
					display: block;
					margin: 0 auto;
					text-indent: -999999em;
					}
					.zid_mainlogo {
					padding: 0;
					margin: -10px 0 0;
					float: left;
					}
					.zid_pagetitle {
					font-size: 21px;
					line-height: normal;
					color: #fff;
					white-space: nowrap;
					font-weight: normal;
					text-align: center;
					margin: 0 0 0 0;
					padding: 13px 0 0 0;
					}
					.zid_mainexit {
					height: 30px;
					width: 100px;
					color: #fff;
					background-color: #6282bf;
					background-size: 100px 30px;
					display: block;
					margin: 0 auto;
					/* padding: 0; */
					margin: -27px 0px 0 0;
					float: right;
					}
					.zid_mainback {
					height: 30px;
					width: 100px;
					color: #fff;
					background-color: #6282bf;
					background-size: 100px 30px;
					display: block;
					padding: 1px 0 0 0;
					margin: 12px 0px 0 0;
					float: left;
					}
					
					/* Nền đen mờ */
.terms-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 15px;
}

/* Khung popup */
.terms-box {
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(8px);
    width: 95%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px 30px;
    border-radius: 14px;
    border: 3px solid gold;
    box-shadow: 0 0 20px rgba(255,255,200,0.8);
    animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Close button */
.terms-close {
    border: none;
    background: none;
    font-size: 30px;
    font-weight: bold;
    float: right;
    cursor: pointer;
    color: #444;
}

/* Content */
.terms-content {
    margin-top: 10px;
    color: #222;
    font-size: 15px;
    line-height: 1.6;
}

.li-alpha {
    list-style-type: lower-alpha;
    margin-left: 18px;
}

/* Button */
.terms-btn {
    background: #d49f00;
    color: #000;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 10px;
    margin-top: 15px;
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 10px gold;
}
.terms-btn:hover {
    background: gold;
    transform: scale(1.03);
}
.menu-row li a {
    position: relative;
    overflow: hidden;
}

/* Vùng sáng chạy theo chuột – màu xanh */
.menu-row li a .cursor-light {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle,
        rgba(0, 170, 255, 0.65),
        rgba(0, 140, 255, 0.25),
        rgba(0, 100, 255, 0)
    );
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s, transform 0.15s;
    opacity: 0;
    mix-blend-mode: screen;
}

/* Khi hover thì sáng mạnh lên */
.menu-row li a:hover .cursor-light {
    opacity: 1;
}

body {
    background: transparent !important;
}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -9999;
}