/*-----------------------------------------------------------------------------*/
/*	1. Định dạng	*/
/*	2. Bố cục	*/
/*-----------------------------------------------------------------------------*/

/*	1. Định dạng	*/

					/*Thông số chung*/

/* Thanh cuộn dọc */
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #191919;}
::-webkit-scrollbar-thumb {background: #494949;}
::-webkit-scrollbar-thumb:hover {background: #b0b099;}

					/*Font*/

@font-face {
    font-family: 'gotham';
	src: url('../fonts/gotham.ttf') format('ttf'),
         url('../fonts/gotham.woff') format('woff');
}

@font-face {
    font-family: 'dax';
	src: url('../fonts/dax.ttf') format('ttf'),
         url('../fonts/dax.woff') format('woff'),
		 url('../fonts/dax.otf') format('otf');
}

@font-face {
    font-family: 'bank';
	src: url('../fonts/bank.ttf') format('ttf'),
         url('../fonts/bank.woff') format('woff'),
		 url('../fonts/bank.otf') format('otf');
}

@font-face {
    font-family: 'aptima';
	src: url('../fonts/aptima.ttf') format('ttf'),
         url('../fonts/aptima.woff') format('woff'),
		 url('../fonts/aptima.otf') format('otf');
}

@font-face {
    font-family: 'sitka';
	src: url('../fonts/sitka.ttf') format('ttf'),
         url('../fonts/sitka.woff') format('woff'),
		 url('../fonts/sitka.otf') format('otf');
}

@font-face {
    font-family: 'elite';
	src: url('../fonts/elite.ttf') format('ttf'),
         url('../fonts/elite.woff') format('woff'),
		 url('../fonts/elite.otf') format('otf');
}
@font-face {
    font-family: 'playfair';
	src: url('../fonts/playfair.ttf') format('ttf'),
         url('../fonts/playfair.woff') format('woff'),
		 url('../fonts/playfair.otf') format('otf');
}


html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
	background-color: #191919;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	width: 100%;
	display: table-cell;
    vertical-align: middle;
	padding: 5px
}

*{
	color: #b0b099;
	font-weight: 0;
	font-family: 'playfair';
	box-sizing: border-box
}


					/*Heading*/


h1 {
	color: #fbb917;
	font-size: 36pt;
	font-family: 'aptima';
	text-align: center;
}
@media screen and (max-width: 1000px){h1 {font-size: 30pt}}

h2 {
	color: #fbb917;
	font-size: 24pt;
	font-family: 'aptima';
	text-align: center;
}
@media screen and (max-width: 1000px){h2 {font-size: 20pt}}

h3 {
	font-size: 20pt;
	font-family: 'aptima';
	text-align: center;
}
@media screen and (max-width: 1000px){h3 {font-size: 14pt}}

h4 {
	font-size: 16pt;
	font-family: 'aptima';
	text-align: center;
}
@media screen and (max-width: 1000px){h4 {font-size: 12pt}}

h5 {
	font-size: 14pt;
	text-align: center;
	line-height: 150%;
	letter-spacing: .5pt;
}
@media screen and (max-width: 1000px){h5 {font-size: 10pt}}

p {
	font-size: 12pt;
	text-align: left; 
	line-height: 150%;
	letter-spacing: .5pt;

}

em {
	color: #fbb917;
	text-align: center;
}

mark {
	letter-spacing: 7.5pt;
}

@media screen and (max-width: 1000px){p {font-size: 10pt}}


					/*Chú giải - Tooltip*/



					/*Định dạng liên kết html*/
					
a:link, a:visited {
	position: relative;
	display: block;
	-webkit-transition-duration: 0.3s; /* Safari */
	transition-duration: 0.3s;
	transition-timing-function: ease-out;
	padding: 0px;
	margin: 0px;
	text-align: center; 
	filter: grayscale(100%);
	text-decoration: none;
	color: #fbb917;
	letter-spacing: .5pt;
	
}

a:hover, a:active {
	padding: 0px 0px 0px 0px;
	margin: 9px 9px 9px 9px;
	filter: grayscale(0%);
	transition-duration: .4	s;
	text-decoration: none;
	letter-spacing: .5pt;
}

a #text {
	visibility: hidden;
	position: fixed;
	display: inline;
	color: #fbb917;
	text-align: center;
	padding: 0px;
	z-index: 1;
	text-align: center; 
	top:-15px;
	left:15px;
	letter-spacing: .5pt;
}
@media screen and (max-width: 1000px){a #text {font-size: 10pt}}


a:hover #text, a:active #text {
	visibility: visible;
  	transition-delay: 0.1s;
	transition-timing-function: ease-out;
	letter-spacing: .5pt;
}



					/* Thanh cuộn dọc */

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {background: #191919;}
::-webkit-scrollbar-thumb {background: #494949;}
::-webkit-scrollbar-thumb:hover {background: #b0b099;}

/* -------------------------------------------------------------------------- */


					/* Bố cục */

.container {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: center;
	align-items: center;
	width:100%;
	gap:5px;
	padding:5px 5px 5px 5px
}

.container > div {
	text-align: center;
	flex-basis: 350px;
}

/* Responsive layout */
@media (max-width: 1000px) {
.container {
	flex-flow: row wrap;
}
  
  
.stock {
	position: relative;
}

.image {
	display: block;
	width: 100%;
	height: auto;
}

.overlay {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.stock:hover .overlay {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	visibility: visible
}