@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 400;
	src: url('../font/noto-serif-v22-latin_latin-ext_vietnamese-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-serif-700 - latin_latin-ext_vietnamese */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Serif';
	font-style: normal;
	font-weight: 700;
	src: url('../font/noto-serif-v22-latin_latin-ext_vietnamese-700.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {background: #f1ede4}
		
		
		.noto-serif-<uniquifier> {
		  font-family: "Noto Serif", serif;
		  font-optical-sizing: auto;
		  font-weight: <weight>;
		  font-style: normal;
		  font-variation-settings:
			"width" 100;
		}

		/* http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
		*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section {
			display: block;
		}
		body {
			
	font-optical-sizing: auto;
	font-family: 'Noto Serif', serif;
	font-weight: 400;
			font-size: 20pt;
			
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}
		.clear { clear: both}
		.txt_img { display: block; margin: 0 auto;}
		.txt_img img {align-content: center;
		  max-width: 100%;
		  height: auto;}
		.txt_img p {font-family: "Noto Serif", serif; font-size: 28px;line-height: normal; font-size: clamp(18px, 1.2vw, 28px);}
		.txt_img b { font-weight: bold }
		
		.note { display: block; width: 904px; height: 711px; margin: 0 auto; background: url("images/bg-note.png") top left no-repeat; padding: 30px; align-content: center}
		
		
		.note span , .note p {font-family: "Noto Serif"; font-size: 20px;line-height: normal; color: #333;font-size: clamp(16px, 1.2vw, 20px)}
		
		.in-note { background: rgba(230,230,230,0.5) ; border-radius: 15px; padding: 10px 30px 0px 30px;}
		
		
		.left {float: left;  margin: 20px 30px 0 0; width: 30%;display:block;font-family: "Noto Serif"; font-size: 20px;line-height: normal; color: #333;font-size: clamp(16px, 1.2vw, 20px)}
		.left img { max-width: 100%; height: auto; display:block}
		
		.right {float: right;  margin: 20px 0 0 0; width: 60%;display:block;font-family: "Noto Serif"; font-size: 20px;line-height: normal; color: #333;font-size: clamp(16px, 1.2vw, 20px)}
		
		.responsive { width:1300px; }
		.w4p {display: none}
		
		/* Responsive: khi màn hình nhỏ hơn 1300px thì content full width */
		
    	@media (max-width: 1300px) {
			.responsive { width: 95%; padding: 0 10px}
			.w3b { display: block}
			
		}
		
		@media (max-width: 904px) {
			.note { width: 90%;}
			.w3b { display: none}
			.w4p {display: block}
		}