/* =========================================================================
   Site Ratings - trang bai viet
   ========================================================================= */

.rt-art { padding-bottom: 8px; }

/* ---- Dau bai ---------------------------------------------------------- */

.rt-arthead { padding: 18px 0 22px; }
.rt-eyebrow--art { margin-bottom: 9px; }
.rt-arthead__title { font-size: clamp(26px, 4vw, 40px); line-height: 1.15; }
.rt-arthead__dek { margin: 14px 0 0; font-size: 17px; color: var(--ink-2); max-width: 760px; }
.rt-arthead__by { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.rt-arthead__by p { margin: 0; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; }
.rt-arthead__by a { color: var(--ink); font-weight: 600; text-decoration: none; }
.rt-arthead__by a:hover { color: var(--blue); }

/* ---- Tam the danh gia mo dau ----------------------------------------- */

.rt-panel {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr) 250px;
	gap: 0;
	border: 1px solid var(--line);
	border-top: 4px solid var(--navy);
	border-radius: var(--r);
	background: #fff;
	margin: 0 0 30px;
}

.rt-panel__pic { padding: 20px; border-right: 1px solid var(--line); }
.rt-panel__cap { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-3); text-align: center; }

.rt-panel__main { padding: 20px 22px; }
.rt-panel__brand { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

.rt-panel__score { display: flex; align-items: flex-start; gap: 14px; }
.rt-panel__word { margin: 0; font-size: 19px; font-weight: 800; }
.rt-panel__num { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.rt-panel__num strong { font-family: var(--mono); font-size: 17px; color: var(--ink); }
.rt-panel__src { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3); max-width: 360px; }

.rt-panel__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.rt-panel__facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.rt-panel__facts dd { margin: 3px 0 0; font-family: var(--mono); font-size: 15px; font-weight: 700; }
.rt-panel__facts dd a { color: var(--blue); text-decoration: none; font-family: var(--sans); font-size: 14px; }

.rt-panel__flag { margin: 16px 0 0; font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rt-panel__flag span {
	background: var(--blue-lt); color: var(--blue-dk);
	border: 1px solid #c3ddf2; border-radius: var(--r);
	padding: 3px 9px; font-weight: 700; font-size: 11.5px;
}

.rt-panel__buy { margin: 18px 0 0; }
.rt-panel__buy span { display: block; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }

.rt-panel__dist { padding: 20px 22px; border-left: 1px solid var(--line); background: var(--grey); border-radius: 0 var(--r) var(--r) 0; }
.rt-panel__disthead { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

/* ---- Muc luc ---------------------------------------------------------- */

.rt-toc { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--r); padding: 15px 18px; margin: 0 0 30px; background: var(--grey); }
.rt-toc__head { margin: 0 0 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.rt-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 9px; }
.rt-toc li { font-size: 13px; }
.rt-toc a {
	display: inline-block; padding: 4px 10px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	text-decoration: none; color: var(--ink-2);
}
.rt-toc a:hover { border-color: var(--blue); color: var(--blue); }

/* ---- Than bai --------------------------------------------------------- */

.rt-prose { font-size: 17px; line-height: 1.7; }
.rt-prose > p { margin: 0 0 1.1em; }

.rt-prose h2 {
	font-size: clamp(20px, 2.4vw, 25px);
	margin: 1.9em 0 0.55em;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--line);
	scroll-margin-top: 66px;
}
.rt-prose h3 { font-size: 18px; margin: 1.5em 0 0.45em; }

.rt-prose a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(18, 99, 173, 0.35); }
.rt-prose a:hover { border-bottom-color: var(--blue); }

.rt-prose ul, .rt-prose ol { margin: 0 0 1.15em; padding-left: 0; list-style: none; }
.rt-prose ul > li, .rt-prose ol > li { position: relative; padding-left: 21px; margin-bottom: 0.45em; }
.rt-prose ul > li::before {
	content: '';
	position: absolute; left: 3px; top: 0.7em;
	width: 6px; height: 6px; border-radius: 1px;
	background: var(--blue);
}
.rt-prose ol { counter-reset: rtol; }
.rt-prose ol > li { counter-increment: rtol; }
.rt-prose ol > li::before {
	content: counter(rtol) '.';
	position: absolute; left: 0; top: 0;
	font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--blue);
}

.rt-prose blockquote { margin: 1.5em 0; padding: 0 0 0 18px; border-left: 3px solid var(--blue); color: var(--ink-2); }

.rt-prose figure { margin: 1.6em 0; }
.rt-prose figure img { margin-inline: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.rt-prose figcaption { margin-top: 8px; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ---- "In the box" ----------------------------------------------------- */

.rt-box { background: var(--grey); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 20px; margin: 1.5em 0; }
.rt-box__head { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.rt-prose .rt-box__list { margin: 0; }
.rt-prose .rt-box__list li { font-size: 15px; }

/* ---- Bang thong so ---------------------------------------------------- */

.rt-specs { margin: 1.6em 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rt-specs__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rt-specs__table th,
.rt-specs__table td { padding: 10px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.rt-specs__table th {
	width: 42%; font-weight: 600; color: var(--ink-3);
	font-size: 13px; background: #fbfcfd;
}
.rt-specs__table td { font-family: var(--mono); font-size: 13.5px; }
.rt-specs__table tr:last-child th,
.rt-specs__table tr:last-child td { border-bottom: 0; }

.rt-specs__more { border-top: 1px solid var(--line); }
.rt-specs__more summary {
	list-style: none; cursor: pointer;
	padding: 11px 16px; background: var(--grey);
	font-size: 13px; font-weight: 700; color: var(--blue);
	display: flex; align-items: center; gap: 8px;
}
.rt-specs__more summary::-webkit-details-marker { display: none; }
.rt-specs__more summary::before { content: '+'; font-family: var(--mono); font-size: 15px; }
.rt-specs__more[open] summary::before { content: '\2212'; }
.rt-specs__more .rt-specs__table { border-top: 1px solid var(--line); }

.rt-specs__note { margin: 0; padding: 10px 16px; background: #fbfcfd; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); }

/* ---- Uu va nhuoc ------------------------------------------------------ */

.rt-pc { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 1.6em 0; }
.rt-pc__col { padding: 16px 20px; }
.rt-pc__col--yes { background: #f4faf6; }
.rt-pc__col--no  { background: #fdf6f4; border-left: 1px solid var(--line); }
.rt-prose .rt-pc__col h3 {
	margin: 0 0 10px; font-size: 11px; letter-spacing: 0.1em;
	text-transform: uppercase; font-weight: 800;
}
.rt-pc__col--yes h3 { color: var(--lv5); }
.rt-pc__col--no h3  { color: #b23b3b; }
.rt-prose .rt-pc__col ul { margin: 0; }
.rt-prose .rt-pc__col li { font-size: 14.5px; line-height: 1.5; padding-left: 22px; margin-bottom: 8px; }

/* Quy tac chung cua than bai la `.rt-prose ul > li::before` = (0,1,3). Do uu
   tien dem SO LUONG CLASS truoc so luong the, nen `.rt-pc__col--yes li::before`
   = (0,1,2) se THUA. Phai viet du hai class, va xoa lai cac thuoc tinh ma
   quy tac kia da dat (background, width, height, border-radius). */
.rt-prose .rt-pc__col--yes li::before,
.rt-prose .rt-pc__col--no li::before {
	background: none;
	width: auto; height: auto; border-radius: 0;
	left: 0; top: 0;
	font-family: var(--sans); font-weight: 800; font-size: 14px; line-height: 1.55;
}
.rt-prose .rt-pc__col--yes li::before { content: '\2713'; color: var(--lv5); }
.rt-prose .rt-pc__col--no li::before  { content: '\2715'; color: #b23b3b; }

/* ---- "Co dang mua khong" ---------------------------------------------- */

.rt-worth { margin: 1.9em 0; background: var(--grey); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 22px 18px; }
.rt-prose .rt-worth h2 { border-bottom-color: var(--line-2); }
.rt-worth__body p:last-child { margin-bottom: 0; }

/* ---- Bang so sanh ----------------------------------------------------- */

.rt-cmp { margin: 1.6em 0; }
.rt-cmp__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.rt-cmp table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 700px; }

.rt-cmp thead th {
	background: var(--navy); color: #fff;
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 9px 12px; text-align: left; white-space: nowrap;
}
.rt-cmp tbody th,
.rt-cmp tbody td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.rt-cmp tbody tr:last-child th,
.rt-cmp tbody tr:last-child td { border-bottom: 0; }
.rt-cmp tbody tr.is-subject { background: var(--blue-lt); }

.rt-cmp__model { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; min-width: 252px; }
.rt-cmp__pic { flex: none; width: 52px; height: 52px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); display: block; }
.rt-cmp__pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rt-cmp__names { display: block; }
.rt-cmp__brand { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.rt-cmp__name { display: block; font-weight: 600; line-height: 1.3; font-size: 13.5px; margin-top: 2px; }
.rt-cmp__flag { display: inline-block; margin-top: 5px; background: var(--navy); color: #fff; border-radius: var(--r); padding: 2px 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.rt-cmp__score { white-space: nowrap; }
.rt-cmp__score .rt-dial { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.rt-cmp__num { font-family: var(--mono); font-weight: 700; }
.rt-cmp__word { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.rt-cmp__votes, .rt-cmp__price { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.rt-cmp__price { font-weight: 700; }
.rt-cmp__why { font-size: 13px; color: var(--ink-2); min-width: 260px; }
.rt-cmp__link { display: inline-block; margin-top: 4px; color: var(--blue); font-weight: 700; white-space: nowrap; }
.rt-cmp__note { margin: 9px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ---- FAQ -------------------------------------------------------------- */

.rt-faq { margin: 1.1em 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.rt-faq__item + .rt-faq__item { border-top: 1px solid var(--line); }
.rt-faq__item summary {
	list-style: none; cursor: pointer;
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 18px;
	font-size: 15.5px; font-weight: 700; line-height: 1.4;
}
.rt-faq__item summary::-webkit-details-marker { display: none; }
.rt-faq__item summary span { flex: 1; }
.rt-faq__item summary::after {
	content: '+'; font-family: var(--mono); font-size: 18px;
	line-height: 1.2; color: var(--blue); flex: none;
}
.rt-faq__item[open] summary::after { content: '\2212'; }
.rt-faq__item[open] summary { padding-bottom: 4px; }
.rt-faq__answer { padding: 0 48px 16px 18px; font-size: 15px; color: var(--ink-2); }
.rt-faq__answer p:last-child { margin-bottom: 0; }

/* ---- The, tieu su, truoc sau ----------------------------------------- */

.rt-arttags { margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rt-arttags > span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rt-arttags a { display: inline-block; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 12.5px; text-decoration: none; }
.rt-arttags a:hover { border-color: var(--blue); color: var(--blue); }

.rt-bio { display: flex; gap: 16px; align-items: flex-start; margin: 26px 0 0; padding: 20px; background: var(--grey); border: 1px solid var(--line); border-radius: var(--r); }
.rt-bio__kicker { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.rt-bio__name { margin: 0 0 7px; font-size: 18px; font-weight: 800; }
.rt-bio__name a { text-decoration: none; }
.rt-bio__desc { margin: 0 0 7px; font-size: 14px; color: var(--ink-2); }
.rt-bio__more { margin: 0; font-size: 12.5px; }
.rt-bio__more a { color: var(--blue); text-decoration: none; font-weight: 700; }

.rt-nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.rt-nextprev--one { grid-template-columns: 1fr; }
.rt-nextprev__item { display: block; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.rt-nextprev__item:hover { border-color: var(--blue); }
.rt-nextprev__item--next { text-align: right; }
.rt-nextprev__dir { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.rt-nextprev__title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }

/* ---- Hop san pham cua plugin ACMS ------------------------------------ */
/* Khong sua ma nguon plugin (ban cap nhat se ghi de); chi phu mau va chu. */

.rt-prose .acms-list { margin: 1.6em 0; font-family: var(--sans); }
.rt-prose .acms-list__item {
	border: 1px solid var(--line) !important;
	border-radius: var(--r) !important;
	background: #fff !important;
	box-shadow: none !important;
}
.rt-prose .acms-list__title,
.rt-prose .acms-list__title a { font-weight: 700 !important; border-bottom: 0; }
.rt-prose .acms-btn,
.rt-prose .acms-btn--amazon {
	background: var(--blue) !important;
	border-color: var(--blue) !important;
	color: #fff !important;
	border-radius: var(--r) !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
.rt-prose .acms-btn:hover { background: var(--blue-dk) !important; }
.rt-prose .acms-list__price-current { font-family: var(--mono) !important; color: var(--ink) !important; }
.rt-prose .acms-list__rank { background: var(--navy) !important; color: #fff !important; font-family: var(--mono) !important; }
.rt-prose .acms-badge { border-radius: var(--r) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.05em; text-transform: uppercase; }

/* Diem "ACMS Score" cua plugin nam trong khoang 90-99 o gan het san pham nen
   khong phan biet duoc gi. De no canh vong tron muc do chi lam nguoi doc
   tuong day la hai thang diem khac nhau cua toa soan. An di. */
.rt-prose .acms-list__score-wrapper { display: none !important; }

/* ---- Thich ung -------------------------------------------------------- */

@media (max-width: 960px) {
	.rt-panel { grid-template-columns: 200px minmax(0, 1fr); }
	.rt-panel__dist { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); }
}

@media (max-width: 700px) {
	.rt-prose { font-size: 16px; }
	.rt-panel { grid-template-columns: 1fr; }
	.rt-panel__pic { border-right: 0; border-bottom: 1px solid var(--line); max-width: 260px; margin-inline: auto; }
	.rt-pc { grid-template-columns: 1fr; }
	.rt-pc__col--no { border-left: 0; border-top: 1px solid var(--line); }
	.rt-specs__table th { width: 45%; }
	.rt-nextprev { grid-template-columns: 1fr; }
	.rt-nextprev__item--next { text-align: left; }
	.rt-bio { flex-direction: column; }
	.rt-faq__answer { padding-right: 18px; }
}