/*! Copyright 2014 jQuery Foundation and other contributors
 * Includes:
 * - normalize.css v1.0.1 | MIT License | git.io/normalize
 * - Font Awesome - http://fortawesome.github.com/Font-Awesome - CC BY 3.0
 */

:root {
    --vntq-brand-dark-blue: #0b1765;
    --vntq-brand-light-blue: #6bb4ff;
    --vntq-heading: #58584a;
    --vntq-shadow-accent: #c0c2a2;
    --vntq-text-main: #666633;
    --vntq-text-subtitle: #6c6c50;
    --vntq-hover-accent: #9d6101;
    --vntq-bg-cream: #f3f0e0;
}

/* Menu thanh vien/dang nhap tren man hinh nho - dat o DAU FILE (ngoai moi @media khac,
   cap do goc chac chan) sau khi phat hien ban truoc do vo tinh nam LONG ben trong
   "@media (min-width:768px)" khien "@media (max-width:768px)" long ben trong hau nhu
   khong bao gio khop tren dien thoai that (loi nguoi dung bao 2026-08-04: "member bên
   trên thì vẫn không loại bỏ đi thành ra lặp lại 2 lần"). Theo yeu cau nguoi dung: "nếu
   không còn chỗ trên logo thì để xuống dưới ô tìm kiếm" - #logo-events .top-menu (ban
   goc, trong thanh logo) bi AN tren man hinh nho, thay bang .vntq-mobile-memberbar (ban
   thu 2, dat ngay sau o tim kiem trong tung file _Xxxmenu.cshtml). */
@media (max-width: 768px) {
    #logo-events .top-menu {
        display: none !important;
    }
}

.vntq-mobile-memberbar {
    display: none;
}

@media (max-width: 768px) {
    .vntq-mobile-memberbar {
        display: flex !important;
        clear: both; /* BAT BUOC xuong hang rieng, khong dung canh o tim kiem/menu (dang
                        float) - thieu dong nay la ly do khoi bi ep noi vao khoang trong
                        con lai canh o tim kiem, nhin nhu 1 hop den "tu nhien" xen vao
                        (loi nguoi dung bao 2026-08-04). */
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        background: transparent; /* KHONG con nen rieng - nam tren nen xam co san cua
                                     thanh menu, khong con tao 1 "hop" la mat nhu truoc */
        padding: 8px 10px;
    }

        .vntq-mobile-memberbar ul {
            display: flex;
            flex-wrap: nowrap; /* tuyet doi khong dan hang doc */
            align-items: center;
            justify-content: center;
            gap: 22px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .vntq-mobile-memberbar li {
            flex: 0 0 auto;
        }

        .vntq-mobile-memberbar a {
            display: inline-flex;
            color: #6c4a1e; /* mau nau dam - nen quanh la mau xam sang, chu trang se
                                khong thay duoc */
            text-decoration: none;
        }

        .vntq-mobile-memberbar .vntq-navtext {
            display: none; /* van chi icon tren man hinh nho */
        }

        .vntq-mobile-memberbar .vntq-navicon {
            font-size: 22px;
        }
}

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */



* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
	display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
	display: none;
	height: 0;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
	font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
	-ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
	font-family: sans-serif;
	color: #333;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
	margin: 0;
	font:normal 0.75em/1.2 "Century Gothic", Trebuchet MS, Arial, sans-serif;
}

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/* Nen boi den mac dinh o tren (#b3d4fc, xanh nhat) chi hop voi chu MAU TOI tren nen SANG.
   O che do toi, chu thuong da duoc doi sang MAU SANG (vd --dd-text-main/--vntq-text-main
   #d8d4c8...) de doc duoc tren nen toi cua trang - nhung khi boi den van dung DUNG nen
   xanh nhat mac dinh nay, thanh ra chu sang nam tren nen (boi den) cung sang mau, gan nhu
   vo hinh (loi nguoi dung bao cao that, vd trong .dd-quote/.chuthich). Doi rieng nen boi
   den sang mau TOI HON cho ca 2 co che dark-mode dang dung trong site ("[data-theme=dark]"
   dat tren <html> cho da so trang, ".vntq-dark-mode" dat tren wrapper rieng cua trang doc
   truyen - xem reader.css) - GIU NGUYEN mau chu (khong ep them color) vi chu da sang san,
   chi can nen du toi la du tuong phan, khong can doi ca 2 thuoc tinh. */
[data-theme="dark"] ::-moz-selection,
.vntq-dark-mode ::-moz-selection {
	background: #2f5c8a;
}

[data-theme="dark"] ::selection,
.vntq-dark-mode ::selection {
	background: #2f5c8a;
}

.chromeframe {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=3.0.2');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=3.0.2') format('embedded-opentype'),
    url('/fonts/fontawesome-webfont.woff?v=3.0.2') format('woff'),
    url('/fonts/fontawesome-webfont.ttf?v=3.0.2') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  src: url('/fonts/VLOLDTYPEWRITER-REGULAR.otf');
  font-family: 'nguechngoac';
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
}
@font-face {
    font-family: 'DC';
    src: url("/fonts/UTM Swashes.ttf");
}
@font-face {
    font-family: 'music';
    src: url("/fonts/UVF_MussicaSwash.ttf");
}
@font-face {
    font-family: 'baybuom';
    src: url("/fonts/chuhoa.ttf");
}
@font-face {
    font-family: 'tacgiavn';
    src: url("/fonts/DancingScript-Bold.ttf");
}
@font-face {
  font-family: "chuhoa";
  font-weight: normal;
  font-style: normal;
  src: url("/fonts/floral.ttf");
}
@font-face {
  font-family: "tuadevn";
  font-weight: normal;
  font-style: normal;
  src: url("/fonts/UTM_Marlboro.ttf");
}
@font-face {
  font-family: "Bookerly";
  font-weight: bold;
  font-style: normal;
  src: url("/fonts/Bookerly-Bold.ttf");
}

@font-face {
  font-family: "Bookerly";
  font-weight: bold;
  font-style: italic;
  src: url("/fonts/Bookerly-BoldItalic.ttf");
}

@font-face {
  font-family: "Bookerly";
  font-weight: normal;
  font-style: normal;
  src: url("/fonts/Bookerly-Regular.ttf");
}

@font-face {
  font-family: "Bookerly";
  font-weight: normal;
  font-style: italic;
  src: url("/fonts/Bookerly-RegularItalic.ttf");
}
@font-face {
  font-family: "tuahoi";
  font-weight: normal;
  font-style: italic;
  src: url("/fonts/0208-LNTH-minster5.ttf");
}
@font-face {
  font-family: "sochuong";
  font-weight: normal;
  font-style: italic;
  src: url("/fonts/0029-LNTH-Ayres.ttf");
}
@font-face {
  font-family: "tuahoi2";
  font-weight: normal;
  font-style: italic;
  src: url("/fonts/UTM_ThanChienTranh.ttf");
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
	outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
	outline: 0;
}
#logo-events {
	display: flex;
	flex-wrap: nowrap; /* logo va menu LUON tren cung 1 hang, khong bao gio roi xuong hang
	                       khac hay lech vi tri (loi nguoi dung bao 2026-08-04: "cóa mấy cỡ
	                       màn hình nó chạy về phía phải") */
	justify-content: flex-start; /* logo LUON dinh ben trai - dung flex-start + margin-left:
	                                 auto tren .top-menu (thay vi space-between, vi
	                                 space-between phu thuoc ca 2 ben co do rong on dinh,
	                                 de bi lech khi .top-menu thay doi do rong theo man hinh */
	align-items: center;
	height: 67px; /* chiều cao thanh header */
	padding: 5px 15px; /* thêm khoảng cách trên/dưới */
	position: relative;
	z-index: 10; /* đảm bảo nằm trên khung chính */
}
/* Logo */
.site-logo {
	align-items: flex-start; /* canh các phần tử lên trên cùng */
	flex: 0 0 auto;
	position: relative;
	top: 1px; /* hạ logo xuống 1px */
}

	.site-logo img {
		display: block;
		max-height: 60px; /* đảm bảo không che viền khung chính */
	}
/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses font sizes and margins set differently in IE 6/7.
 * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */
 .payding30{ padding:30px;}
  .payding10{ padding:10px;}
 .nentho{
 background: url(/images/nentho.png) no-repeat center; background-size: 445px 100%; padding: 20px;
 }
 .nentieude{
 background: url(/images/nennhac.png) no-repeat center top;
 }
 .nentieude6{
 background: url(/images/nenanh1.png) no-repeat center top;
 }
 .nentieude7{
 background: url(/images/nenphim.png) no-repeat center top;
 }
 .nentieude1{
 background: url(/images/nentruyen.png) no-repeat center top;
 }
 .nentieude2{
 background: url(/images/nenamthuc.png) no-repeat center top;
 }
 .nentieude3{
 background: url(/images/nentho.png) no-repeat center top;
 }
 .nentieude4{
 background: url(/images/van.png) no-repeat center top;  padding: 20px;
 }
 .nentieude5{
 background: url(/images/nennhac1.png) no-repeat center top;
 }
 .nenthochinh{
 background: url(/images/nenthochinh.jpg) no-repeat center; background-size: 100% 100%;;
 }
 .nenphimchinh{
 background: url(/images/nenphimchinh.jpg) no-repeat center; background-size: 100% 100%;;
 }
 .nenanhchinh{
 background: url(/images/nenanhchinh.jpg) no-repeat center; background-size: 100% 100%;;
 }
 .nenthotrai{
 background: url(/images/nenthotrai2.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nenphimtrai{
 background: url(/images/nenphimtrai.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nenanhtrai{
 background: url(/images/nenanhtrai.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nennhactrai{
 background: url(/images/nennhactrai3.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nenamthuctrai{
 background: url(/images/amthuctrai.png) no-repeat center; background-size: 100% 100%;
 }
 .nentruyentrai{
 background: url(/images/truyentrai1.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nenamthuc{
 background: url(/images/nenamthucchinh.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nennhac{
 background: url(/images/nennhacchinh.jpg) no-repeat center; background-size: 100% 100%;
 }
 .nenrong{
 background: url(/images/rong.png) no-repeat center; background-position:top;
 }
 .nentho1{
 background: url(/images/12cohoa.png); height:149px; width: 100%;
 }
 .nentho2{
 background: url(/images/nentho1.png) center right;
 }
 .nenthotho{
 background: url(/images/nenthothonho.gif) no-repeat center; padding: 20px;
 }
  .nentruyen{
 background: url(/images/nentruyenchinh.jpg); background-size: 100% 100%; padding: 20px;
 }
 #fontchu{

	 text-align:justify;
	 font-size:24px;
	 word-wrap: break-word;
        overflow-wrap: break-word;
        overflow-x: auto; /* Thêm thanh cuộn nếu cần */
        white-space: normal; /* Ngắt dòng tự động */
	 } 
	  
   .tmulu{margin:auto auto;
    position:relative;}
    .mulu{
        padding:5px;
        display:block;
    }
    .mulu .mutren {
        float:left;
        list-style:none;
        height:40px;
        width:100px;
        padding:0px;
       
        }
.muanh {
       
		display: inline-block;
		margin: 10px;
		border-bottom-color:#CBC3C3;
	
              
        }
		.mulu #muben {
        list-style:none;
        height:40px;
        width:120px;
        padding:0px;
       
        }
    
    
 #menutraimautu{
	 
	 max-height: 70px;
	 
	 }
 .smenu {	position:absolute;
	background-color:#ffffff;
	visibility:hidden;
	cursor:hand;
}
.khunglich {
	max-width: 170px;
	padding: 10px 0;
	margin: 0 0;
	border: 3px solid rgba( 0, 0, 0, 0.2 );
	border-radius: 0px;
	background-image: linear-gradient(to top left, var(--vntq-brand-dark-blue), var(--vntq-brand-light-blue));
	background-color: var(--vntq-brand-dark-blue);
	position: relative;
}
 .lichthang{
	 font:italic 0.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; text-transform:none; 
	 }
.lichngay{
	 font: bold 2.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; line-height: -7px; margin-bottom: -7px; margin-top: -7px;
	 }
.lichnam{
	 font: 0.75em "Verdana", sans-serif; text-transform: uppercase;
	 }
.lichthu{
	font: 0.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; text-transform:none; 
	 }
.lichchung{
	font: 0.75em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; text-transform:none; 
	 }
.tinhtong{ float:right; display:inline; margin-right:44px; font-size:1.3em; font-style:italic; color:#5B776E;}
.tacgiaphaia{font-family: tacgiavn; color:var(--vntq-text-main); font-size:1.8em; text-transform: capitalize; float:right;  text-shadow: 4px 4px 4px var(--vntq-shadow-accent);}
.tga{font-family: tacgiavn; color:var(--vntq-text-main); font-size:1.8em;}
.tacgiaphai{font-style:italic; font-size:1.25em; margin:0.5em 0 0; padding-bottom:10px; clear:both; color:#5B776E;}
.chuto30{font-weight:bold; padding:4; margin:3 4px 0 0; line-height:42px; font-size:30px; color:var(--vntq-shadow-accent);}
.chuto30a{font:italic 2.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; color:#631F70;}
.chuto30b{font: 2.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; color:#18305B; opacity: 0.5; font-weight:bold;}
.chuto40{font-family: tuadevn; font-size:40px; color:#044; padding:4; margin:3 4px 0 0; line-height:62px;  text-shadow: 4px 4px 4px var(--vntq-shadow-accent);}
.chuto50{font-weight:bold; padding:4; margin:3 4px 0 0; line-height:62px; font-size:50px; color:var(--vntq-shadow-accent);}
.chutoso{font-weight:bold; padding:4; margin:3 4px 0 0; line-height:32px; font-size:30px; color:var(--vntq-brand-light-blue);}
.chutieude{font-family: Bookerly; font-weight:bold; font-size:1.5em; color:var(--vntq-text-main);}
.nguon{font-size:0.7em; color:var(--vntq-text-main);}
.datee{font-style:italic; font-size:0.9em; color:#0E5AF4;}
span.fc { font-family: Floral; font-size: 4em;}
p.tt:first-letter {	font-family: "chuhoa";	font-size: 4em;	line-height:0;	margin: 0;	padding: 0;	vertical-align: -0.15em;	color: #044;}
.truyen_text {	line-height:150%; color:var(--vntq-text-main); text-align:justify; padding-top:10px; font-family: Bookerly;}
.tuade { margin:24px auto; clear:both;}
.tieude { margin:0 auto; height:467px; width:420px; clear:both; }
.tieude_audio { margin:0 auto; height:267px; width:420px; clear:both; }
.tieude0anh { margin:24px auto; height:auto; clear:both; }
.tacgiad { float:right; display:inline; margin-right:24px; font-size:1.3em;}
.chuthich { font:normal 1.25em/1.2 "Times New Roman", Times, serif;}
.camonphai{ float:right; display:inline; font-weight:inherit; margin-right:44px; font-size:0.95em; font-style:italic; color:#76904F;  margin-bottom: 20px; margin-top: 20px; }
/*.anhbia { no-repeat center right; height:300px; clear:both; top:-600; left:400; }*/
#thanbai h1, #thanbai h2, #thanbai p { padding:0 12px; }
#skip { position:absolute; left:-999em; }
#thanbai h1 { color:var(--vntq-heading); font:normal 2em;  font-family: tuadevn; text-align: center;  text-shadow: 4px 4px 4px var(--vntq-shadow-accent);}
#thanbai h6 { color:var(--vntq-heading); font:normal 2.3em;  font-family: tuadevn; text-align: center;}
#thanbai h3 { color:#044; line-height: 1.3; font-size: 2.3em; font-family: tacgiavn; text-align: center;}
#thanbai h2 {color:#a6a364; margin:0.5em 0 0; font-family: tuahoi2; padding-bottom:10px; background:url(gachngangtrangchinhH2.png) no-repeat left bottom; clear:both; }
#thanbai li.menutruyen { color:#a6a364; font-style:italic; margin:0 0 0; padding-bottom:10px; background:url(gachngangtrangchinhH2.png) no-repeat left bottom; clear:both; }
#thanbai div.chochut { color:#a6a364; font-style:italic; margin:1.2em 0 0; padding-bottom:20px; background: url(/images/choooo.gif) no-repeat center bottom; clear:both; }
#thanbai h2 a { color:var(--vntq-heading); font-style:italic; font-weight:bold; margin:0.8em 0 0; padding-bottom:10px; }
#thanbai li.menutruyen a {	color: var(--vntq-heading);	font-size: 1em;	font-weight: bold;	margin: 0.8em 0 0;	padding-bottom: 10px; text-transform:uppercase;}
#thanbai div span.tacgia { float:right; display:inline; margin-right:44px; padding-left:4px; font:italic 0.8em "Century Gothic", Helvetica, Arial, sans-serif; color:#98926E; text-transform:uppercase;}
#thanbai div span.tacgia a { color:#647320;}
#thanbai div span.tacgia a:hover { color:#E7A0E6;}

#thanbai h1 a { height:29px; line-height:29px; color:#979687;  text-align:center; font-weight:bold}
#thanbai #fontchu a { color:#EC8D68; font-weight:bold}
#thanbai blockquote h3 { padding:12px 0 10px 15px; background:url(/images/bg_blockquote.png); }
#thanbai input {display:block; font-size:2.0em; font-weight:bold; color:#979687;}
#thanbai input.hientai {color:var(--vntq-text-main);}
#thanbai xemtruyen h3 { padding:12px 0 10px 15px; background:url(/images/bg_blockquote.png); }
#thanbai h1 + p:first-letter {
  font-family: chuhoa;
  color: #044;
  font-size: 400%;
  margin: -0.45em 0 -0.5em 0.5em;
  font-weight: normal;
}
#thanbai h1 + p {
  text-indent: 0;
}

#thanbai h3 +:first-letter {
  font-family: chuhoa;
  color: #06c;
  font-size: 400%;
  margin: -0.45em 0 -0.5em 0.5em;
  font-weight: normal;
}
#thanbai h3 + p {
  text-indent: 0;
}
.tuahoi1 {
  font-family: music;
  color:var(--vntq-text-subtitle);
  font-size: 1.8em;
  line-height: 1.8;
  text-align: center;
  text-indent: 0;
  text-shadow: 4px 4px 4px #9f9f90;
  font-weight: bold;
  text-transform: capitalize;  
}
.tuahoi {
  font-family: sochuong;
  color:var(--vntq-text-subtitle);
  font-size: 1.8em;
  text-align: center;
  text-indent: 0;
  text-shadow: 4px 4px 4px var(--vntq-shadow-accent);
  font-weight: bold;
  text-transform: capitalize;  
}
.chuhoadau {
  text-transform: capitalize;
  
}
.chuongso {
  font-family: tuahoi2;
  color:var(--vntq-text-subtitle);
  font-size: 1.8em;
  text-align: center;
  text-indent: 0;
  text-shadow: 4px 4px 4px var(--vntq-shadow-accent);
  
  line-height: 1.5;
}
#thanbai h4 + p {
  text-indent: 0;
}
#thanbai h4 + p:first-letter {
 font-family: chuhoa;
  color: #044;
  font-size: 400%;
  margin: -0.45em 0 -0.5em 0.5em;
  font-weight: normal;
}
#thanbai #fontchu a:hover img { border-color:#969586; }
#thanbai h1 a:hover { color:#966f48; }
#thanbai h2 a:hover { color:#CF8679; }
#thanbai #fontchu a:hover { color:#D39B63; }
#thanbai li.menutruyen a:hover { color:#966f48; }
#thanbai p { margin:0.4em 0 0; padding-bottom:0.8em; }
#thanbai p.firstletter:first-letter { display:blocK; float:left; padding:0; margin:0 4px 0 0; line-height:32px; font-size:50px; color:var(--vntq-shadow-accent); }
#thanbai div.chuhoa1:first-letter {display:blocK; float:left; padding:0; margin:0 4px 20px 0; line-height:32px; font-size:90px; color:var(--vntq-shadow-accent); }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

#thanbai div.chuhoavn {
    display: block;
}

#thanbai div.chuhoavn:first-letter{
    font-family: chuhoa;
    font-size: 4em;
    color: #044;
    font-weight: normal;
}
#thanbai h5 {font-family: DC; text-align:center; font-weight:bold; font-size:30px; color:#CA1DCF; }
#thanbai p a, #page #thanbai ul a { color:var(--vntq-hover-accent); border-bottom:dotted 1px #934900; }
#thanbai p a:hover, #page #thanbai ul a:hover { border-bottom:solid 1px; }
#thanbai p.media { margin:10px 0 0 12px; line-height:44px; padding-left:40px;}
#thanbai span.media {font-style:italic; font-size:0.9em; color:#963 }
#thanbai span.media a { color:#963 }
#thanbai span.media a:hover { color:#AF63AA }
#thanbai blockquote img { float:left; padding:1px; background:var(--vntq-bg-cream); border:solid 6px #baba99; }
#thanbai blockquote img { float:right; margin:4px 0 14px 30px; }
#thanbai img.iconReview { float:none; margin:0; background:none; border:0; }
#thanbai blockquote { margin:0.5em 8px auto; padding:2px; background:var(--vntq-bg-cream); border:solid 6px #d8d8ba; /*clear:both;*/ }
#thanbai blockquote p { margin:0; padding:5px 15px 12px; font-style:italic; color:var(--vntq-text-subtitle); background:url(/images/bg_blockquote.png); font:normal 1.25em/1.2 "Times New Roman", Times, serif; }
#thanbai xemtruyen p {text-align:justify; font-size:1.75em; margin:0; padding:0 15px 12px; color:var(--vntq-text-subtitle); background:url(/images/bg_blockquote.png); }
#thanbai h4 { background:url(gachgiua.png) no-repeat center; margin:24px auto; width: 100%; height:6px; clear:both; }
#letrai li.menutruyen { color:#a6a364; font-style:italic; margin:0.55em 0 0; padding-bottom:5px; background:url(gachngangtrangchinhH2.png) no-repeat left bottom; clear:both; }
#letrai li.menutruyen a {	color: var(--vntq-heading);	font-size: 0.95em;	font-weight: bold;	margin: 0.8em 0 0;	padding-bottom: 7px;}
#letrai li a:hover { color:#CC6600; text-decoration:none;}
#letrai h2 a { display:block;height:29px; line-height:29px; color:#515B32;  text-align:center; background:url(menutraih2.png) no-repeat center top; font-size:18px;   }
#letrai h4 a { display:block;height:29px; line-height:29px; color:#979687;  text-align:center; font-weight:bold;}
#letrai h5 a { display:block;height:29px; line-height:29px; color:#979687; font-weight:bold;}
#letrai blockquote h3 { padding:12px 0 10px 15px; background:url(/images/bg_blockquote.png); }
#letrai #boxnoibat h2 a { background-position:center -58px; }
#letrai h2 a:hover { color:#fffdd1; text-decoration:none;}
#letrai h4 a:hover { color:#A2743A; text-decoration:none;}
#letrai h5 a:hover { color:#fffdd1; text-decoration:none;}
#letrai h3 a { display:block; padding-bottom:4px; font-size:1.85em; /*font-weight:bold;*/ color:#805e29; }
#letrai #boxnoibat h3 { border-bottom:solid 1px #979687; padding-left:12px; }
#letrai h3 a:hover { color:#CC6600; text-decoration:none;}
#letrai blockquote img { float:left; margin:4px 18px 14px 12px; padding:1px; background:var(--vntq-bg-cream); border:solid 6px #baba99; }
#letrai blockquote img { float:right; margin:4px 0 14px 30px; }
#letrai .hr { background:url(gachgiua.png) no-repeat center center; margin:12px auto; height:6px; clear:both; }
#letrai .hr1 { margin:4px auto; height:4px; clear:both; }
#letrai blockquote { margin:2.5em 12px; padding:1px; background:var(--vntq-bg-cream); border:solid 6px #d8d8ba; /*clear:both;*/ }
#letrai blockquote p { margin:0; padding:0 15px 12px; font-style:italic; color:var(--vntq-text-subtitle); background:url(/images/bg_blockquote.png); }
#letrai .tentm { height:48px; margin-bottom:10px; text-indent:-999em; }
#boxnoibat { position:relative; z-index:1; margin-top:5px; margin-bottom:20px; }
#letrai img {	position: absolute;	z-index: 2;	/*top: -27px;	left: 54px;*/}
#letrai ul { margin-top:5px; padding:0 3px; }
#letrai li { margin:2px 0; padding:2px 2px 2px 2px; }
#letrai li h3 { padding-right: 60px; }
#letrai select {
	  width:100%;
	  border: 1px solid #4E741C;
	  padding:.65em 1em .5em 1em;
	  box-shadow: 0 2px 1px 0 rgba(0,0,0,1);
	  border-radius:10px;
	  background-color: #CBD5B8;
	  color: #4A5A2E;
	  
	}
#letrai option {
	  background:#546A11;
	  border-top:1px solid #385234;
	  padding:.3em 1em .3em 1em;
	  color:#FFFFFF;
	}
#letrai p a { font-size:0.95em; color:#41403a; display:block; }
#letrai #boxnoibat li img { position:absolute; z-index:2; top:15px; left:90px; }
#letrai #boxnoibat li p a:hover { background-color:#fffdd1; }
#letrai #boxnoibat li { position:relative; height:340px; padding:0px 0px 0 0px; background:#d6d4c3; }
#letrai #boxnoibat li img { position:absolute; z-index:2; top:-12px; left:140px; }
#letrai #boxnoibat li.xemnhieu img { top:-14px; left:127px; }
#letrai #boxnoibat li div { height:70px; padding:10px 0 14px;}
#letrai #boxnoibat p {margin:6px 6px 8px 3px; padding:0 0 0 0; font-size:0.95em; font-style:italic; color:var(--vntq-heading); }
#letrai #boxnoibat li.nhieusao p {background:url(list_itemReviews.png) no-repeat left 6px; }
#letrai #boxnoibat li.nhieusao span { display:block; float:left; display:inline; width:42px; margin-right:4px; padding-left:4px; font:italic 0.75em/16px "Century Gothic", Helvetica, Arial, sans-serif; color:var(--vntq-bg-cream); background:url(bg_dateMagazine.png) no-repeat; }
#letrai #boxnoibat li.xemnhieu span { display:block; float:left; display:inline; width:42px; margin-right:4px; padding-left:4px; font:italic 0.75em/16px "Century Gothic", Helvetica, Arial, sans-serif; color:var(--vntq-bg-cream); background:url(bg_dateMagazine.png) no-repeat; }
div.moctreo { position: absolute; margin: 2px 0px 0px -15px; width:181px; height:31px; background:url(moctreo.png) no-repeat center center; }
#boxnoibat div.moctreo { top:360px; left:3px; margin: 0px; }
#khoa {  position:relative; z-index:1; margin:0 0; clear:both;}
#credits { position:relative; z-index:1; width:940px; height:29px; line-height:28px; text-align:center; background:#0066cc; color:#ffffff; }
#credits h3 {	display: block;	padding-bottom: 4px;	font-size: 1.05em; /*font-weight:bold;*/	color: #F0D6AE;}
.quickSearch form fieldset { margin-top:2px; margin-left:50px; }
.quickSearch form input#chu { width:210px; margin-top:2px; padding-left:2px; background:#e5eef3; color:var(--vntq-heading); border:solid 1px #e5eef3 }
.quickSearch form input#theo { width:44px; height:21px; margin-top:2px; padding:3px 0 1px 2px; background:#9dcaf8; color:var(--vntq-heading);  }
#credits a {padding:10px 0; color:#ffffff; background:url(/images/gachcong.png) no-repeat 5px 25px; }
#credits a:hover { color:#eac77f; }
.hr { background:url(gachgiua.png) no-repeat center; margin:24px auto; height:6px; clear:both; }
.new { background: url(/images/New.gif) no-repeat center; margin:8px auto; height:20px; clear:both; }

/* GLOBALS */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.wrapper-demo {
   
}

.wrapper-demo:after {
    clear: both;
    content: "";
    display: table;
}
.main {
	width: 90%;
	margin: auto auto;
	position: relative;
}

/* DEMO 3 */

.wrapper-dropdown-3 {
    /* Size and position */
    position: relative;
    width: 100px;
    margin: 0 auto;
    padding: 1px;

    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;

    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}


.wrapper-dropdown-3 .dropdown {
  /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
	width: 160px;
    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-3 .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}

.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 1px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}


.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}

/* Active state */

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    display: block;
}




/* DEMO 5 */

.wrapper-dropdown-5 {
    /* Size & position */
    position: relative;
    width: 120px;
    margin: 0 auto;
    padding: 1px 1px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-5:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

.wrapper-dropdown-5 .dropdown {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
	width: 220px;
    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}

.wrapper-dropdown-5 .dropdown li {
    padding: 0 1px ;
}

.wrapper-dropdown-5 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 1px 0;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
    border: none;
}

.wrapper-dropdown-5 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}

/* Active state */

.wrapper-dropdown-5.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.wrapper-dropdown-5.active:after {
    border-color: #82d1ff transparent;
}

.wrapper-dropdown-5.active .dropdown {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

/* No CSS3 support: none */

h1 {
	font-size: 3em;
	margin: 0 0 0.33em;
}

h2 {
	font-size: 1.5em;
	margin: 0 0 0.5em;
}

h3 {
	font-size: 3.25em;
	margin: 0 0 0.67em;
}

h4 {
	font-size: 1em;
	margin: 0 0 1em;
}

h5 {
	font-size: 0.83em;
	margin: 0 0 1.33em;
}

h6 {
	font-size: 1.55em;
	margin: 0 0 2em;
}

h2, h3, h4, h6 {
	font-weight: 700;
	font:normal 0.75em/1.2 "Century Gothic", Trebuchet MS, Arial, sans-serif; !important;
}
/*
 * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
	border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
	font-weight: bold;
}

blockquote {
	margin: 1em 40px;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
	font-style: italic;
}

/*
 * Addresses styling not present in IE 6/7/8/9.
 */

mark {
	background: #ff0;
	color: #000;
}

/*
 * Addresses margins set differently in IE 6/7.
 */

p,
pre {
	margin: 1em 0;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre, code {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-spacing: 0;
	font-size: 13px;
	line-height: 16px;
}
code {
	padding: 0 3px;
	background-color: #eee;
	border-radius: 3px;
}
pre code {
	background-color: transparent;
	font-size: 16px;
	font-weight: bold;
	white-space: pre;
	word-wrap: normal;
}

/*
 * Addresses CSS quotes not supported in IE 6/7.
 */

q {
	quotes: none;
}

/*
 * Addresses `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
	content: '';
	content: none;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/*
 * Addresses margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
	margin: 0 0 1em;
}

dd {
	margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
	padding: 0;
}

/*
 * Corrects list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
	list-style: none;
	list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
	border: 0; /* 1 */
	-ms-interpolation-mode: bicubic; /* 2 */
	vertical-align: central  middle;
	max-width: 100%;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
	margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE 6/7.
 */

form {
	margin: 0;
	padding: 10px 0;
}

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * 1. Corrects color not being inherited in IE 6/7/8/9.
 * 2. Corrects text not wrapping in Firefox 3.
 * 3. Corrects alignment displayed oddly in IE 6/7.
 */

legend {
	border: 0; /* 1 */
	padding: 0;
	white-space: normal; /* 2 */
	*margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
	font-size: 100%; /* 1 */
	margin: 0; /* 2 */
	vertical-align: baseline; /* 3 */
	*vertical-align: middle; /* 3 */
}

/*
 * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
	line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"],
.mautut {
	-webkit-appearance: button; /* 2 */
	cursor: pointer; /* 3 */
	*overflow: visible;  /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
	cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
	*height: 13px; /* 3 */
	*width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box; /* 2 */
	box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
	overflow: auto; /* 1 */
	vertical-align: top; /* 2 */
	min-height: 150px;
	resize: vertical;
}

#content input[type="text"],
#content input[type="email"],
#content textarea {
	color: #666;

	width: 70%;
	min-width: 300px;

	margin: 5px 0 10px 0;
	padding: 8px 12px;

	background: rgba(245,245,245,0.37);

	border: 1px solid rgba(192,192,192,0.49);
	border-radius: 2px;

	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.17);
	box-shadow:         inset 0 1px 3px rgba(0,0,0,0.17);
}

/*
 * 1. :-moz-placeholder has been deprecated in favor of ::-moz-placeholder.
 * 2. Using :placeholder for completeness.
 */
::-webkit-input-placeholder {
	color: #9A1B1E;
}
:-moz-placeholder { /* 1 */
	color: #9A1B1E;
}
::-moz-placeholder {
	color: #9A1B1E;
}
:-ms-placeholder {
	color: #9A1B1E;
}
:placeholder { /* 2 */
	color: #9A1B1E;
}

#content input:focus,
#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content textarea:focus {
	outline: none;

	color: #333;
	background: #FFF;

	border: 1px solid #B24926;

	-webkit-box-shadow: 0px 0px 6px rgba(23,138,156,0.5),
						inset 0px 1px 3px rgba(0,0,0,0.2);

	box-shadow:         0px 0px 6px rgba(23,138,156,0.5),
						inset 0px 1px 3px rgba(0,0,0,0.2);
}

/**
 * Radio Buttons
 */

.radio {
	margin: 15px 0;
}

#content .radio ul {
	margin: 0;
	padding: 0;
	float: left;
}

#content .radio ul li {
	margin: 0;
	padding: 0;
	background: none;
	list-style-type: none;
}

.radio label {
	margin: 5px 0;
}

input[type=radio] {
	margin: 0 5px 0 0;
}

/**
 * Checkboxes
 */

input[type="checkbox"] {
	margin: 0 5px 0 0;
}

/**
 * Submit Buttons
 */

form input[type="submit"],
.mautut {
	margin: 40px 0;
	float: none;
}
#letrai form input[type="submit"],
#letrai .mautut {
	margin-bottom: 0; margin-top: 0;
	
	
	float: none;
}
/**
 * Top aligned labels
 */

.top-labels label,
.top-labels .radio label,
.top-labels input[type="text"],
.top-labels input[type="email"],
.top-labels textarea {
	display: block;
}

/**
 * Left aligned labels
 */

.left-labels label {
	padding: 5px 0 0 0;
	display: block;
}

.left-labels span {
	margin: 0 10px 0 0;
	min-width: 100px;

	float: left;

	text-align: left;
}

.left-labels .radio span {
	padding-top: 5px;
}

.left-labels .radio {
	display: block;
}

.left-labels .radio li label {
	margin: 0;
	padding: 0 0 5px 0;

	border: 0;
}

/**
 * Label descriptions
 */

label .field-description {
	font-size: 0.8em;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

#content table {
	margin: 1em 1em;
}

#content thead tr {
	border-bottom: 2px solid #666;
}

#content tbody tr {
	border-bottom: 1px solid #666;
}

#content tbody tr:hover {
	background-color: #eee;
}

#content th {
	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
}

#content th,
#content td {
	padding: .5em;
}

/* ==========================================================================
   Font Awesome
   ========================================================================== */

[class^="icon-"],
[class*=" icon-"] {
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;

  /* sprites.less reset */
  display: inline;
  width: auto;
  height: auto;
  line-height: normal;
  vertical-align: baseline;
  background-image: none;
  background-position: 0% 0%;
  background-repeat: repeat;
  margin-top: 0;
}

/* more sprites.less reset*/
.icon-white,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: none;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
  text-decoration: inherit;
  display: inline-block;
  speak: none;
}
/* makes sure icons active on rollover in links */
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: -10%;
  font-size: 1.3333333333333333em;
}
.btn [class^="icon-"],
.nav [class^="icon-"],
.btn [class*=" icon-"],
.nav [class*=" icon-"] {
  display: inline;
  /* keeps button heights with and without icons the same */

}
.btn [class^="icon-"].icon-large,
.nav [class^="icon-"].icon-large,
.btn [class*=" icon-"].icon-large,
.nav [class*=" icon-"].icon-large {
  line-height: .9em;
}
.btn [class^="icon-"].icon-spin,
.nav [class^="icon-"].icon-spin,
.btn [class*=" icon-"].icon-spin,
.nav [class*=" icon-"].icon-spin {
  display: inline-block;
}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"] {
  /* keeps button heights with and without icons the same */

}
.nav-tabs [class^="icon-"],
.nav-pills [class^="icon-"],
.nav-tabs [class*=" icon-"],
.nav-pills [class*=" icon-"],
.nav-tabs [class^="icon-"].icon-large,
.nav-pills [class^="icon-"].icon-large,
.nav-tabs [class*=" icon-"].icon-large,
.nav-pills [class*=" icon-"].icon-large {
  line-height: .9em;
}
li [class^="icon-"],
.nav li [class^="icon-"],
li [class*=" icon-"],
.nav li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li [class^="icon-"].icon-large,
.nav li [class^="icon-"].icon-large,
li [class*=" icon-"].icon-large,
.nav li [class*=" icon-"].icon-large {
  /* increased font size for icon-large */

  width: 1.5625em;
}
ul.icons {
  list-style-type: none;
  text-indent: -0.75em;
}
ul.icons li [class^="icon-"],
ul.icons li [class*=" icon-"] {
  width: .75em;
}
.icon-muted {
  color: #eeeeee;
}
.icon-border {
  border: solid 1px #eeeeee;
  padding: .2em .25em .15em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.icon-2x {
  font-size: 2em;
}
.icon-2x.icon-border {
  border-width: 2px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.icon-3x {
  font-size: 3em;
}
.icon-3x.icon-border {
  border-width: 3px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.icon-4x {
  font-size: 4em;
}
.icon-4x.icon-border {
  border-width: 4px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
[class^="icon-"].pull-left,
[class*=" icon-"].pull-left {
  margin-right: .3em;
}
[class^="icon-"].pull-right,
[class*=" icon-"].pull-right {
  margin-left: .3em;
}
.btn [class^="icon-"].pull-left.icon-2x,
.btn [class*=" icon-"].pull-left.icon-2x,
.btn [class^="icon-"].pull-right.icon-2x,
.btn [class*=" icon-"].pull-right.icon-2x {
  margin-top: .18em;
}
.btn [class^="icon-"].icon-spin.icon-large,
.btn [class*=" icon-"].icon-spin.icon-large {
  line-height: .8em;
}
.btn.btn-small [class^="icon-"].pull-left.icon-2x,
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
  margin-top: .25em;
}
.btn.btn-large [class^="icon-"],
.btn.btn-large [class*=" icon-"] {
  margin-top: 0;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
  margin-top: .05em;
}
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
  margin-right: .2em;
}
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
  margin-left: .2em;
}
.icon-spin {
  display: inline-block;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  -webkit-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(359deg); }
}
@-o-keyframes spin {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(359deg); }
}
@-ms-keyframes spin {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(359deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}
@-moz-document url-prefix() {
  .icon-spin {
    height: .9em;
  }
  .btn .icon-spin {
    height: auto;
  }
  .icon-spin.icon-large {
    height: 1.25em;
  }
  .btn .icon-spin.icon-large {
    height: .75em;
  }
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons */
.icon-glass:before                { content: "\f000"; }
.icon-music:before                { content: "\f001"; }
.icon-search:before               { content: "\f002"; }
.icon-envelope:before             { content: "\f003"; }
.icon-heart:before                { content: "\f004"; }
.icon-star:before                 { content: "\f005"; }
.icon-star-empty:before           { content: "\f006"; }
.icon-user:before                 { content: "\f007"; }
.icon-film:before                 { content: "\f008"; }
.icon-th-large:before             { content: "\f009"; }
.icon-th:before                   { content: "\f00a"; }
.icon-th-list:before              { content: "\f00b"; }
.icon-ok:before                   { content: "\f00c"; }
.icon-remove:before               { content: "\f00d"; }
.icon-zoom-in:before              { content: "\f00e"; }

.icon-zoom-out:before             { content: "\f010"; }
.icon-off:before                  { content: "\f011"; }
.icon-signal:before               { content: "\f012"; }
.icon-cog:before                  { content: "\f013"; }
.icon-trash:before                { content: "\f014"; }
.icon-home:before                 { content: "\f015"; }
.icon-file:before                 { content: "\f016"; }
.icon-time:before                 { content: "\f017"; }
.icon-road:before                 { content: "\f018"; }
.icon-download-alt:before         { content: "\f019"; }
.icon-download:before             { content: "\f01a"; }
.icon-upload:before               { content: "\f01b"; }
.icon-inbox:before                { content: "\f01c"; }
.icon-play-circle:before          { content: "\f01d"; }
.icon-repeat:before               { content: "\f01e"; }

/* \f020 doesn't work in Safari. all shifted one down */
.icon-refresh:before              { content: "\f021"; }
.icon-list-alt:before             { content: "\f022"; }
.icon-lock:before                 { content: "\f023"; }
.icon-flag:before                 { content: "\f024"; }
.icon-headphones:before           { content: "\f025"; }
.icon-volume-off:before           { content: "\f026"; }
.icon-volume-down:before          { content: "\f027"; }
.icon-volume-up:before            { content: "\f028"; }
.icon-qrcode:before               { content: "\f029"; }
.icon-barcode:before              { content: "\f02a"; }
.icon-tag:before                  { content: "\f02b"; }
.icon-tags:before                 { content: "\f02c"; }
.icon-book:before                 { content: "\f02d"; }
.icon-bookmark:before             { content: "\f02e"; }
.icon-print:before                { content: "\f02f"; }

.icon-camera:before               { content: "\f030"; }
.icon-font:before                 { content: "\f031"; }
.icon-bold:before                 { content: "\f032"; }
.icon-italic:before               { content: "\f033"; }
.icon-text-height:before          { content: "\f034"; }
.icon-text-width:before           { content: "\f035"; }
.icon-align-left:before           { content: "\f036"; }
.icon-align-center:before         { content: "\f037"; }
.icon-align-right:before          { content: "\f038"; }
.icon-align-justify:before        { content: "\f039"; }
.icon-list:before                 { content: "\f03a"; }
.icon-indent-left:before          { content: "\f03b"; }
.icon-indent-right:before         { content: "\f03c"; }
.icon-facetime-video:before       { content: "\f03d"; }
.icon-picture:before              { content: "\f03e"; }

.icon-pencil:before               { content: "\f040"; }
.icon-map-marker:before           { content: "\f041"; }
.icon-adjust:before               { content: "\f042"; }
.icon-tint:before                 { content: "\f043"; }
.icon-edit:before                 { content: "\f044"; }
.icon-share:before                { content: "\f045"; }
.icon-check:before                { content: "\f046"; }
.icon-move:before                 { content: "\f047"; }
.icon-step-backward:before        { content: "\f048"; }
.icon-fast-backward:before        { content: "\f049"; }
.icon-backward:before             { content: "\f04a"; }
.icon-play:before                 { content: "\f04b"; }
.icon-pause:before                { content: "\f04c"; }
.icon-stop:before                 { content: "\f04d"; }
.icon-forward:before              { content: "\f04e"; }

.icon-fast-forward:before         { content: "\f050"; }
.icon-step-forward:before         { content: "\f051"; }
.icon-eject:before                { content: "\f052"; }
.icon-chevron-left:before         { content: "\f053"; }
.icon-chevron-right:before        { content: "\f054"; }
.icon-plus-sign:before            { content: "\f055"; }
.icon-minus-sign:before           { content: "\f056"; }
.icon-remove-sign:before          { content: "\f057"; }
.icon-ok-sign:before              { content: "\f058"; }
.icon-question-sign:before        { content: "\f059"; }
.icon-info-sign:before            { content: "\f05a"; }
.icon-screenshot:before           { content: "\f05b"; }
.icon-remove-circle:before        { content: "\f05c"; }
.icon-ok-circle:before            { content: "\f05d"; }
.icon-ban-circle:before           { content: "\f05e"; }

.icon-arrow-left:before           { content: "\f060"; }
.icon-arrow-right:before          { content: "\f061"; }
.icon-arrow-up:before             { content: "\f062"; }
.icon-arrow-down:before           { content: "\f063"; }
.icon-share-alt:before            { content: "\f064"; }
.icon-resize-full:before          { content: "\f065"; }
.icon-resize-small:before         { content: "\f066"; }
.icon-plus:before                 { content: "\f067"; }
.icon-minus:before                { content: "\f068"; }
.icon-asterisk:before             { content: "\f069"; }
.icon-exclamation-sign:before     { content: "\f06a"; }
.icon-gift:before                 { content: "\f06b"; }
.icon-leaf:before                 { content: "\f06c"; }
.icon-fire:before                 { content: "\f06d"; }
.icon-eye-open:before             { content: "\f06e"; }

.icon-eye-close:before            { content: "\f070"; }
.icon-warning-sign:before         { content: "\f071"; }
.icon-plane:before                { content: "\f072"; }
.icon-calendar:before             { content: "\f073"; }
.icon-random:before               { content: "\f074"; }
.icon-comment:before              { content: "\f075"; }
.icon-magnet:before               { content: "\f076"; }
.icon-chevron-up:before           { content: "\f077"; }
.icon-chevron-down:before         { content: "\f078"; }
.icon-retweet:before              { content: "\f079"; }
.icon-shopping-cart:before        { content: "\f07a"; }
.icon-folder-close:before         { content: "\f07b"; }
.icon-folder-open:before          { content: "\f07c"; }
.icon-resize-vertical:before      { content: "\f07d"; }
.icon-resize-horizontal:before    { content: "\f07e"; }

.icon-bar-chart:before            { content: "\f080"; }
.icon-twitter-sign:before         { content: "\f081"; }
.icon-facebook-sign:before        { content: "\f082"; }
.icon-camera-retro:before         { content: "\f083"; }
.icon-key:before                  { content: "\f084"; }
.icon-cogs:before                 { content: "\f085"; }
.icon-comments:before             { content: "\f086"; }
.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-down:before          { content: "\f088"; }
.icon-star-half:before            { content: "\f089"; }
.icon-heart-empty:before          { content: "\f08a"; }
.icon-signout:before              { content: "\f08b"; }
.icon-linkedin-sign:before        { content: "\f08c"; }
.icon-pushpin:before              { content: "\f08d"; }
.icon-external-link:before        { content: "\f08e"; }

.icon-signin:before               { content: "\f090"; }
.icon-trophy:before               { content: "\f091"; }
.icon-github-sign:before          { content: "\f092"; }
.icon-upload-alt:before           { content: "\f093"; }
.icon-lemon:before                { content: "\f094"; }
.icon-phone:before                { content: "\f095"; }
.icon-check-empty:before          { content: "\f096"; }
.icon-bookmark-empty:before       { content: "\f097"; }
.icon-phone-sign:before           { content: "\f098"; }
.icon-twitter:before              { content: "\f099"; }
.icon-facebook:before             { content: "\f09a"; }
.icon-github:before               { content: "\f09b"; }
.icon-unlock:before               { content: "\f09c"; }
.icon-credit-card:before          { content: "\f09d"; }
.icon-rss:before                  { content: "\f09e"; }

.icon-hdd:before                  { content: "\f0a0"; }
.icon-bullhorn:before             { content: "\f0a1"; }
.icon-bell:before                 { content: "\f0a2"; }
.icon-certificate:before          { content: "\f0a3"; }
.icon-hand-right:before           { content: "\f0a4"; }
.icon-hand-left:before            { content: "\f0a5"; }
.icon-hand-up:before              { content: "\f0a6"; }
.icon-hand-down:before            { content: "\f0a7"; }
.icon-circle-arrow-left:before    { content: "\f0a8"; }
.icon-circle-arrow-right:before   { content: "\f0a9"; }
.icon-circle-arrow-up:before      { content: "\f0aa"; }
.icon-circle-arrow-down:before    { content: "\f0ab"; }
.icon-globe:before                { content: "\f0ac"; }
.icon-wrench:before               { content: "\f0ad"; }
.icon-tasks:before                { content: "\f0ae"; }

.icon-filter:before               { content: "\f0b0"; }
.icon-briefcase:before            { content: "\f0b1"; }
.icon-fullscreen:before           { content: "\f0b2"; }

.icon-group:before                { content: "\f0c0"; }
.icon-link:before                 { content: "\f0c1"; }
.icon-cloud:before                { content: "\f0c2"; }
.icon-beaker:before               { content: "\f0c3"; }
.icon-cut:before                  { content: "\f0c4"; }
.icon-copy:before                 { content: "\f0c5"; }
.icon-paper-clip:before           { content: "\f0c6"; }
.icon-save:before                 { content: "\f0c7"; }
.icon-sign-blank:before           { content: "\f0c8"; }
.icon-reorder:before              { content: "\f0c9"; }
.icon-list-ul:before              { content: "\f0ca"; }
.icon-list-ol:before              { content: "\f0cb"; }
.icon-strikethrough:before        { content: "\f0cc"; }
.icon-underline:before            { content: "\f0cd"; }
.icon-table:before                { content: "\f0ce"; }

.icon-magic:before                { content: "\f0d0"; }
.icon-truck:before                { content: "\f0d1"; }
.icon-pinterest:before            { content: "\f0d2"; }
.icon-pinterest-sign:before       { content: "\f0d3"; }
.icon-google-plus-sign:before     { content: "\f0d4"; }
.icon-google-plus:before          { content: "\f0d5"; }
.icon-money:before                { content: "\f0d6"; }
.icon-caret-down:before           { content: "\f0d7"; }
.icon-caret-up:before             { content: "\f0d8"; }
.icon-caret-left:before           { content: "\f0d9"; }
.icon-caret-right:before          { content: "\f0da"; }
.icon-columns:before              { content: "\f0db"; }
.icon-sort:before                 { content: "\f0dc"; }
.icon-sort-down:before            { content: "\f0dd"; }
.icon-sort-up:before              { content: "\f0de"; }

.icon-envelope-alt:before         { content: "\f0e0"; }
.icon-linkedin:before             { content: "\f0e1"; }
.icon-undo:before                 { content: "\f0e2"; }
.icon-legal:before                { content: "\f0e3"; }
.icon-dashboard:before            { content: "\f0e4"; }
.icon-comment-alt:before          { content: "\f0e5"; }
.icon-comments-alt:before         { content: "\f0e6"; }
.icon-bolt:before                 { content: "\f0e7"; }
.icon-sitemap:before              { content: "\f0e8"; }
.icon-umbrella:before             { content: "\f0e9"; }
.icon-paste:before                { content: "\f0ea"; }
.icon-lightbulb:before            { content: "\f0eb"; }
.icon-exchange:before             { content: "\f0ec"; }
.icon-cloud-download:before       { content: "\f0ed"; }
.icon-cloud-upload:before         { content: "\f0ee"; }

.icon-user-md:before              { content: "\f0f0"; }
.icon-stethoscope:before          { content: "\f0f1"; }
.icon-suitcase:before             { content: "\f0f2"; }
.icon-bell-alt:before             { content: "\f0f3"; }
.icon-coffee:before               { content: "\f0f4"; }
.icon-food:before                 { content: "\f0f5"; }
.icon-file-alt:before             { content: "\f0f6"; }
.icon-building:before             { content: "\f0f7"; }
.icon-hospital:before             { content: "\f0f8"; }
.icon-ambulance:before            { content: "\f0f9"; }
.icon-medkit:before               { content: "\f0fa"; }
.icon-fighter-jet:before          { content: "\f0fb"; }
.icon-beer:before                 { content: "\f0fc"; }
.icon-h-sign:before               { content: "\f0fd"; }
.icon-plus-sign-alt:before        { content: "\f0fe"; }

.icon-double-angle-left:before    { content: "\f100"; }
.icon-double-angle-right:before   { content: "\f101"; }
.icon-double-angle-up:before      { content: "\f102"; }
.icon-double-angle-down:before    { content: "\f103"; }
.icon-angle-left:before           { content: "\f104"; }
.icon-angle-right:before          { content: "\f105"; }
.icon-angle-up:before             { content: "\f106"; }
.icon-angle-down:before           { content: "\f107"; }
.icon-desktop:before              { content: "\f108"; }
.icon-laptop:before               { content: "\f109"; }
.icon-tablet:before               { content: "\f10a"; }
.icon-mobile-phone:before         { content: "\f10b"; }
.icon-circle-blank:before         { content: "\f10c"; }
.icon-quote-left:before           { content: "\f10d"; }
.icon-quote-right:before          { content: "\f10e"; }

.icon-spinner:before              { content: "\f110"; }
.icon-circle:before               { content: "\f111"; }
.icon-reply:before                { content: "\f112"; }
.icon-github-alt:before           { content: "\f113"; }
.icon-folder-close-alt:before     { content: "\f114"; }
.icon-folder-open-alt:before      { content: "\f115"; }

/* Manual Font Awesome Styles */
[class^="icon-"]::before, [class^="icon-"]::after,
[class*=" icon-"]::before, [class*=" icon-"]::after {
  font-family: FontAwesome, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#content ul li[class^="icon-"],
#content ul li[class*=" icon-"] {
	background: none;
	padding-left: 0;
}

h2 [class^="icon-"],
h2 [class*=" icon-"],
h3 [class^="icon-"],
h3 [class*=" icon-"] {
	margin-right: 7px;
}

/* Global Structure
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	background-image: linear-gradient(to bottom right, var(--vntq-brand-dark-blue), var(--vntq-brand-light-blue));
	color: var(--vntq-brand-dark-blue);
	font: 15px/22.5px "Century Gothic", Trebuchet MS, Arial, sans-serif;
	
}

/*iframe {
	border: 1px solid #bfbfbf;
	padding: 1px;
}
*/
#container {
	/*background: #282828;98edf1*/
	margin: 0 auto;
	padding: 0 10px;

}

#content-wrapper {
	background-color: rgba(0, 0, 0, 0.18);
	background-image:url(/images/box_mtl_ctr.gif);
	border-radius: 10px 10px 0 0;
	border-right: 1px solid rgba(2, 2, 2, 0.28);
	border-left: 1px solid rgba(2, 2, 2, 0.28);
	border-bottom: 1px solid rgba(250, 250, 250, 0.27);
	
	/*-webkit-box-shadow: 0 0 0 0 rgba(1, 1, 1, 0.87), 3px 0 5px -3px rgba(1, 1, 1, 0.87);
	box-shadow: -3px 0 5px -3px rgba(0, 0, 1, 0.87), 3px 0 5px -3px rgba(0, 0, 1, 0.87);*/
	padding: 15px 0 0 0;
	border-radius: 0 0 10px 10px;
	position: relative;
}
.no-boxshadow #content-wrapper {
	border: 1px solid #333;
}

.constrain {
	max-width: 1090px;
	display: block;
	margin: auto auto;
	padding-top: 0;
	padding-left: 10px;
	padding-right: 10px;
}

.lte8 .constrain {
  max-width: 1090px; /* Accomodate for padding + 1px border */
}

#content {
	float: left;
	width: 71%;
}
#truyentranh {
	float: left;
	width: 100%;
}
#truyentranh a {
	text-decoration:none;
}
.content-right #content {
	float: right;
}

.content-full #content {
	width: 100%;
	padding-left: 5%;
	padding-right: 5%;
}

.content-full.full-width #content {
	padding-left: 0;
	padding-right: 0;
}

#sidebar,
.sidebar-left,
.sidebar-right {
	padding-left: 10px;
	width: 29%;
}

#sidebar,
.sidebar-right {
	float: right;
	margin-right: -25px;
	position: relative;
	/*-webkit-border-image: -webkit-linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
	border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
	box-shadow: inset 15px 0 5px -16px #e7e7e7;
	background-image: -webkit-radial-gradient(left, #f2f2f2, #ffffff 80%);
	background-image: radial-gradient(left, #f2f2f2, #ffffff 80%);
	border: 0;
	border-left: 1px solid #efefef;*/
}


.content-right #sidebar,
.sidebar-left {
	float: left;
	border-left: 0;
	border-right: 0;
	margin: -10px 0 0 -10px;
	/*-webkit-border-image: -webkit-linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
	border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 85%, #ffffff);
	box-shadow: inset 15px 0 5px -16px #e7e7e7;
	background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 80%);
	background-image: radial-gradient(right, #f2f2f2, #ffffff 80%);*/
}

.entry-summary p {
	margin: 0;
}


/* Global Nav
   ========================================================================== */

#global-nav {
	background-image: linear-gradient(to bottom right, var(--vntq-brand-dark-blue), var(--vntq-brand-light-blue));
	background-color:var(--vntq-brand-dark-blue);
}

#global-nav nav {
	height: 44px;
}

#global-nav nav ul {
	text-align: left;
	display: inline;
	float: left;
	margin: 0;
	list-style: none;
	border-right: 1px solid rgba(255, 255, 255, 0.0976562);
	border-left: 1px solid rgba(0, 0, 0, 0.347656);
}

#global-nav nav ul.links {
	float: right;
}

#global-nav nav ul li {
	font: bold 23px/27px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	display: inline-block;
	float: left;
	position: relative;
	top: 1px;
	cursor: pointer;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	text-shadow: 0 0px 2px #000;
	border-left: 1px solid rgba(255, 255, 255, 0.0976562);
	border-right: 1px solid rgba(0, 0, 0, 0.347656);
}
.ie #global-nav nav ul li {
	top: 2px;
}

#global-nav nav ul li:hover {
	background-image: linear-gradient(to bottom right, var(--vntq-brand-dark-blue), var(--vntq-brand-light-blue));
	background-color: var(--vntq-brand-dark-blue);/*#707F3A;*/
	color: #fff;
}

#global-nav nav ul li i {
	height: 1em;
}

#global-nav nav ul li a {
	color: #e6e6e6;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	display: block;
	font-size:24px;
	padding: 8px 12px;
}

#global-nav nav ul li ul {
	padding: 0;
	position: absolute;
	top: 40px;
	left: -2px;
	width: 178px;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-box-shadow: 0 43px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
	z-index: 400;
}

#global-nav nav ul li ul.wide {
	width: 260px;
}

#global-nav nav ul li ul li {
	/*background-image: linear-gradient(to bottom right, var(--vntq-brand-dark-blue), var(--vntq-brand-light-blue));*/
	background-color:var(--vntq-brand-dark-blue);/*#707F3A;#5F7020;*/
	display: block;
	color: #fff;
	float: none;
}

#global-nav nav ul li ul li:hover { background: #777;/*#707F3A;*/ }
#global-nav nav ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

#container,
footer {
	border-top: 1px solid #7ACEF4;
}
/*The loai navi*/
 #theloai-nav {
	background-color:#5F7020;
}

#theloai-nav nav {
	height: 44px;
}

#theloai-nav nav ul {
	text-align: left;
	display: inline;
	float: left;
	margin: 0;
	list-style: none;
	border-right: 1px solid rgba(255, 255, 255, 0.0976562);
	border-left: 1px solid rgba(0, 0, 0, 0.347656);
}

#theloai-nav nav ul.links {
	float: right;
}

#theloai-nav nav ul li {
	font: bold 23px/27px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	display: inline-block;
	float: left;
	position: relative;
	top: 1px;
	cursor: pointer;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	text-shadow: 0 0px 2px #000;
	border-left: 1px solid rgba(255, 255, 255, 0.0976562);
	border-right: 1px solid rgba(0, 0, 0, 0.347656);
}
.ie #theloai-nav nav ul li {
	top: 2px;
}

#theloai-nav nav ul li:hover {
	background-color: ##707F3A;
	color: #fff;
}

#theloai-nav nav ul li i {
	height: 1em;
}

#theloai-nav nav ul li a {
	color: #e6e6e6;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	display: block;
	font-size:24px;
	padding: 8px 12px;
}
/* Giữ nguyên style hiện có của bạn (không sửa) */
nav#main .searchform {
	float: right;
	width: 35%;
	margin-top: -12px;
	padding: 0;
	border-radius: 10px;
	position: relative; /* bắt buộc để suggestions định vị theo form */
}

	nav#main .searchform input {
		text-decoration: none;
		font: 9px/9x "Lucida Grande", Lucida, Verdana, sans-serif;
		padding: 5px 10px;
		margin: 0;
		background-color: transparent;
		border-style: none;
		color: #3A5315;
		line-height: 1.8;
		width: 85%;
		box-shadow: none;
	}

		nav#main .searchform input:focus {
			outline: none;
		}

	/* ===================== */
	/* GỢI Ý: reset xung đột */
	/* ===================== */

	/* Khối gợi ý */
	nav#main .searchform #searchSuggestions {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		border: 1px solid #ccc;
		border-top: none;
		z-index: 9999;
		max-height: 300px;
		overflow-y: auto;
		box-shadow: 0 2px 6px rgba(0,0,0,0.15);
		font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
		font-size: 14px;
		padding: 6px 0; /* giảm padding tổng thể */
	}

		/* Nhóm gợi ý */
		nav#main .searchform #searchSuggestions .suggest-group {
			padding: 4px 10px; /* giảm padding nhóm */
		}

		/* Tiêu đề nhóm */
		nav#main .searchform #searchSuggestions .group-title {
			display: block;
			font-weight: 600; /* chữ đậm vừa phải */
			font-size: 13px; /* nhỏ hơn */
			color: #333;
			margin: 4px 0 4px;
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 2px;
			clear: both;
			text-transform: capitalize; /* viết hoa chữ cái đầu mỗi từ */
		}

		/* Danh sách */
		nav#main .searchform #searchSuggestions ul {
			list-style: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}

		nav#main .searchform #searchSuggestions li {
			display: block !important;
			float: none !important;
			clear: both !important;
			width: 100% !important;
			white-space: normal !important;
			line-height: 0.9; /* giảm khoảng cách giữa các dòng */
		}

		/* Item và link */
		nav#main .searchform #searchSuggestions .suggestion-item {
			padding: 4px 8px; /* giảm padding item */
			cursor: pointer;
			transition: background-color 0.2s ease;
		}
#theloai-nav nav ul li ul {
	padding: 0;
	position: absolute;
	top: 40px;
	left: -2px;
	width: 178px;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	transition: opacity 0.2s;
	-webkit-box-shadow: 0 43px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
	z-index: 400;
}

#theloai-nav nav ul li ul.wide {
	width: 260px;
}

#theloai-nav nav ul li ul li {
	background-color:#5F7020;
	display: block;
	color: #fff;
	float: none;
}

#theloai-nav nav ul li ul li:hover { background: #707F3A; }
#theloai-nav nav ul li:hover ul {
	display: block;
	opacity: 1;
	visibility: visible;
}

/* Logo & Navigation
   ========================================================================== */

#logo-events {
	clear: both;
	padding-top: 0px;
	padding-bottom: 0px;
}


nav#main {
	margin-top: -6px;
	background-color: rgba(0, 0, 0, 0.18);
	background-image:url(/images/box_mtl_ctr.gif);
	border-radius: 10px 10px 0 0;
	border-right: 1px solid rgba(2, 2, 2, 0.28);
	border-left: 1px solid rgba(2, 2, 2, 0.28);
	border-top: 1px solid rgba(250, 250, 250, 0.27);
	-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
	box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
	-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.7);
	box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
nav#loai {
	margin-top: -10px;
	background-color: rgba(0, 0, 0, 0.18);
	background-image:url(/images/box_mtl_ctr.gif);
	border-radius: 10px 10px 0 0;
	border-right: 1px solid rgba(2, 2, 2, 0.28);
	border-left: 1px solid rgba(2, 2, 2, 0.28);
	border-top: 1px solid rgba(250, 250, 250, 0.27);
	-webkit-box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
	box-shadow: rgba(255,255,255,0.3) 0 1px 0, rgba(0,0,0,0.3) 0 -1px 0;
	-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.7);
	box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}


.no-boxshadow nav#main {
	border-top: 1px solid #333;
	border-left: 1px solid #333;
	border-right: 1px solid #333;
}



/*nav#main li a {
	font:normal 0.75em/1.2 "Century Gothic", Trebuchet MS, Arial, sans-serif;
	color:var(--vntq-heading); font-size:0,95em; text-transform:uppercase; line-height:18px;
	text-decoration: none;
	padding: 6px 10px;
	display: block;
	border: 1px solid transparent;
	/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.76);
}

nav#main li a:hover{
	color:var(--vntq-bg-cream); top:0px; background:#696d48 url(/images/nenmenu.png) repeat-x; border:1px solid var(--vntq-heading);  padding: 6px 10px; line-height:16px;
	}
nav#main li.current a{
	padding:6px 0; color:var(--vntq-hover-accent); background:url(/images/gachcong.png) no-repeat -10px 25px;
	}*/

nav#main li { float:left; line-height:34px; padding:0 5px; margin-right:5px; display:inline; }
nav#main li ul li { display:block; float:none; }
nav#main li.submenu { position:relative; }
nav#main li a { padding:8px 0; color:var(--vntq-heading); text-transform:uppercase; line-height:18px; text-decoration:none; font:normal 0.85em/1.2 "Century Gothic", Trebuchet MS, Arial, sans-serif;}
nav#main li.submenu:hover { position:relative; top:0px; background:#696d48 url(nenmenu.png)}
nav#main li.submenu:hover a {color:var(--vntq-bg-cream); }
nav#main li.submenu div { display:none; position:absolute; z-index:10; left:-1px; top:34px; border:1px solid var(--vntq-heading); }
nav#main li.submenu:hover div { display:block; margin-top:-1px; }
nav#main li.submenu div ul { padding:10px 0; width:190px; background:#d9d6c8 url(submenu_Bg.png) repeat-x; overflow:hidden; border:1px solid #fff; }
nav#main li.submenu div ul li { padding:0; padding-left:10px; line-height:18px; }
nav#main li.submenu div ul li a { display:block; font-size:1.05em; text-transform:none; }
nav#main li.submenu:hover div ul li a { color:var(--vntq-heading); padding:5px 5px; }
nav#main li.submenu:hover div ul li a:hover { color:var(--vntq-hover-accent); /*color:var(--vntq-bg-cream); background:#929476;*/ }
nav#main li.offers {  text-align:right; }
nav#main li.offers a { padding:6px 0; font:italic 0.95em "Comic Sans MS", Trebuchet MS, Verdana, sans-serif; text-transform:none; }
nav#main li.offers a:hover { padding:8px 0; color:var(--vntq-hover-accent); background:url(/images/gachcong.png) no-repeat -10px 25px; }
nav#main li.current a {  padding:8px 0; color:var(--vntq-hover-accent); background:url(/images/gachcong.png) no-repeat -8px 25px; }
nav#main li.submenu div ul li.current a { color:var(--vntq-hover-accent); }
nav#main li.home { margin-right:0; margin-left:5px; padding-right:0; }
nav#main li.home a { display:block; height:10px; width:40px; text-indent:-9999px; padding-right:0px; margin:10px 0 0 0; background:url(/images/home-icon.png) no-repeat center top; }
nav#main li.home a:hover { background-position:center -14px; }
nav#main .searchform {
	background: none;
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
	box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
	border-radius: 16px;
	border: 1px solid rgba(0,0,0,0.25);
	color: #CF6B13;
	/*text-shadow: rgba(0, 0, 0, 0.796875) 0px -1px 0px, rgba(0, 0, 0, 0.296875) 0px 0px 10px;*/
}

nav#main .searchform {
	float: right;
	width: 35%;
	margin-top: -12px;
	padding: 0;
	border-radius: 10px;
	position: relative;
}

nav#main .searchform input {
	text-decoration: none;
	font: 14px/14px "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 5px 10px;
	margin: 0;
	background-color: transparent;
	border-style: none;
	color: #3A5315;
	line-height: 1.8;
	/*text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.76);*/
	width: 85%;
	box-shadow: none;
}

.no-boxshadow nav#main .searchform {
	border: 1px solid #333;
}

.no-boxshadow nav#main .searchform input {
	background: #fff;
	color: #333;
}


/*
 * 1. :-moz-placeholder has been deprecated in favor of ::-moz-placeholder.
 * 2. Using :placeholder for completeness.
 */
nav#main .searchform input::-webkit-input-placeholder {
	color: #8E8888;
}
nav#main .searchform input:-moz-placeholder { /* 1 */
	color: #8E8888;
}
nav#main .searchform input::-moz-placeholder {
	color: #8E8888;
}
nav#main .searchform input:-ms-input-placeholder {
	color: #8E8888;
}
nav#main .searchform input:placeholder { /* 2 */
	color: #8E8888;
}

nav#main .searchform .icon-search {
	position: absolute;
	right: 10px;
	top: 3px;
	bottom: 3px;
	border-width: 0;
	border-left: 1px solid rgba(7, 7, 7, 0.65);
	background-color: transparent;
	padding: 0 0 0 7px;
	opacity: 0.33;
	color: #75880A;
}
nav#main .searchform .se-search {
	position: absolute;
	right: 10px;
	top: 3px;
	bottom: 3px;
	border-width: 0;
	border-left: 1px solid rgba(7, 7, 7, 0.65);
	background-color: transparent;
	padding: 0 0 0 7px;
	opacity: 0.33;
	color: #75880A;
}

#broadcast {
	height: 100px;
}

/* Typography & Global Styles
   ========================================================================== */

#content a {
	text-decoration: none;
}

#content a:hover {
	text-decoration: none;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: none;
}

p {
	margin-bottom: 15px;
	margin-top: 0;
}

b, strong {
	font-weight: bold;
	color: #6d6d6d
}

em, i {
	color: #6d6d6d;
	font-style: italic;
}

hr {
	background-image: url(gachgiua.png);
	height: .75em;
	border: none;
	margin: .75em 0;
}

#content code a {
	text-decoration: none;
}

pre strong,
pre b {
	color: #fff;
	font-weight: bold;
}

#content blockquote {
	margin: 20px 0;
}

#content blockquote p {
	font: italic normal 23px/26px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	color: #828282;
	margin-left: 0;
	margin-bottom: 0;
	padding: 20px 30px;
	position: relative;
	text-shadow: 0 1px 0 #ffffff;
	background-color: #f2f2f2;
}

#content ol,
#content ul {
	margin: 0 0 20px 20px;
}

#content ul ul {
	margin-bottom: 0;
}

#content ul li {
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 20px;
	line-height: 20px;
	list-style-type: none;
	
}

#content ul.block-grid li {
	background: none;
}

#content ol {
	counter-reset: li; /* Initiate a counter */
}

#content ol > li {
	position: relative; /* Give each list item a left margin to make room for the numbers */
	list-style: none;
	padding-left: 10px;
	margin-right: 0;
	margin-top: 5px;
	margin-left: 30px;
}
#content ol > li:before {
	content: counter(li); /* Use the counter as content */
	counter-increment: li; /* Increment the counter by 1 */
	/* Position and style the number */
	position: absolute;
	top: 1px;
	left: -25px;
	box-sizing: border-box;
	width: 20px;
	/* Some space between the number and the content in browsers that support
		generated content but not positioning it */
	color: #fff;
	text-align: center;
	background-color: #ababab;
	height: 19px;
	width: 19px;
	padding-top: 0px;
	font: bold 11px/19px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	border-radius: 12px;
}

.lt-ie8 #content ol,
.lt-ie7 #content ol {
	margin-left: 20px;
}

.lt-ie8 #content ol li,
.lt-ie7 #content ol li {
	margin-left: 30px;
	list-style-type: decimal;
	padding-left: 0px;
}

#content img.full,
#content figure.full {
	display: block;
	width: 100%;
	max-width: 100%;
}

.lt-ie8 #content figure img {
	position: relative;
}

.lt-ie7 #content figure.full,
.lt-ie8 #content figure.full {
	width: 99%;
}

#content img.full,
#content img.left,
#content img.right,
#banner img.full {
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.20);
}

#content img.noborder,
#content figure.noborder {
	box-shadow: none;
	border: none;
	background: none;
}

#content img.full,
#content img.left,
#content img.right,
#content figure.full,
#content figure.left,
#content figure.right {
	margin-bottom: 20px;
	float: left;
}

#content img.right,
#content figure.right {
	float: right;
	margin-left: 15px;
}
img.giua {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.lt-ie8 #content img.right,
.lt-ie8 #content figure.right,
.lt-ie7 #content img.right,
.lt-ie7 #content figure.right {
	float: left;
	margin-left: 0px;
	margin-right: 15px;
}

#content img.left,
#content figure.left {
	margin-right: 15px;
}


#content figure img {
	margin: 0px !important;
	margin-bottom: 0px !important;
}

#content figcaption {
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.20);
	font: italic 700 12px/20px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #737272;
	clear: both;
	margin-top: -10px;
	background-color: #f2f2f2;
}

#content figure.noborder figcaption {
	box-shadow: none;
	background: none;
	text-align: center;
}

#content .embed,
#content .embed_media {
	position: relative;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.20);
	margin-bottom: 20px;
}

#portfolio.media #banner .embed {
	margin-bottom: 40px;
}

.embed iframe,
.embed_media iframe,
.embed object,
.embed_media object,
.embed embed,
.embed_media embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#content h1 {
	font-size: 26px;
	line-height: 26px;
}

.content-full #content h1 {
	text-align: center;
}

#content h2 {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 10px;
}

#content h3 {
	font-size: 20px;
	line-height: 20px;
	color: #666;
}

#content h1.block,
#content h2.block {
	padding: 10px 2%;
	background: url(/images/lich1.jpg) #ececec;
	text-shadow: 0 1px 0 #ffffff;
}

p.author {
	color: #ababab;
	font-family: "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	font-weight: 700;
	margin-top: -20px;
}

p.author a {
	color: #ababab;
}

.meta {
	padding: 2%;
	padding-bottom: .5%;
	margin-bottom: 20px;
	font: 700 "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	color: #666;
	background: url(/images-foundation/gauze.png) #f0f0f0;
	text-shadow: 0 1px 0 #ffffff;
}

#banner-large-image {
	text-align: center;
	margin-bottom: 30px;

}

#banner-large-image .vertically-centered-black-bg {
	height: 50%;
	width: 100%;
	margin-top: 24%;
	display: block;
	background-color: rgba(0, 0, 0, 0.68);
	position: absolute;
	padding-top: 3.5%;
}

#banner-large-image h1, #banner-large-image h2 {
	font: bold 60px/60px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	margin-bottom: 0;
	color: #fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
}

#banner-large-image p {
	color: #CCCCCC;
	font: 700 normal 24px/36px "klavika-web", "Helvetica Neue", sans-serif;
}

#banner-secondary {
	background-image: url(/images/dark-grey-tile.png);
	margin: -20px -25px 15px;
	padding: 20px;
}

#banner-secondary h1, 
#banner-secondary h2 {
	margin-bottom: 0;
	color: #fff;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.85);
}

#banner-secondary h1 {
	font-size: 48px;
	line-height: 54px;
}

#banner-secondary h2 {
	font-size: 36px;
	line-height: 42px;
}

#banner-secondary p {
	color: #ccc;
	font: 22px/26px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	padding-left: 15%;
	padding-right: 15%;
}

#banner-secondary a,
#banner-secondary a:hover {
	color: #7ACEF4;
}

#banner-secondary em,
#banner-secondary i {
	color: #fff;
}

#banner-secondary.large-banner {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

#banner-secondary.large-banner h1,
#banner-secondary.large-banner h2 {
	margin-bottom: 10px;
}

#banner-secondary.large-banner h1 {
	font-size: 60px;
	line-height: 60px;
}

#banner-secondary.large-banner h2 {
	font-size: 48px;
	line-height: 48px;
}

#banner-secondary.large-banner h3 {
	font-size: 36px;
	line-height: 36px;
}

.center{
	text-align: center !important;
}

.callout-block {
	background-image: url(/images/gauze.png);
	padding: 20px;
}

/* Buttons
   ========================================================================== */

a.button,
#content a.button,
.button,
input[type="submit"],
.mautut {
	border-radius: 5px;
	border: 1px solid #D3D9B9;
	-webkit-box-shadow:
		0 0 5px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0px -1px 0px rgba(255, 255, 255, 0.45),
		inset 1px 0px 0px rgba(255, 255, 255, 0.45),
		inset -1px 1px 0px rgba(255, 255, 255, 0.45);
	box-shadow:
		0 0 5px rgba(0, 0, 0, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0px -1px 0px rgba(255, 255, 255, 0.45),
		inset 1px 0px 0px rgba(255, 255, 255, 0.45),
		inset -1px 1px 0px rgba(255, 255, 255, 0.45);
	text-decoration: none;
	color: #fff !important;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.35);
	padding: 7px 13px;
	font: bold 16px/16px "klavika-web", "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
	background-color: #A1AA88;/*d18f4f;*/
	float: left;
}


a.button:hover,
#content a.button:hover,
.button:hover,
input[type="submit"]:hover,
.mautut:hover {
	background-color: #cc8540;
}

a.button.large,
#content a.button.large,
button.large,
input[type="submit"].large {
	font-size: 20px;
	padding: 12px 20px;
}

a.button.dark,
#content a.button.dark,
.button.dark,
input[type="submit"].dark {
	background-color: #666;
}

a.button.dark:hover,
#content a.button.dark:hover,
.button.dark:hover,
input[type="submit"].dark:hover {
	background-color: #424141;
}

/* Sidebar
   ========================================================================== */

#sidebar h3 {
	font: 8px/18px;
	background-color:#B6BB9B;
	margin-left: -20px;
	margin-right: -20px;
	padding: 12px 20px;
	text-shadow: 0 1px 0 #CCB989;
}
#sidebar h3.mucluc {
	
	background:none	
}

#sidebar li {
	padding: 5px 0 5px 20px;
	list-style-type: none;
	background: url(/images/bullet.png) no-repeat 0 12px;
	text-shadow: 0 1px 0 #ffffff;
}

#sidebar li a {
	color: #4d4d4d;
	text-decoration: none;
	display: block;
}

#sidebar nav#secondary li {
	background-image: none;
	padding-left: 0;
}

#sidebar nav#secondary li.current {
	background-color: #eee;
	margin-left: -35px;
	margin-right: -20px;
	padding-left: 35px;
	font-weight: bold;
}

/* == Footer
   ========================================================================== */

footer {text-align: center;
	background-image: radial-gradient(var(--vntq-brand-light-blue), var(--vntq-brand-dark-blue));
	background-color:var(--vntq-brand-dark-blue);/*0A3B5C*/
	color:#fff;
	margin-top: -20px;
	padding-top: 40px;
}
footer a,
footer strong {
	color: #fff;
	text-decoration: none;
	}
footer a:hover { color:#C9C38A;
text-decoration:none;

}
#sohuu {
	max-width: 900px;
	
}
/*
footer.simple {
	padding-top: 45px;
	padding-bottom: 10px;
}

footer a,
footer strong {
	color: #fff;
	text-decoration: none;
}

footer .download {
	text-align: center;
	color: #fff;
	padding: 10px 2% 15px 2%;
	line-height: 140%;
}

footer .download strong { margin-right: 10px; }

footer .download > span { white-space: nowrap; }

footer .download a { margin: 0 10px; }

footer .download a em {
	font-style: normal;
	color: #aaa;
}

footer .download a:hover { border-bottom: solid 1px #888; }

footer .footer-icon-links li {
	width: 22%;
	margin-left: 11%;
	float: left;
}

footer .footer-icon-links li a {
	display: block;
	line-height: inherit;
	font-size: 18px;
	float: left;
	position: relative;
	width: auto;
	text-align: left;
	padding-left: 10px;
}

footer .footer-icon-links li a:before {
	position: absolute;
	left: -35px;
	top: 10px;
	font-size: 2em;
	color: #4d4d4d;
	text-shadow: 0 -1px 0 #000000;
}

footer .footer-icon-links li small {
	display: block;
	font-size: 14px;
	color: #777;
	line-height: 120%;
}

footer .footer-icon-links li:hover a:before {
	color: #d1d1d1;
}

.multiplebgs.cssgradients footer {
	background-image: -webkit-linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.0)), url(/images/bg-footer-noise.jpg); 
	background-image: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0)), url(/images/bg-footer-noise.jpg);
	background-repeat: repeat-x, repeat;
	background-size: 100px 15px, 140px 140px;
}

.no-multiplebgs footer, .no-cssgradients footer {
	background-image: url(/images/bg-footer-noise.jpg);
	background-repeat: repeat;
}

footer h3 {
	color: #777;
	letter-spacing: normal;
	text-transform: uppercase;
	text-shadow: #000 0 1px 0;
	border: solid 1px #000;
	text-rendering: optimizeLegibility;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	position: relative;
	text-align: center;
	height: 10px;
	margin-top: 20px;
	font-size: 16px;
}

footer h3 span {
	display: inline-block;
	padding: 3px 10px;
	position: relative;
	top: -0.8em;
	background: url(/images/bg-footer-noise.jpg) repeat #212121;
	z-index: 1;
}

footer h3:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border: solid 1px #333;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
}

.footer-site-links {
	float: right;
	padding: 10px 0 0 0;
	width: 58%;
	text-align: right;
}

footer p.copyright {
	margin: 10px 0 0 0;
	float: left;
	width: 40%;
	font-size: 11px;
	line-height: 130%;
	color: #777;
}

footer p.copyright a {
	color: #aaa;
}

footer p.copyright a:hover {
	color: #fff;
}

footer p.copyright span.sponsor-line {
	display: block;
	font-size: 10px;
	margin-top: 1em;
}

footer p.copyright a.mt-link {
	background: url(/images/logo-mediatemple.png) left top no-repeat;
	padding-left: 31px;
}

footer p.copyright a.mc-link {
	background: url(/images/logo-maxcdn.png) left top no-repeat;
	padding-left: 24px;
}

footer p.copyright a.wp-link {
	background: url(/images/logo-wordpress.png) left top no-repeat;
	padding-left: 19px;
	padding-top: 1px;
	display: inline-block;
	height: 16px;
}

.footer-site-links li {
	position: relative;
	background: none;
	width: auto;
	height: auto;
	line-height: 20px;
	margin: 0 0 10px 20px;
	font-size: 13px;
}

.footer-site-links li:first-child {
	margin-left: 0;
}

.footer-site-links li a {
	position: relative;
	color: #aaa;
	display: block;
	padding-left: 30px;
	width: auto;
	line-height: inherit;
}

.footer-site-links li a:before {
	position: absolute;
	font-size: 1.5em;
	color: #4d4d4d;
	text-shadow: 0 -1px 0 #000000;
	left: 2px;
}

.footer-site-links li:hover a,
.footer-site-links li:hover a:before {
	color: #e6e6e6;
}

.footer-site-links li {
	display: inline-block;
}

footer ul li {
	list-style: none;
	padding: 0;
	margin: 0;
	line-height: 30px;
}

footer #legal {
	margin-top: 1em;
	border-top: solid 1px #333;
	-webkit-box-shadow: #000 0 -1px 0;
	box-shadow: #000 0 -1px 0;
}

footer .books li {
	float: left;
	width: 30%;
	min-width: 95px;
	margin-left: 2.8%;
	margin-bottom: 15px;
	line-height: 130%;
	font-size: 11px;
	text-align: center;
}

footer .books li:first-child {
	margin-left: 2%;
}

footer .books li a img {
	display: block;
	border-radius: 5px;
	border: solid 1px rgba(255,255,255,0.2);
	width: 92px;
	height: 114px;
	margin: 0 auto 5px;
}

footer .books li a:hover img {
	border-color: #fff;
}

footer .books li a cite {
	display: block;
	font-style: normal;
	font-size: 9px;
	line-height: 1.5em;
	color: #aaa;
}

*/

/* General Styles
   ========================================================================== */

#content .entry-title a {
	text-decoration: none;
}

.entry-meta {
	color: #999;
	font-size: 12px;
}

.toc-linked {
	position: relative;
}

.toc-linked .toc-link {
	position: absolute;
	left: -1em;
	text-decoration: none;
	opacity: 0;
}
/* TODO: Remove (https://github.com/jquery/jquery-wp-content/issues/143) */
#content .toc-linked .toc-link {
	text-decoration: none;
}

.toc-linked:hover .toc-link {
	opacity: 1;
}

.post-heirarchy {
	margin-bottom: 0.75em;
}

/* Listing Pages (categories, searches, etc.)
   ========================================================================== */

.listing .hentry {
	padding: 10px 20px;
	margin: 0 0;
	border: 3px solid rgba( 0, 0, 0, 0.2 );
	background-color: #f4f1e1;
	border-radius: 9px;
	position: relative;
}
.xanhtruyen {
	background-color: #f4f1e1;
}
.xanhtrai {
	background-color: #EFF3D7;/*D3E2E5*/
	
}
.timtho {
	background-color: #E9DFF0;/*D3E2E5*/

}
.nentrang {
	background-color: #EFEFEF;/*D3E2E5*/

}
.amthuctrai {
	background-color: #F1D8D8;/*D3E2E5*/

}

.listing #content .entry-title {
	font-size: 1.3em;
	margin-bottom: 0;
	text-shadow: 0 1px 1px #fff;
}

.listing .entry-meta {
	float: right;
}

.listing .entry-meta .category {
	padding: 4px;
	background-color: #ddd;
	border-radius: 5px;
}

.listing #content .entry-meta .category a {
	color: #888;
	text-decoration: none;
}

.pagination {
	text-align: center;
	margin-top: 2em;
}

.page-numbers {
	padding: 0 10px;
}

.l_tinynav {
		display: block;
		position: relative;
		top: -10px;
		margin-left: auto;
    margin-right: auto;
	}

/* Media Queries
   ========================================================================== */

@media only screen and (max-width: 1100px) {
	}

@media only screen and (max-width: 940px) {

}
@media  (max-width: 600px) {
#thanbai div span.tacgia { display:block; float:left; display:inline; font:italic 0.8em/16px "Century Gothic", Helvetica, Arial, sans-serif; color:#98926E;}
#sao1 { float:right;

}
}
@media (min-width: 480px) {
	
#global-nav, #ebookimg1 { 
		display: none;
	}
}
@media (min-width: 769px) {
	
#saomu { 
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	
		#saocu {
		display: none;
	}

	#sidebar,
	.content-right #sidebar {
		width: auto;
		float: none;
		clear: both;
		margin: 0;
		border-top: 1px solid #e7e7e7;
		border-left: none;
		-moz-border-image: none;
		-webkit-border-image: none;
		-webkit-border-image: none;
		-o-border-image: none;
		border-image: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
		background-image: none;
	}
	#lich, #muluben_to { 
		display: none;
	}

	.content-full.full-width #content,
	.content-right #content,
	.content-left #content {
		padding-left: 2%;
		padding-right: 2%;
	}

	#content {
		width: 100%;
		float: none;
		clear: both;
	}

	#banner-secondary {
		margin-left: -15px;
		margin-right: -15px;
	}

	footer p.copyright,
	footer ul.footer-site-links {
		width: 100%;
		text-align: center;
		margin: 0 0 10px 0;
	}
}

@media only screen and (max-width: 600px) {
	#global-nav nav ul.links {
		float: left;
	}

	#global-nav nav ul.links li {
		font-size: 12px;
	}

	#logo-events {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	#logo-events aside {
		display: inline-block;
		position: relative;
		left: 50%;
		margin-left: -200px;
		float: none;
		padding: 10px 0;
	}

	#lich {
		display: none;
	}

	nav#main {
		background-color: rgba(0, 0, 0, 0.0);
		border-radius: 10px 10px 0 0;
		border-right: none;
		border-left: none;
		border-top: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding-top: 10px;
	}

	nav#main .searchform {
		display: block;
		float: none;
		width: 100%;
		margin: 15px auto;
		clear:both;
	}

	nav#main ul{
		width: auto !important;
		text-align: left !important;
		float: none;
		margin: 0px;
		padding: 0px;
	}
	
/*	nav#main ul li, nav#main ul li a {
		display: block;
		text-align: left !important;
		float: left;
		margin-right: 0px;
		padding: 0 4px 4px 0;
	}
		

	nav#main li a:hover,
	nav#main li.current a {
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 4px;
		border: 1px solid rgba(0,0,0,0.0);
	}
	
	nav#main li a {
		font-size: 14px;
	}*/
	
	#content-wrapper {
		/*border-top-left-radius: 10px;
		border-top-right-radius: 10px;*/
	}

	#banner-secondary {
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
		margin-left: -10px;
		margin-right: -10px;
	}

	#banner-secondary h2 {
		font-size: 35px;
		line-height: 35px;
	}

	#content h1 {
		font-size: 26px;
		line-height: 26px;
	}

	#banner-secondary.large-banner h1,
	#banner-secondary.large-banner h2 {
		font-size: 36px;
		line-height: 36px;
	}

	#banner-secondary.large-banner p {
		font-size: 22px;
		padding: 0;
	}

	footer .books li {
		clear: both;
		margin-bottom: 10px;
		float: none;
		margin-left: auto !important;
		margin-right: auto;
		text-align: center;
	}

	footer .books li span {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 480px) {
.magingtop30{ margin-top:30px;}
.nentho2{
 background: none;
 }
	#lich {
		display: none;
	}


	/* "width:200px" cu (an tu logo cu, hep hon) da bi xoa - voi logo/header dang flexbox
	   hien tai, gia tri co dinh nay khien #logo-events HEP HON header thuc te, tao khe ho
	   khong khit voi khung ben duoi (loi nguoi dung bao 2026-08-04: "logo ở màn hình nhỏ
	   hở ra không khít với khung bên dưới"). Bo han de #logo-events tu nhien chiem full
	   chieu rong nhu #logo-events flex mac dinh (display:flex, khong can width rieng). */

	#container {
		border-top: none !important;
	}

	.tinynav-container {
		display: block;
	}

	#menu-top {
		display: none;
	}

	.tinynav {
		display: block;
		width: 100%;
		margin: 0 auto 15px;
		position: relative;
		top: 6px;
		margin-left: auto;
    margin-right: auto;
	}
	
	nav#main {
		margin-top: -6px;
		padding-top: 0;
	}
	
	nav#main .searchform {
		display: block;
		float: none;
		width: 100%;
		margin: 15px auto;
	}
	
	nav#main ul li, nav#main ul li a {
		float: none;
		padding: 6px 0px 6px 8px;	
	}
	
	.constrain,
	#container {
		padding-left: 2px;
		padding-right: 2px;
	}

	.content-full #content,
	.content-full.full-width #content,
	.content-right #content,
	.content-left #content {
		padding-left: 0;
		padding-right: 0;
	}

	#content-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	#content pre {
		margin-left: -25px;
		margin-right: -25px;
	}

	
	#content figure.left,
	#content img.right,
	#content figure.right {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#banner-secondary {
		margin-left: -25px;
		margin-right: -25px;
	}

	footer .footer-icon-links li a:before {
		display: none;
	}

	footer .footer-icon-links li:first-child {
		margin-left: 0;
	}

	footer .download > span {
		white-space: normal;
	}
}

 /* Helper classes
	========================================================================== */

.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.invisible {
	visibility: hidden;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

/* Print styles
   ========================================================================== */

@media print {
	* {
		background: transparent !important;
		color: #000 !important; /* Black prints faster: h5bp.com/s */
		box-shadow:none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")";
	}

	abbr[title]:after {
		content: " (" attr(title) ")";
	}

	/*
	 * Don't show links for images, or javascript/internal links
	 */

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	thead {
		display: table-header-group; /* h5bp.com/t */
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}

/* The Grid ----------------------
Based on Zurb Foundation's Grid
*/
.row { width: 1090px; max-width: 100%; min-width: 708px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -25px; }
.row.collapse .column, .row.collapse .columns { padding: 0; }
.row .row.collapse { margin: 0; }

.column, .columns { float: left; min-height: 1px; padding: 0 10px; position: relative; }
.column.centered, .columns.centered { float: none; margin: 0 auto; }

[class*="column"] + [class*="column"]:last-child { float: right; }

[class*="column"] + [class*="column"].end { float: left; }

.one, .row .one { width: 8.33333%; }

.two, .row .two { width: 16.66667%; }

.three, .row .three { width: 25%; }

.four, .row .four { width: 33.33333%; }

.five, .row .five { width: 41.66667%; }

.six, .row .six { width: 50%; }

.seven, .row .seven { width: 58.33333%; }

.eight, .row .eight { width: 66.66667%; }

.nine, .row .nine { width: 75%; }

.ten, .row .ten { width: 83.33333%; }

.eleven, .row .eleven { width: 91.66667%; }

.twelve, .row .twelve { width: 100%; }

.row .offset-by-one { margin-left: 8.33333%; }

.row .offset-by-two { margin-left: 16.66667%; }

.row .offset-by-three { margin-left: 25%; }

.row .offset-by-four { margin-left: 33.33333%; }

.row .offset-by-five { margin-left: 41.66667%; }

.row .offset-by-six { margin-left: 50%; }

.row .offset-by-seven { margin-left: 58.33333%; }

.row .offset-by-eight { margin-left: 66.66667%; }

.row .offset-by-nine { margin-left: 75%; }

.row .offset-by-ten { margin-left: 83.33333%; }

.push-two { left: 16.66667%; }

.pull-two { right: 16.66667%; }

.push-three { left: 25%; }

.pull-three { right: 25%; }

.push-four { left: 33.33333%; }

.pull-four { right: 33.33333%; }

.push-five { left: 41.66667%; }

.pull-five { right: 41.66667%; }

.push-six { left: 50%; }

.pull-six { right: 50%; }

.push-seven { left: 58.33333%; }

.pull-seven { right: 58.33333%; }

.push-eight { left: 66.66667%; }

.pull-eight { right: 66.66667%; }

.push-nine { left: 75%; }

.pull-nine { right: 75%; }

.push-ten { left: 83.33333%; }

.pull-ten { right: 83.33333%; }

img, object, embed { max-width: 100%; height: auto; }

object, embed { height: 100%; }

img { -ms-interpolation-mode: bicubic; }

#map_canvas img, .map_canvas img { max-width: none!important; }

/* Nicolas Gallagher's micro clearfix */
.row { *zoom: 1; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }

/* Mobile Grid and Overrides ---------------------- */
@media only screen and (max-width: 767px) {
	.row { width: auto; min-width: 0; margin-left: 0 !important; margin-right: 0 !important; }
	.column, .columns { width: auto !important; float: none; padding-left: 0 !important; padding-right: 0 !important;
	}
	.column:last-child, .columns:last-child { float: none; }
	[class*="column"] + [class*="column"]:last-child { float: none; }
	.column:before, .columns:before, .column:after, .columns:after { content: ""; display: table; }
	.column:after, .columns:after { clear: both; }
	.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten { margin-left: 0 !important; }
	.push-two, .push-three, .push-four, .push-five, .push-six, .push-seven, .push-eight, .push-nine, .push-ten { left: auto; }
	.pull-two, .pull-three, .pull-four, .pull-five, .pull-six, .pull-seven, .pull-eight, .pull-nine, .pull-ten { right: auto; }
	/* Mobile 4-column Grid */
	.row .mobile-one { width: 25% !important; float: left; padding: 0 25px; }
	.row .mobile-one:last-child { float: right; }
	.row .mobile-one.end { float: left; }
	.row.collapse .mobile-one { padding: 0; }
	.row .mobile-two { width: 50% !important; float: left; padding: 0 25px; }
	.row .mobile-two:last-child { float: right; }
	.row .mobile-two.end { float: left; }
	.row.collapse .mobile-two { padding: 0; }
	.row .mobile-three { width: 75% !important; float: left; padding: 0 25px; }
	.row .mobile-three:last-child { float: right; }
	.row .mobile-three.end { float: left; }
	.row.collapse .mobile-three { padding: 0; }
	.row .mobile-four { width: 100% !important; float: left; padding: 0 25px; }
	.row .mobile-four:last-child { float: right; }
	.row .mobile-four.end { float: left; }
	.row.collapse .mobile-four { padding: 0; }
	.push-one-mobile { left: 25%; }
	.pull-one-mobile { right: 25%; }
	.push-two-mobile { left: 50%; }
	.pull-two-mobile { right: 50%; }
	.push-three-mobile { left: 75%; }
	.pull-three-mobile { right: 75%; }
}


/* Block Grids ---------------------- */
/* These are 2-up, 3-up, 4-up and 5-up ULs, suited
for repeating blocks of content. Add 'mobile' to
them to switch them just like the layout grid
(one item per line) on phones

For IE7/8 compatibility block-grid items need to be
the same height. You can optionally uncomment the
lines below to support arbitrary height, but know
that IE7/8 do not support :nth-child.
-------------------------------------------------- */
.block-grid, #content .block-grid { display: block; overflow: hidden; padding: 0; }
.block-grid > li, #content .block-grid > li { display: block; height: auto; float: left; }
.block-grid.one-up, #content .block-grid.one-up { margin: 0; }
.block-grid.one-up > li, #content .block-grid.one-up > li { width: 100%; padding: 0 0 15px; }
.block-grid.two-up, #content .block-grid.two-up { margin: 0 -15px; }
.block-grid.two-up > li, #content .block-grid.two-up > li { width: 50%; padding: 0 15px 15px; }
.block-grid.two-up > li:nth-child(2n+1), #content .block-grid.two-up > li:nth-child(2n+1) { clear: both; }
.block-grid.three-up, #content .block-grid.three-up { margin: 0 -12px; }
.block-grid.three-up > li, #content .block-grid.three-up > li { width: 33.33%; padding: 0 12px 12px; }
.block-grid.three-up > li:nth-child(3n+1), #content .block-grid.three-up > li:nth-child(3n+1) { clear: both; }
.block-grid.four-up, #content .block-grid.four-up { margin: 0 -10px; }
.block-grid.four-up > li, #content .block-grid.four-up > li { width: 25%; padding: 0 10px 10px; }
.block-grid.four-up > li:nth-child(4n+1), #content .block-grid.four-up > li:nth-child(4n+1) { clear: both; }
.block-grid.five-up, #content .block-grid.five-up { margin: 0 -8px; }
.block-grid.five-up > li, #content .block-grid.five-up > li { width: 20%; padding: 0 8px 8px; }
.block-grid.five-up > li:nth-child(5n+1), #content .block-grid.five-up > li:nth-child(5n+1) { clear: both; }

/* Mobile Block Grids */
@media only screen and (max-width: 767px) {
	.block-grid.mobile > li { float: none !important; width: 100% !important; margin-left: 0 !important; }
	.block-grid > li { clear: none !important; }
	.block-grid.mobile-two-up > li { width: 50% !important; }
	.block-grid.mobile-two-up > li:nth-child(2n+1) { clear: both; }
	.block-grid.mobile-three-up > li { width: 33.33% !important; }
	.block-grid.mobile-three-up > li:nth-child(3n+1) { clear: both !important; }
	.block-grid.mobile-four-up > li { width: 25% !important; }
	.block-grid.mobile-four-up > li:nth-child(4n+1) { clear: both; }
	.block-grid.mobile-five-up > li:nth-child(5n+1) { clear: both; }
}

.col-xs-2, .col-xs-3, .col-md-3, .col-md-4, .col-xs-6, .col-xs-7, .col-md-9, .col-xs-12, .col-sm-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px
}
.col-xs-2, .col-xs-3, .col-xs-6, .col-xs-7, .col-xs-12 {
    float: left
}
.col-xs-12 {
    width: 100%
}
.col-xs-7 {
    width: 58.33333333%
}
.col-xs-6 {
    width: 50%
}
.col-xs-3 {
    width: 25%
}
.col-xs-2 {
    width: 16.66666667%
}
@media (min-width:768px) {
	.col-sm-12 {
		float: left
	}

	.col-sm-12 {
		width: 100%
	}

	#list-page {
		text-align: center;
		font-size: 13px
	}

	.list {
		display: table;
		text-align: left
	}

		.list h3 {
			display: inline
		}

	.col-truyen-main, #list-page .col-truyen-main .list-truyen {
		padding: 0
	}

	.col-truyen-side .list {
		background-color: #ecf0f1;
		border: 1px solid #D9E1E4
	}

		.col-truyen-side .list.list-side {
			background-color: transparent;
			border: 0
		}

	.list > .row {
		display: table-row;
		font-family: 'Roboto Condensed', Tahoma, sans-serif;
		font-size: 15px
	}

	.col-truyen-side .list > .row {
		background-color: #ecf0f1
	}

	.list > .row > div {
		height: 40px;
		line-height: 40px;
		border-left: 1px dashed #CCC;
		border-bottom: 1px dashed #CCC;
		overflow: hidden
	}

	.list > .row:last-child > div {
		border-bottom: 0 !important
	}

	.list-cat > .row {
		font-size: 16px
	}

	#list-page .list > .row > div {
		height: 90px;
		line-height: 20px;
		display: table;
		table-layout: fixed;
		border-left: 0;
		border-bottom: 1px dashed #CCC;
		white-space: normal;
		padding-left: 10px;
		padding-right: 10px
	}

	#list-page .col-truyen-side .list > .row > div {
		height: 40px;
		line-height: 40px;
		text-align: left;
		display: block
	}

	.col-truyen-side .list.list-cat > .row > div {
		height: 30px !important;
		line-height: 35px !important;
		border: 0 !important;
		padding-left: 20px !important
	}

		.col-truyen-side .list.list-cat > .row > div:nth-child(odd) {
			padding-left: 40px !important
		}

		.col-truyen-side .list.list-cat > .row > div:last-child {
			margin-bottom: 8px
		}

	#list-page .list > .row > div > div {
		display: table-cell;
		vertical-align: middle
	}

		#list-page .list > .row > div > div > .truyen-title {
			font-weight: bold;
			font-size: 18px;
			margin-top: 0;
			margin-bottom: 5px
		}

		#list-page .list > .row > div > div > .author {
			font-style: italic;
			display: block
		}

			#list-page .list > .row > div > div > .author > .glyphicon.glyphicon-pencil {
				font-size: 11px
			}

	.list > .row > div:first-child {
		border-left: 0;
		padding-left: 0
	}

	.list > .row > div {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.col-truyen-side .list > .row > div {
		max-width: 270px;
		padding: 0
	}

	.title-list {
		text-align: left;
		height: 40px;
		text-transform: uppercase;
		border-bottom: 1px solid #CCC;
		position: relative
	}

	.list-side .title-list {
		margin-bottom: 15px
	}

	.label-title {
		padding: 1px 3px;
		font-size: 13px;
		vertical-align: bottom;
		margin-left: 5px
	}

	.label-full {
		border: 1px solid #86ad86;
		color: #86ad86
	}

	.label-hot {
		border: 1px solid #FD8383;
		color: #FD8383
	}

	.label-new {
		border: 1px solid #8EB3FD;
		color: #8EB3FD
	}

	.label-full:before {
		content: "Full"
	}

	.label-hot:before {
		content: "Hot"
	}

	.label-new:before {
		content: "New"
	}
	/* ==========================================================================
   Links
   ========================================================================== */

	/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

	a:focus {
		outline: thin dotted;
	}

	/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

	a:active,
	a:hover {
		outline: 0;
	}

	#logo-events {
		display: flex;
		justify-content: space-between;
		height: 67px; /* chiều cao thanh header */
		padding: 5px 15px; /* thêm khoảng cách trên/dưới */
		position: relative;
		z-index: 10; /* đảm bảo nằm trên khung chính */
	}
	/* Logo */
	.site-logo {
		align-items: flex-start; /* canh các phần tử lên trên cùng */
		flex: 0 0 auto;
		position: relative;
		top: 1px; /* hạ logo xuống 1px */
	}

		.site-logo img {
			display: block;
			max-height: 60px; /* đảm bảo không che viền khung chính */
		}

	/* Menu */
	.top-menu {
		flex: 0 0 auto; /* KHONG co gian - giu nguyen do rong noi dung, khong lam logo bi day */
		display: flex;
		justify-content: flex-end;
		align-items: center; /* canh giữa theo chiều dọc */
		min-width: 0; /* cho phep flex item co lai, khong bao gio tran ra ngoai #logo-events */
		margin-left: auto; /* day menu sang phai DOC LAP voi #logo-events{justify-content} -
		                       logo o #logo-events luon dinh trai vi flex-start, menu nay tu
		                       chiem het khoang trong con lai (loi nguoi dung bao 2026-08-04:
		                       logo bi day lech phai o mot so co man hinh) */
	}

		.top-menu ul {
			display: flex;
			flex-wrap: nowrap; /* KHONG BAO GIO roi xuong dong/xep chong (loi nguoi dung bao
			                      2026-08-04: "tuyệt đối không dàn hàng dọc") */
			align-items: center;
			gap: 20px;
			list-style: none;
			margin: 0;
			padding: 0;
		}

			.top-menu ul li {
				flex: 0 0 auto;
			}

		.top-menu a {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			color: #fff; /* chữ + icon sáng màu, nổi trên nền xanh đậm */
			text-decoration: none;
			font-weight: 500;
			white-space: nowrap;
		}

			.top-menu a:hover {
				color: #ffcc00; /* vàng khi hover */
			}

			.top-menu a .vntq-navicon {
				font-size: 18px;
				line-height: 1;
				filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
			}

	/* Rule an .top-menu + toan bo CSS cho .vntq-mobile-memberbar DA CHUYEN xuong CUOI FILE
	   nay (ngoai moi @media bao quanh) - o day vo tinh nam LONG trong
	   "@media (min-width:768px)" (dong ~4130), nen "@media (max-width:768px)" long ben
	   trong CHI khop dung luc man hinh = 768px het suc hiem, khong hoat dong tren dien
	   thoai that (loi nguoi dung bao 2026-08-04: "member bên trên thì vẫn không loại bỏ
	   đi thành ra lặp lại 2 lần"). Xem cuoi file. */
	}

	@media (max-width: 480px) {
		.top-menu ul {
			gap: 8px;
		}

		.top-menu a .vntq-navicon {
			font-size: 18px;
		}
	}

	/* ==============================================================
   FIX LỖI CO RÚM TRÊN MOBILE - CHUYỂN ĐỔI SANG FLEXBOX HIỆN ĐẠI
   ============================================================== */
	@media (max-width: 767px) {
		/* 1. Xóa bỏ giới hạn chiều rộng tổng của body/container nếu có */
		body, .container, #wrapper {
			min-width: 100% !important;
			width: 100% !important;
			overflow-x: hidden !important;
		}

		/* 2. Ép tất cả các cột xs thành 100% chiều rộng để rớt xuống dòng */
		.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
		.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
			width: 100% !important;
			float: none !important;
			display: block !important;
			padding-left: 10px !important;
			padding-right: 10px !important;
		}

		/* 3. Xử lý yêu cầu: Đẩy cột trái xuống dưới, kéo cột phải lên trên */
		/* Giả định 2 cột này nằm trong 1 <div class="row"> tổng */
		.row {
			display: flex !important;
			flex-direction: column-reverse !important;
			/* column-reverse: Đảo ngược thứ tự HTML. Cột code viết dưới sẽ nổi lên trên */
		}

		/* Ngoại trừ các row bên trong danh sách truyện thì xếp dọc bình thường */
		.list > .row {
			flex-direction: column !important;
			height: auto !important;
			margin-bottom: 15px !important;
			border-bottom: 1px solid #ccc;
		}

		/* 4. Phá vỡ cấu trúc table-cell và nowrap gây dãn ngang */
		#list-page .list > .row > div,
		#list-page .list > .row > div > div {
			display: block !important;
			width: 100% !important;
			max-width: 100% !important;
			white-space: normal !important; /* Cho phép chữ tự động rớt dòng */
			text-align: left !important;
			padding: 5px 0 !important;
		}

		/* Xử lý riêng phần tác giả bị đẩy xa do lề cũ */
		.author, .totalchuong {
			text-align: left !important;
			margin-left: 0 !important;
			display: block !important;
		}

		/* 5. Cho phép các nhãn (label) tự động bọc dòng nếu quá dài */
		.label-t, .label-theloai, .label-scan, .label-time {
			white-space: normal !important;
			display: inline-block !important;
			margin-bottom: 5px;
		}