* html, * html body { /*background-image:url(about:blank);*/ background-attachment: fixed; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-style: normal; text-decoration: none; }
body { background-color: #F3F3F3; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
input { font-size: 12px; }
body { font-family: Arial, Helvetica, sans-serif, "ˎ̥"; font-size: 12px; line-height: 1.6; color: #333; }
select, input, button, textarea { font: 100% Tahoma, Helvetica, Arial, sans-serif; }
a:link, a:visited, a:hover, a:active { font-family: Arial, Helvetica, sans-serif; font-size: 14px;text-decoration: none; outline: none; }
a { color: #1261D7; }
a:hover { color: #ff6600; text-decoration: underline; }
/* globle class */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0px; height: 0px; }
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; }
.clearfix { _zoom: 1; }
* + html .clearfix { overflow: hidden; }
.red { color: #FF0000; }
.green { color: #3B9305; }
.orange { color: #FF5A00; }
b.segmentation { margin: 0 5px; display: inline-block; width: 1px; height: 12px; position: relative; top: 2px; background: #ccc; }
.close_select { -moz-user-select: none; -khtml-user-select: none; }
.header { background: none repeat scroll 0 0 #F1F1F1; border-bottom: 1px solid #DCDCDC; height: 30px; min-width: 1006px; position: relative; z-index: 15; }
.header a { color: #555555; }
.header a.red { color: #FF6600; }
.header a:hover { color: #FF6600; text-decoration: underline; }
.header .top_content { margin: auto; padding-top: 6px; width: 1000px; position: relative; }
.top_content .lz a { color: #666666; }
.top_content .lz a:hover { color: #FF6600; text-decoration: underline; }
.top_content ul.usered { float: right; width: 700px; }
.top_content li { display: block; float: right; }
.top_content li.lines { background: none repeat scroll 0 0 #E0E0E0; display: block; float: right; height: 12px; margin: 3px 10px 0; width: 1px; }
.top { background-color: #FFFFFF; border-bottom: 3px solid #238DE7; width: 100%; }
/* Banner / slide trang chủ */
.top_logo {
    background: #ffffff;
    margin-top: 8px;      /* <-- thêm dòng này cho nó cách menu ra một chút */
	margin-bottom: 8px;
}

.top_logo .top_logo_con {
    margin: 0 auto;
    padding: 0;
    width: 1000px;
    height: 260px;
    position: relative;
    overflow: hidden;
}

/* Mỗi slide */
.top_slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.top_slide.active {
    opacity: 1;
}


.nav { clear: both; width: 1000px; margin: 0 auto; padding: 0; }
.nav ul li { background: url("../Images/nav_g.jpg") repeat-x scroll 0 0 transparent; border-color: #D4D4D4; border-image: none; border-style: solid solid none; border-width: 1px 1px 0; float: left; height: 32px; line-height: 32px; margin-right: 3px; margin-top: 5px; padding: 0 20px; text-align: center; }
.nav ul li.orange { background: url("../Images/nav_o.jpg") repeat-x scroll 0 0 #2D92E7; border-color: #FFC96A; float: right; position: relative; }
.nav ul li.orange a, .nav ul li.orange a:hover { color: #A83E00; font-size: 14px; font-weight: bold; }
.nav ul li.select { background: url("../Images/nav_b.jpg") repeat-x scroll 0 0 #2D92E7; border-color: #0B8BD5; }
.nav ul li.select a, .nav ul li.select a:hover { color: #FFFFFF; font-size: 14px; font-weight: bold; }
.nav ul li a, .nav ul li a:hover { color: #666666; }
.nav ul li.orange em { background: url("../Images/right_nav_o.jpg") no-repeat scroll 0 0 transparent; display: inline-block; height: 33px; position: absolute; right: -4px; top: -1px; width: 4px; }
.center { color: #999999; margin: 0 auto; width: 1000px; }
.c_main strong { color: #333333; font-size: 12px; font-weight: bold; }

.c_main a:hover { color: #E55600; text-decoration: underline; }
.c_main .at_but:hover { color: #FFFFFF; text-decoration: none; }
.c_main .at_but .b_2_g:hover, .c_main .at_but.b_1_g:hover { color: #666666; text-decoration: none; }
.mt10 { margin-top: 10px; }
.center_left { float: left; width: 180px; }
.center_right { float: left; min-height: 180px; width: 810px; }
.ml10 { margin-left: 10px; }
.mb10 { margin-bottom: 10px; }
a.mr10 { margin-right: 10px; }
a.mb_10 { margin-bottom: 10px; }
.fr { float: right; }

.cBlack { color: #A83E00; font-weight: bold; }
.loveyTip { background-color: #FFECC4; border: 1px solid #FDCA68; border-radius: 1px 1px 1px 1px; color: #666565; overflow: hidden; padding: 7px 10px 7px 20px; }
.loveytip_close { background: url("../Images/smlpic.gif") repeat scroll -64px -21px transparent; cursor: pointer; display: inline-block; height: 8px; margin-top: 6px; width: 8px; }
.basicInfo { background: url("../Images/basic_Infor-background.png") repeat-x scroll 0 0 white; border: 1px solid #DBDBDB; border-radius: 1px 1px 1px 1px; height: 177px; position: relative; }
.basicInfo_content { color: #666666; float: left; padding: 20px 0 0 30px; width: 480px; }
.basicInfo_currency { border-left: 1px solid #E5E5E5; float: left; height: 145px; width: 262px; margin: 22px 0 0 10px; }
.basicInfo_currency ul { border: 1px #F4DEB9 solid; margin-left: 25px; border-bottom-style: none; }
.basicInfo_currency ul.curr_btn { border-top: 0px; }
.basicInfo_currency ul li { border-bottom: 1px #F4DEB9 solid; font-weight: bold; line-height: 35px; padding-left: 8px; }

.basicInfo_content p, .ui_tabs p { line-height: 30px; vertical-align: middle; }





.basicInfor-content-shadow { background: url("../Images/basic_Infor-shadow.png") no-repeat scroll 0 0 transparent; height: 16px; }
.mybox { background-color: #FFFFFF; border: 1px solid #DBDBDB; padding: 0; }
.mybox .mytit { background: url("../Images/center_box_titbg.jpg") repeat-x scroll 0 0 transparent; border-bottom: 1px solid #DBDBDB; border-left: 1px solid white; border-right: 1px solid white; color: #666666; font-size: 12px; font-weight: bold; height: 32px; line-height: 31px; overflow: hidden; padding: 0 10px; }
.mybox .myinfo_con { color: #333333; padding: 5px; }
.mybox .con { color: #333333; padding: 15px; }
.footer { background-color: #FFFFFF; border-top: 1px solid #DFDFDF; margin-top: 55px; }
.footer_con { background: none repeat scroll 0 0 #FFFFFF; border-top: 1px solid #E0E0E0; color: #999999; line-height: 28px; padding: 15px 0 20px; text-align: center; margin: 0 auto; width: 1000px; border: medium none; }


.at_but { background: url("../Images/pic.png") no-repeat scroll right center transparent; border: 0 none; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 600; height: 32px; line-height: 32px; margin: 0; overflow: hidden; padding: 0 25px 0 0; text-decoration: none; }
.at_but { padding-right: 29px; vertical-align: middle; }
.at_but u { background: url("../Images/pic.png") no-repeat scroll 0 0 transparent; border: 0 none; float: left; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 25px; }


.bt_but { background: url("../Images/pic.png") no-repeat scroll right center transparent; border: 0 none; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 12px; font-weight: 600; height: 22px; line-height: 22px; margin: 0; overflow: hidden; padding: 0 25px 0 0; text-decoration: none; }
.bt_but { padding-right: 20px; vertical-align: middle; }
.bt_but u { background: url("../Images/pic.png") no-repeat scroll 0 0 transparent; border: 0 none; float: left; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 25px; }


.bt_but u { width: 20px; }
.bt_but:hover { text-decoration: none; }
a.c_1_g { background-position: right -895px; color: #666666; }
a.c_1_g u { background-position: 0 -918px; }
a.c_1_g:hover { background-position: right -987px; text-decoration: none; color: #666666; }
a.c_1_g:hover u { background-position: 0 -1010px; }


/* ===== NẠP THẺ – LIST GÓI NẠP ===== */
.nt-pack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* 1 item: ảnh vuông ở trên + ô đen ở dưới */
.nt-pack-item {
    width: 210px;              /* ngang giống ô đen cũ */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ẢNH VUÔNG PHÍA TRÊN Ô ĐEN */
.nt-pack-thumb {
    width: 100%;          /* FULL theo chiều ngang của .nt-pack-item (≈ ô đen) */
    height: auto;         /* giữ tỉ lệ ảnh */
    object-fit: cover;
    border-radius: 6px;
    margin: 0 0 6px 0;    /* bỏ căn giữa, bám mép giống ô đen */
    display: block;
}

/* Ô đen cũ giữ nguyên style, chỉ thêm class riêng để không đụng cái khác */
.nt-pack-card {
    background: #000;
    color: #fff;
    border-radius: 6px;
    padding: 8px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nt-pack-card:hover {
    box-shadow: 0 0 0 2px #ff6600 inset;
    transform: translateY(-2px);
}

.nt-pack-name {
    font-weight: bold;
    margin-bottom: 2px;
}

.nt-pack-xu {
    font-size: 13px;
    margin-bottom: 2px;
}

.nt-pack-price {
    font-size: 13px;
    color: #ffcc33;
}

/* Ô đen trong item nạp thẻ rộng bằng khung */
.nt-pack-item .package-card {
    width: 93%;
}

.x2-title {
    text-align: center;       /* ra giữa */
    color: #ff0000;           /* đỏ */
    text-transform: uppercase;/* in hoa dạng tiêu đề */
    font-weight: bold;        /* đậm */
    font-size: 20px;          /* to hơn mặc định */
    margin: 25px 0 10px;      /* tách biệt với phần trên */
}

        .package-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			margin-top: 10px;
		}
		.package-section {
			margin-bottom: 20px;
		}
        .package-card {
            width: 170px;
            background: #111;
            border-radius: 6px;
            padding: 8px 8px 12px 8px;
            color: #fff;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(0,0,0,0.4);
        }
        .package-card:hover {
            box-shadow: 0 0 12px rgba(255,215,0,0.8);
        }
        .package-img {
            background: #222;
            height: 110px;
            border-radius: 6px;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
            padding: 5px;
        }
        .package-name {
            font-weight: bold;
            margin-bottom: 2px;
            font-size: 13px;
        }
        .package-price {
            font-size: 12px;
            color: #0cf;
        }
        .order-box {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            background: #f9f9f9;
        }
        .order-title {
            font-weight: bold;
            margin-bottom: 8px;
        }
        .order-line {
            margin: 4px 0;
        }
		
		/* Nút thanh toán MoMo */
		.momo-button {
			background: linear-gradient(135deg, #a50064, #d7008a);
			border: none;
			padding: 8px 18px;
			border-radius: 6px;
			color: #fff;
			font-weight: bold;
			font-size: 13px;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			cursor: pointer;
			box-shadow: 0 0 8px rgba(0,0,0,0.3);
		}

		.momo-button:hover {
			background: linear-gradient(135deg, #bf0075, #f00099);
		}

		.momo-button:active {
			transform: translateY(1px);
		}

		.momo-icon {
			width: 20px;
			height: 20px;
			border-radius: 4px;
			background: #fff;
			color: #a50064;
			font-size: 11px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		/* Nút thanh toán */
		.pay-button {
			background: linear-gradient(135deg, #a50064, #d7008a);
			border: none;
			padding: 8px 18px;
			border-radius: 6px;
			color: #fff;
			font-weight: bold;
			font-size: 13px;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			cursor: pointer;
			box-shadow: 0 0 8px rgba(0,0,0,0.3);
			margin-top: 10px;
		}

		.pay-button:hover {
			background: linear-gradient(135deg, #bf0075, #f00099);
		}

		.pay-icon {
			width: 20px;
			height: 20px;
			border-radius: 4px;
			background: #fff;
			color: #a50064;
			font-size: 11px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* Modal QR thanh toán */
		.modal-overlay {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,0.6);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 9999;
		}

		.modal-box {
			background: #fff;
			padding: 20px 24px;
			border-radius: 8px;
			width: 380px;
			max-width: 95%;
			box-shadow: 0 4px 16px rgba(0,0,0,0.3);
			text-align: center;
		}

		.modal-box h3 {
			margin-top: 0;
			margin-bottom: 10px;
		}

		.qr-box img {
			width: 350px;
			height: 350px;
			object-fit: contain;
			border-radius: 8px;
			border: 1px solid #eee;
			margin: 10px 0 15px;
		}

		.modal-order-info {
			text-align: left;
			font-size: 13px;
			margin-bottom: 12px;
		}

		.modal-order-info b {
			color: #d70000;
		}

		.modal-actions {
			display: flex;
			justify-content: center;
			gap: 10px;
		}

		.btn-primary,
		.btn-secondary {
			padding: 6px 14px;
			border-radius: 4px;
			border: none;
			cursor: pointer;
			font-size: 13px;
		}

		.btn-primary {
			background: #28a745;
			color: #fff;
		}

		.btn-primary:hover { background: #2fbd52; }

		.btn-secondary {
			background: #e0e0e0;
			color: #333;
		}

		.btn-secondary:hover {
			background: #d5d5d5;
		}
		
/* Khung menu dọc bên trái */
.left-vertical-menu {
    position: fixed;
    left: 50px;
    top: 180px;
    width: 220px;          /* = đúng bằng (hoặc lớn hơn) width logo */
    z-index: 999;
    text-align: center;
}

/* Logo */
.left-vertical-menu .lvm-logo img {
    display: block;
    width: 180px;          /* size to lên của logo */
    height: auto;
    margin: 0 auto -65px;  /* giờ auto sẽ căn giữa đúng */
}

/* Khung nền xanh ở giữa menu, hẹp hơn logo cũng được */
.left-vertical-menu .lvm-frame {
    width: 120px;                         
    margin: 0 auto;                       
    background: url("/images/menu-frame-bg.png") no-repeat center top;
    background-size: 100% 100%;
    padding: 45px 10px 55px;  /* ↓ giảm top, ↑ tăng bottom để chữ nhích lên */
    min-height: 160px;
}

.left-vertical-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-vertical-menu li {
    margin: 6px 0;
}

.left-vertical-menu a {
    display: block;
    font-size: 13px;
    color: #f0f4ff;
    text-decoration: none;
    padding: 4px 0;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    transition: all 0.2s;
    font-weight: 400;          /* bình thường không đậm */
}

.left-vertical-menu a:hover {
    color: #ff9900;            /* màu cam khi hover */
    font-weight: 700;          /* in đậm khi hover */
    transform: translateX(2px);
    text-decoration: none;     /* không gạch chân */
}

.content-wrapper {
    padding: 15px 20px;
    color: #fff;
}

/* ================== TAIGAME PAGE ================== */

.page-main-wrap {
    width: 1000px;
    margin: 0 auto;
    padding: 20px 0 40px;
    overflow: hidden;
}

/* cột trái – menu đã có style riêng nên chỉ giữ khung */
.page-left {
    float: left;
}

/* cột phải – khung hoạt động ngày */
.page-right {
    float: right;
}

/* vùng nội dung chính ở giữa */
.page-center {
    margin: 0 210px 0 210px; /* chừa 2 bên cho menu trái & box phải */
    min-height: 400px;
}

/* phần tải game */
.download-wrapper {
    padding-top: 10px;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

.download-title-big {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #ffcc66;
    margin-bottom: 20px;
}

.download-box {
    background: rgba(0,0,0,0.55);
    border: 1px solid #444;
    padding: 20px 30px;
    margin-bottom: 18px;
}

.download-section-title {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffdd88;
    margin-bottom: 12px;
}

.download-list,
.download-steps {
    margin-left: 18px;
    margin-bottom: 8px;
}

.download-btn-row {
    margin-top: 15px;
    text-align: left;
}

.dl-btn {
    display: inline-block;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid #c66a1a;
    background: #e67e22;
    color: #fff;
}

.dl-btn:hover {
    background: #ff9933;
}

.dl-btn-sub {
    background: #a85d1a;
    border-color: #8c4b14;
}

.dl-btn-sub:hover {
    background: #c06a1f;
}

.download-note {
    margin-top: 10px;
    font-style: italic;
    color: #ffddaa;
}

/* ===== PASS FORM: canh cùng dòng + input rộng + note full ngang ===== */
.ht-pass-form{
    width: 760px;              /* khung rộng hơn để note không bị bó */
    margin: 18px auto 0 auto;
}

.ht-pass-form dd{
    margin: 12px 0;
    padding: 0;
}
.ht-pass-form dd:after{
    content: "";
    display: block;
    clear: both;
}

/* 1) Label + input cùng dòng */
.ht-pass-form .lab{
    float: left;
    width: 210px;              /* cột chữ */
    text-align: right;
    font-weight: 700;
    line-height: 34px;
    white-space: nowrap;
    margin-right: 12px;
    display: block;
}
.ht-pass-form .at_text{
    float: left;
    display: block;
    line-height: 34px;
}

/* 2) Input rộng hơn */
.ht-pass-form input[type="password"]{
    width: 520px;              /* tăng độ dài ô nhập */
    height: 34px;
    padding: 6px 10px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
}

/* Nút: nằm thẳng hàng dưới input */
.ht-pass-form .ht-actions .lab{
    height: 1px;
    line-height: 1px;
}
.ht-pass-form .ht-actions #reg_sub{
    float: left;
    margin-left: 0;
    display: inline-block;
}

/* 3) Note dàn ngang full, xuống dưới nút, không co cụm */
.ht-pass-form .ht-note{
    margin-top: 14px;
}
.ht-pass-form .ht-note-box{
    clear: both;
    width: 100%;
    margin: 0;                 /* bỏ margin-left để không bị bó theo input */
    text-align: left;
    font-size: 12px;
    line-height: 18px;
    color: #666;
    white-space: normal;       /* cho phép tự wrap theo khung */
}

/* Đè chết các CSS flex cũ nếu còn */
.ht-pass-form .ht-row{
    display: block !important;
}

.ht-pass-form .at_text{ width: auto !important; }
.ht-pass-form input[type="password"]{ max-width: 100% !important; }


/* 1) Đẩy cả cụm input sang phải (xa label hơn) */
.ht-pass-form .at_text{
    margin-left: 65px;      /* tăng số này để đẩy sang phải */
}

/* 2) Tăng "chiều rộng" theo ý mày = tăng chiều cao + viền nhìn dày hơn */
.ht-pass-form input[type="password"]{
    height: 22px;           /* cao hơn */
    line-height: 22px;
    padding: 0 12px;        /* dày hơn */
    border-width: 2px;      /* viền dày hơn (nếu theme cho phép) */
    box-sizing: border-box;
}

/* nếu theme ép height ở chỗ khác thì ép cứng */
.ht-pass-form .at_text input[type="password"]{
    height: 32px !important;
    line-height: 32px !important;
}