i {
	color: #333333;
}

@font-face {
	font-family: "Archivo";
	src: "../fonts/Archivo-Thin.woff2" format("woff2"),
		"../fonts/Archivo-Thin.woff" format("woff");
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-ThinItalic.woff2") format("woff2"),
		url("../fonts/Archivo-ThinItalic.woff") format("woff");
	font-weight: 100;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-ExtraLight.woff2") format("woff2"),
		url("../fonts/Archivo-ExtraLight.woff") format("woff");
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-ExtraLightItalic.woff2") format("woff2"),
		url("../fonts/Archivo-ExtraLightItalic.woff") format("woff");
	font-weight: 200;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Light.woff2") format("woff2"),
		url("../fonts/Archivo-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-LightItalic.woff2") format("woff2"),
		url("../fonts/Archivo-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Regular.woff2") format("woff2"),
		url("../fonts/Archivo-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Italic.woff2") format("woff2"),
		url("../fonts/Archivo-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Medium.woff2") format("woff2"),
		url("../fonts/Archivo-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-MediumItalic.woff2") format("woff2"),
		url("../fonts/Archivo-MediumItalic.woff") format("woff");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-SemiBold.woff2") format("woff2"),
		url("../fonts/Archivo-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-SemiBoldItalic.woff2")
			format("woff2"),
		url("../fonts/Archivo-SemiBoldItalic.woff") format("woff");
	font-weight: 600;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Bold.woff2") format("woff2"),
		url("../fonts/Archivo-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-BoldItalic.woff2") format("woff2"),
		url("../fonts/Archivo-BoldItalic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-ExtraBold.woff2") format("woff2"),
		url("../fonts/Archivo-ExtraBold.woff") format("woff");
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-ExtraBoldItalic.woff2")
			format("woff2"),
		url("../fonts/Archivo-ExtraBoldItalic.woff") format("woff");
	font-weight: 800;
	font-style: italic;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-Black.woff2") format("woff2"),
		url("../fonts/Archivo-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
}

@font-face {
	font-family: "Archivo";
	src: url("../fonts/Archivo-BlackItalic.woff2") format("woff2"),
		url("../fonts/Archivo-BlackItalic.woff") format("woff");
	font-weight: 900;
	font-style: italic;
}

body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 17px;
	line-height: 1.65;
	position: relative;
	font-weight: normal;
	overflow-x: hidden;
	font-family: "Archivo", sans-serif;
	background: #fff;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body label,
body ul,
body li,
body .card,
body a {
	text-decoration: none !important;
	outline: none !important;
}

/* Mặc định: mobile (≤767px) → hiện .mb, ẩn .pc */
.pc {
	display: block;
}

.mb {
	display: none;
}

/* Desktop (≥768px) → hiện .pc, ẩn .mb */
@media (max-width: 768px) {
	i {
		font-size: small;
	}

	.pc {
		display: none;
	}

	.mb {
		display: block;
	}

	.text-emag {
		padding: 0 20px !important;
	}

	.text-emag p {
		font-size: 15px !important;
	}
}

main {
	/* margin-top: 44px; */
}

.emag-center {
	text-align: center;
}

.credit-emg {
	max-width: 660px;
	margin: 0 auto;
}

.adm-emag {
	padding: 0 0 80px 0;
	position: relative;
	overflow-x: hidden;
	background: #ffffff;
	text-align: justify;
}

.adm-emag img {
	max-width: 100% !important;
	width: auto;
	display: inline;
}

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

.cover-emag {
	position: relative;
	overflow: hidden;
	margin-bottom: 45px;
}

.cover-emag .avr-cover img {
	width: 100%;
}

.video-emag {
	width: 800px;
	margin: 0 auto 20px;
}

.video-emag video {
	width: 100%;
	height: auto;
}

.sapo-desc {
	margin-bottom: 100px;
}

.title-emag {
	margin-bottom: 45px;
}

.text-emag {
	max-width: 660px;
	margin: 0 auto 45px;
}

.text-emag p {
	font-family: "Archivo", sans-serif;
	margin-bottom: 20px;
	color: #000000;
}

p a {
	display: inline-block;
	max-width: 100%;
	word-wrap: break-word;
	word-break: break-all;
	overflow-wrap: break-word;
	white-space: normal;
}

.text-emag p:last-child {
	margin-bottom: 0;
}

.text-emag a {
	overflow-wrap: anywhere;
	word-break: break-all;
}

.detail-emag {
	margin: 0 auto 45px;
	position: relative;
	line-height: 1.3;
}

.credit-emg {
	max-width: 660px;
	margin: 0 auto;
	color: #333;
	font-family: "NotoSerif-Regular";
}

.credit-emg ul {
	list-style: none;
	line-height: 1;
	border-left: 5px solid #ff6a03;
	padding-left: 20px;
	font-weight: 600;
}

.credit-emg ul li {
	margin-bottom: 10px;
}

.credit-emg ul li:last-child {
	margin-bottom: 0;
}

.link-inline-content {
	color: #102047 !important;
	text-decoration: none !important;
	font-size: 17px !important;
}

.ema-w100 img {
	width: 100% !important;
}

/* header */
/* ===== Header (44px) ===== */
.emag-header {
	height: 44px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	/* trái và phải cân nhau, title luôn ở giữa */
	align-items: center;
	padding: 0 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 100;
}

/* Left group */
.emag-header__left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	/* tránh tràn */
	justify-self: start;
}

/* Back button: target 36x36 trong header 44px */
.back-btn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	border-radius: 999px;
	cursor: pointer;
}

.back-btn:active {
	background: rgba(0, 0, 0, 0.06);
}

.back-icon {
	width: 20px;
	height: 20px;
}

/* Logo */
.logo {
	display: inline-flex;
	/* xếp ngang */
	align-items: center;
	/* căn giữa theo trục dọc */
	gap: 8px;
	/* khoảng cách logo - chữ */
	white-space: nowrap;
	/* không xuống dòng */
	text-decoration: none;
}

.logo img {
	height: 30px;
	/* chỉnh theo logo bạn */
	width: auto;
	display: block;
}

.logo-text {
	font-weight: 700;
	line-height: 0;
	color: #fff;
	font-size: 29px;
}

/* Title ở giữa tuyệt đối */
.emag-header__title {
	margin: 0;
	font-size: 29px;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
	justify-self: center;
	/* grid đảm bảo ở cột giữa */
	max-width: 60vw;
	/* chống quá dài */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
}

/* Right placeholder để cân cột phải (có thể thêm nút share...) */
.emag-header__right {
	justify-self: end;
}

/* (Tùy chọn) Dark on image */
.emag-header.is-on-image {
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}

.emag-header.is-on-image .back-btn {
	color: #fff;
}

.padding-image {
	padding: 0px 15px;
}

.emag-wrap {
	position: relative;
}

.detail-emag-inBackground {
	position: absolute;
	top: 0;
	/* điều chỉnh tùy ý */
	transform: translateX(-50%);
	width: 100%;
	line-height: 1.3;
	margin: 0;
	/* bỏ margin-top cũ */
	z-index: 10;
	/* để đè lên background */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 50px;
}

.detail-emag-inBackground .avr {
	display: inline-block;
	margin: 0 10px;
	/* khoảng cách giữa 2 ảnh */
}

@media (max-width: 1700px) {
	.emag-wrap.pc.bg {
		padding-bottom: 130px;
		/* chừa thêm chỗ vì ảnh xếp dọc/cao hơn */
	}
}

@media (max-width: 1600px) {
	.emag-wrap.pc.bg {
		padding-bottom: 150px;
		/* chừa thêm chỗ vì ảnh xếp dọc/cao hơn */
	}
}

@media (max-width: 1400px) {
	.emag-wrap.pc.bg {
		padding-bottom: 270px;
		/* chừa thêm chỗ vì ảnh xếp dọc/cao hơn */
	}
}

@media (max-width: 1300px) {
	.emag-wrap.pc.bg {
		padding-bottom: 380px;
		/* chừa thêm chỗ vì ảnh xếp dọc/cao hơn */
	}
}
.detail-emag .avr-title{
  background:#C8C8C8;
  color:#333;
  font-size:13px;
  line-height:1.35;
  padding: 6px 0px;
  text-align:center;
}
.avr--fit{
  display: inline-block;
  margin: 0;
}
.avr--fit img{
  display: block;
  width: auto;      /* quan trọng */
  max-width: 100%;  /* để responsive không tràn màn */
  height: auto;
}
.avr--fit .avr-title{
  display:block;

}
.avr-title a span{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* tránh a bị gạch chân cả khoảng trắng / hiệu ứng mặc định */
.avr-title a{
  text-decoration: none;
}