/**
 * =========================================================
 * TNB AUTO
 * 72H POLICY + DAILY PRICE NOTICE
 * VERSION 3
 * =========================================================
 */


/* =========================================================
   72H POLICY
   ========================================================= */

.single-product
#tnb-p72-notice-v3 {
	width: 100%;

	margin:
		0;

	padding:
		9px
		12px;

	align-items:
		center;

	gap:
		9px;

	background:
		linear-gradient(
			135deg,
			rgba(255, 103, 38, 0.10) 0%,
			rgba(255, 255, 255, 0.98) 82%
		);

	border:
		1px solid
		rgba(255, 103, 38, 0.28);

	border-left:
		3px solid #ff6726;

	border-radius:
		8px;

	box-shadow:
		0 2px 8px
		rgba(0, 0, 0, 0.025);

	box-sizing:
		border-box;
}


/**
 * Hidden luôn phải thắng.
 */
.single-product
#tnb-p72-notice-v3[hidden] {
	display:
		none !important;
}


/**
 * Chỉ visible khi:
 *
 * - có class is-visible
 * - không có attribute hidden
 */
.single-product
#tnb-p72-notice-v3.is-visible:not([hidden]) {
	display:
		flex !important;

	animation:
		tnbP72Show
		0.18s
		ease-out;
}


/* =========================================================
   72H ICON
   ========================================================= */

.single-product
.tnb-p72-notice-v3__icon {
	flex:
		0 0 23px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		23px;

	height:
		23px;

	background:
		#ff6726;

	color:
		#fff;

	border-radius:
		50%;

	font-size:
		11px;

	font-weight:
		800;

	line-height:
		1;

	box-shadow:
		0 2px 6px
		rgba(255, 103, 38, 0.20);
}


/* =========================================================
   72H TEXT
   ========================================================= */

.single-product
.tnb-p72-notice-v3__text {
	min-width:
		0;

	color:
		#272727;

	font-size:
		13.5px;

	font-weight:
		500;

	line-height:
		1.45;
}


.single-product
.tnb-p72-notice-v3__text strong {
	color:
		#f05a1a;

	font-weight:
		750;
}


/* =========================================================
   DAILY PRICE NOTICE
   LUÔN HIỂN THỊ
   ========================================================= */

.single-product
#tnb-daily-price-note-v3 {
	display:
		flex !important;

	align-items:
		flex-start !important;

	width:
		100% !important;

	gap:
		10px;

	margin:
		0 !important;

	padding:
		11px
		13px !important;

	background:
		linear-gradient(
			135deg,
			rgba(255, 103, 38, 0.065) 0%,
			rgba(255, 255, 255, 0.99) 82%
		) !important;

	border:
		1px solid
		rgba(255, 103, 38, 0.22) !important;

	border-left:
		3px solid
		#ff6726 !important;

	border-radius:
		9px !important;

	box-shadow:
		0 3px 12px
		rgba(0, 0, 0, 0.035);

	box-sizing:
		border-box;

	opacity:
		1 !important;

	visibility:
		visible !important;

	height:
		auto !important;

	max-height:
		none !important;

	overflow:
		visible !important;
}


/**
 * Nếu 72H ngay phía trên đang hiện,
 * giảm khoảng cách giữa 2 card.
 */
.single-product
#tnb-p72-notice-v3:not([hidden])
+
#tnb-daily-price-note-v3 {
	margin-top:
		0 !important;
}


/* =========================================================
   PRICE INFO ICON
   ========================================================= */

.single-product
.tnb-daily-price-note-v3__icon {
	flex:
		0 0 25px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		25px;

	height:
		25px;

	margin-top:
		1px;

	color:
		#ff6726;

	background:
		rgba(255, 103, 38, 0.10);

	border:
		1px solid
		rgba(255, 103, 38, 0.20);

	border-radius:
		50%;

	box-sizing:
		border-box;
}


.single-product
.tnb-daily-price-note-v3__icon svg {
	display:
		block;

	width:
		17px;

	height:
		17px;
}


/* =========================================================
   PRICE BODY
   ========================================================= */

.single-product
.tnb-daily-price-note-v3__body {
	flex:
		1 1 auto;

	min-width:
		0;

	margin:
		0;

	padding:
		0;
}


/* =========================================================
   PRICE MESSAGE
   ========================================================= */

.single-product
.tnb-daily-price-note-v3__message {
	margin:
		0 !important;

	padding:
		0 !important;

	color:
		#333;

	font-size:
		13.5px;

	font-weight:
		400;

	line-height:
		1.55;
}


/* =========================================================
   PHONE
   ========================================================= */

.single-product
.tnb-daily-price-note-v3__phone {
	display:
		inline;

	color:
		#f05a1a !important;

	font-weight:
		700;

	text-decoration:
		none !important;

	white-space:
		nowrap;

	border-bottom:
		1px solid
		rgba(240, 90, 26, 0.28);

	transition:
		color
		0.18s
		ease,
		border-color
		0.18s
		ease;
}


@media (hover: hover) {

	.single-product
	.tnb-daily-price-note-v3__phone:hover {
		color:
			#cf450c !important;

		border-bottom-color:
			#cf450c;
	}

}


/* =========================================================
   COMMITMENT
   ========================================================= */

.single-product
.tnb-daily-price-note-v3__commitment {
	display:
		flex;

	align-items:
		flex-start;

	gap:
		5px;

	margin:
		5px
		0
		0 !important;

	padding:
		0 !important;

	color:
		#222;

	font-size:
		13px;

	font-weight:
		600;

	line-height:
		1.45;
}


.single-product
.tnb-daily-price-note-v3__check {
	flex:
		0 0 auto;

	color:
		#ff6726;

	font-weight:
		800;
}


/* =========================================================
   PRICE WRAPPER
   ========================================================= */

.single-product
.product-info
.price-wrapper,
.single-product
.summary
.price-wrapper {
	margin-bottom:
		0;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes tnbP72Show {

	from {

		opacity:
			0;

		transform:
			translateY(-3px);
	}

	to {

		opacity:
			1;

		transform:
			translateY(0);
	}

}


/* =========================================================
   TABLET
   ========================================================= */

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

	/* 72H */

	.single-product
	#tnb-p72-notice-v3 {
		padding:
			9px
			11px;
	}


	.single-product
	.tnb-p72-notice-v3__text {
		font-size:
			13px;
	}


	/* PRICE NOTICE */

	.single-product
	#tnb-daily-price-note-v3 {
		gap:
			9px;
		padding:
			10px
			11px !important;

		border-radius:
			8px !important;
	}


	.single-product
	.tnb-daily-price-note-v3__message {
		font-size:
			13px;

		line-height:
			1.5;
	}


	.single-product
	.tnb-daily-price-note-v3__commitment {
		font-size:
			12.5px;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

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

	/* -----------------------------------------
	   72H
	   ----------------------------------------- */

	.single-product
	#tnb-p72-notice-v3 {
		align-items:
			flex-start;

		gap:
			7px;

		margin:
			7px
			0
			5px;

		padding:
			8px
			9px;

		border-radius:
			7px;
	}


	.single-product
	.tnb-p72-notice-v3__icon {
		flex-basis:
			20px;

		width:
			20px;

		height:
			20px;

		margin-top:
			1px;

		font-size:
			10px;
	}


	.single-product
	.tnb-p72-notice-v3__text {
		font-size:
			12.5px;

		line-height:
			1.4;
	}


	/* -----------------------------------------
	   PRICE NOTICE
	   ----------------------------------------- */

	.single-product
	#tnb-daily-price-note-v3 {
		gap:
			8px;

		margin:
			0 !important;

		padding:
			9px
			10px !important;

		border-radius:
			7px !important;
	}


	.single-product
	#tnb-p72-notice-v3:not([hidden])
	+
	#tnb-daily-price-note-v3 {
		margin-top:
			0 !important;
	}


	.single-product
	.tnb-daily-price-note-v3__icon {
		flex-basis:
			22px;

		width:
			22px;

		height:
			22px;
	}


	.single-product
	.tnb-daily-price-note-v3__icon svg {
		width:
			15px;

		height:
			15px;
	}


	.single-product
	.tnb-daily-price-note-v3__message {
		font-size:
			12.5px;

		line-height:
			1.5;
	}


	.single-product
	.tnb-daily-price-note-v3__commitment {
		margin-top:
			4px !important;

		font-size:
			12px;

		line-height:
			1.4;
	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

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

	.single-product
	#tnb-daily-price-note-v3 {
		padding:
			8px !important;
	}


	.single-product
	.tnb-daily-price-note-v3__message {
		font-size:
			12px;
	}


	.single-product
	.tnb-daily-price-note-v3__commitment {
		font-size:
			11.8px;
	}


	.single-product
	.tnb-p72-notice-v3__text {
		font-size:
			12px;
	}

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.single-product
	#tnb-p72-notice-v3 {
		animation:
			none !important;
	}

}