/*
Theme Name: Review Gia Dụng
Theme URI: https://reviewgiadung.com
Author: Review Gia Dụng
Description: Theme affiliate đồ gia dụng, viết thuần tay. Dùng ACF + Contact Form 7. Có công cụ so sánh sản phẩm, tìm kiếm tức thì, lưu bài và dữ liệu có cấu trúc cho SEO.
Version: 2.0.2
Text Domain: reviewgiadung
*/

@media screen{

/*
* ROOT VARIABLES.
*/
:root{
    --th-bg: #FBFAF7;
    --th-bg-alt: #F4F0E9;
    --th-surface: #FFFFFF;
    --th-surface-2: #F5F1EB;
    --th-surface-3: #EFE9E0;
    --th-ink: #26221E;
    --th-ink-soft: #6E655B;
    --th-ink-faint: #9A9188;
    --th-line: #EAE3D9;
    --th-line-soft: #F1ECE3;
    --th-brand: #1E6E5B;
    --th-brand-deep: #14513F;
    --th-brand-soft: #E8F3EF;
    --th-cta: #EC5A22;
    --th-cta-press: #CE4A16;
    --th-cta-soft: #FDEDE5;
    --th-gold: #E0A426;
    --th-good: #2E9E7B;
    --th-okay: #D99512;
    --th-weak: #C0562E;
    --th-focus: #1E6E5B;
    --th-r-sm: 9px;
    --th-r: 13px;
    --th-r-md: 16px;
    --th-r-lg: 20px;
    --th-r-xl: 24px;
    --th-sh-sm: 0px 2px 8px rgba(38, 34, 30, .06);
    --th-sh: 0px 12px 34px rgba(38, 34, 30, .10);
    --th-sh-lg: 0px 26px 60px rgba(38, 34, 30, .16);
    --th-head-h: 68px;
}
html.dark{
    --th-bg: #161410;
    --th-bg-alt: #1B1813;
    --th-surface: #201D16;
    --th-surface-2: #292519;
    --th-surface-3: #332E20;
    --th-ink: #F2EEE6;
    --th-ink-soft: #B4AB9D;
    --th-ink-faint: #7E7667;
    --th-line: #332F25;
    --th-line-soft: #2A261D;
    --th-brand: #43B896;
    --th-brand-deep: #69C9AC;
    --th-brand-soft: #1D2A25;
    --th-cta: #F26A31;
    --th-cta-press: #D9551F;
    --th-cta-soft: #2E1F16;
    --th-gold: #EDB94C;
    --th-good: #43B896;
    --th-okay: #E0A426;
    --th-weak: #E0754B;
    --th-focus: #69C9AC;
    --th-sh-sm: 0px 2px 8px rgba(0, 0, 0, .3);
    --th-sh: 0px 12px 34px rgba(0, 0, 0, .4);
    --th-sh-lg: 0px 26px 60px rgba(0, 0, 0, .55);
}

/*
* BASE.
*/
*{ margin: 0px; padding: 0px; }
.bsize{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    background: var(--th-bg);
    color: var(--th-ink);
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
body.no-scroll{ overflow: hidden; }
img{ max-width: 100%; height: auto; border: 0px; }
svg{ vertical-align: middle; }
a{ color: var(--th-brand); text-decoration: none; transition: color .15s; }
a:hover{ text-decoration: underline; }
h1, h2, h3, h4, h5{ line-height: 1.22; letter-spacing: -.016em; font-weight: 800; }
ul, ol{ list-style: none; }
button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ background: none; border: 0px; cursor: pointer; }
table{ border-collapse: collapse; }
hr{ border: 0px; border-top: 1px solid var(--th-line); margin: 30px 0px; }
::selection{ background: var(--th-brand-soft); color: var(--th-brand-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline: 2px solid var(--th-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.screen-reader-text{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0px;
    border: 0px;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    clip-path: inset(50%);
    white-space: nowrap;
}
.skip-link{
    position: absolute;
    left: -9999px;
    top: 0px;
    z-index: 200;
    background: var(--th-brand);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0px 0px var(--th-r) 0px;
    font-weight: 700;
}
.skip-link:focus{ left: 0px; text-decoration: none; }

/*
* UTILITIES.
*/
.container{ width: 1300px; margin: 0px auto; }
.fleft{ float: left; }
.fright{ float: right; }
.cboth{ clear: both; }
.center{ text-align: center; }
.tf{ font-family: "Be Vietnam Pro", Arial, sans-serif; }
.pt-0{ padding-top: 0px; }
.thumb-cover{ position: relative; overflow: hidden; }
.thumb-cover img{ width: 100%; height: 100%; object-fit: cover; }
.thumb-zoom img{ transition: transform .45s ease; }
.thumb-zoom:hover img{ transform: scale(1.05); }
.block-item{ position: relative; }
.section{ padding: 54px 0px; }
.empty-content{ text-align: center; color: var(--th-ink-soft); padding: 40px 0px; }

/*
* BUTTONS.
*/
.btn-cta,
.btn-brand,
.btn-ghost{
    display: inline-block;
    box-sizing: border-box;
    height: 48px;
    line-height: 46px;
    padding: 0px 22px;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--th-r);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.btn-cta{
    background: var(--th-cta);
    color: #fff;
    box-shadow: 0px 2px 0px var(--th-cta-press);
}
.btn-cta:hover{ background: var(--th-cta-press); color: #fff; text-decoration: none; transform: translateY(1px); box-shadow: 0px 1px 0px var(--th-cta-press); }
.btn-cta i{ margin-left: 8px; font-size: 12px; }
.btn-brand{ background: var(--th-brand); color: #fff; }
.btn-brand:hover{ background: var(--th-brand-deep); color: #fff; text-decoration: none; }
.btn-ghost{ background: var(--th-surface); color: var(--th-ink); border-color: var(--th-line); font-weight: 600; }
.btn-ghost:hover{ border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }
.btn-ghost i{ margin-left: 8px; font-size: 12px; }
.btn-cta.sm,
.btn-brand.sm,
.btn-ghost.sm{ height: 36px; line-height: 34px; padding: 0px 15px; font-size: 13.5px; border-radius: var(--th-r-sm); }
.btn-cta.block,
.btn-brand.block,
.btn-ghost.block{ display: block; width: 100%; }

.icon-btn{
    display: block;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: var(--th-r-sm);
    border: 1px solid var(--th-line);
    background: var(--th-surface);
    color: var(--th-ink-soft);
    font-size: 15px;
    transition: border-color .15s, color .15s, background .15s;
}
.icon-btn:hover{ border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }

/*
* CHIPS, BADGES, SCORE.
*/
.eyebrow{
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--th-brand-deep);
    background: var(--th-brand-soft);
    padding: 6px 14px;
    border-radius: 100px;
    letter-spacing: .01em;
}
.eyebrow i{ margin-right: 6px; }
.chip-row{ margin-top: 18px; }
.chip{
    display: inline-block;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: 100px;
    padding: 7px 14px;
    margin: 0px 8px 8px 0px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-ink);
}
.chip:hover{ border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }
.chip span{ color: var(--th-ink-faint); font-weight: 400; margin-left: 6px; font-size: 12px; }
.mini-badge{ display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; vertical-align: middle; }
.mini-badge.best{ background: var(--th-brand-soft); color: var(--th-brand-deep); }
.mini-badge.deal{ background: var(--th-cta-soft); color: var(--th-cta-press); }

.score-ring{ position: relative; width: 60px; height: 60px; color: var(--th-brand); }
.score-ring svg{ transform: rotate(-90deg); display: block; }
.score-ring .ring-arc{ transition: stroke-dashoffset .8s ease; }
.score-ring .ring-val{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-weight: 800;
    font-size: 17px;
    color: var(--th-ink);
}
.score-ring.big{ width: 76px; height: 76px; }
.score-ring.big .ring-val{ height: 76px; line-height: 76px; font-size: 23px; }
.score-ring.tone-great{ color: var(--th-brand); }
.score-ring.tone-good{ color: var(--th-good); }
.score-ring.tone-okay{ color: var(--th-okay); }
.score-ring.tone-weak{ color: var(--th-weak); }

.tone-great{ --tone: var(--th-brand); }
.tone-good{ --tone: var(--th-good); }
.tone-okay{ --tone: var(--th-okay); }
.tone-weak{ --tone: var(--th-weak); }

.rating-line{ padding: 9px 0px 0px; }
.rating-line.sm{ padding: 6px 0px 0px; }
.stars{
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: var(--th-line);
    vertical-align: middle;
    line-height: 1;
}
.stars .stars-bg:before{ content: "\2605\2605\2605\2605\2605"; }
.stars .stars-fill{ position: absolute; top: 0px; left: 0px; overflow: hidden; color: var(--th-gold); white-space: nowrap; }
.stars .stars-fill:before{ content: "\2605\2605\2605\2605\2605"; }
.rating-line .rl-val{ font-weight: 700; font-size: 14px; margin-left: 9px; }
.rating-line .rl-count{ font-size: 13px; color: var(--th-ink-faint); margin-left: 6px; }

/*
* TOP BAR.
*/
.top-bar{
    background: var(--th-brand-deep);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    padding: 9px 0px;
}
.top-bar i{ margin-right: 8px; opacity: .85; }
.top-bar a{ color: #fff; }
.top-bar a i{ margin: 0px 0px 0px 8px; font-size: 11px; }

/*
* HEADER.
*/
.site-header{
    position: sticky;
    top: 0px;
    z-index: 50;
    background: var(--th-bg);
    border-bottom: 1px solid var(--th-line);
    transition: box-shadow .2s, background .2s;
}
.site-header.is-stuck{ box-shadow: var(--th-sh-sm); background: var(--th-surface); }
.header-inner{ height: var(--th-head-h); position: relative; }
.site-logo{
    float: left;
    display: block;
    height: var(--th-head-h);
    line-height: var(--th-head-h);
    font-weight: 800;
    font-size: 20px;
    color: var(--th-ink);
    letter-spacing: -.02em;
}
.site-logo:hover{ text-decoration: none; color: var(--th-brand); }
.site-logo .logo-img{ max-height: 38px; width: auto; vertical-align: middle; }
.site-logo .logo-mark{
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 10px;
    background: var(--th-brand);
    color: #fff;
    font-size: 16px;
    vertical-align: middle;
    margin-right: 10px;
}
.site-logo .logo-text{ vertical-align: middle; }

.header-nav{ float: left; margin-left: 22px; height: var(--th-head-h); }
.header-nav .main-menu > li{ float: left; position: relative; }
.header-nav .main-menu > li > a{
    display: block;
    line-height: var(--th-head-h);
    padding: 0px 13px;
    color: var(--th-ink-soft);
    font-weight: 600;
    font-size: 14.5px;
    position: relative;
}
.header-nav .main-menu > li > a:hover{ color: var(--th-ink); text-decoration: none; }
.header-nav .main-menu > li > a:after{
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--th-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}
.header-nav .main-menu > li:hover > a:after,
.header-nav .main-menu > li.current-menu-item > a:after,
.header-nav .main-menu > li.current-menu-parent > a:after,
.header-nav .main-menu > li.current-menu-ancestor > a:after{ transform: scaleX(1); }
.header-nav .main-menu > li.current-menu-item > a{ color: var(--th-ink); }
.header-nav .main-menu > li.menu-item-has-children > a:before{
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    float: right;
    margin-left: 7px;
    font-size: 11px;
    opacity: .6;
}
.header-nav .sub-menu{
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: 20;
    min-width: 230px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    box-shadow: var(--th-sh);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.header-nav .main-menu > li:hover .sub-menu{ opacity: 1; visibility: visible; transform: translateY(0px); }
.header-nav .sub-menu li a{
    display: block;
    padding: 9px 12px;
    border-radius: var(--th-r-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--th-ink-soft);
}
.header-nav .sub-menu li a:hover{ background: var(--th-surface-2); color: var(--th-ink); text-decoration: none; }

.header-tools{ float: right; height: var(--th-head-h); }
.header-tools .tool{ float: left; margin-left: 9px; margin-top: 14px; }
.header-search{ position: relative; }
.header-search .hs-ic{
    position: absolute;
    left: 13px;
    top: 12px;
    color: var(--th-ink-faint);
    font-size: 14px;
    pointer-events: none;
}
.header-search input{
    box-sizing: border-box;
    width: 210px;
    height: 40px;
    padding: 0px 12px 0px 36px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-surface);
    color: var(--th-ink);
    font-size: 14px;
    transition: width .2s, border-color .15s, box-shadow .15s;
    -webkit-appearance: none;
}
.header-search input::-webkit-search-cancel-button{ display: none; }
.header-search input:focus{ outline: 0px; border-color: var(--th-brand); box-shadow: 0px 0px 0px 3px var(--th-brand-soft); width: 260px; }
.header-search .hs-clear{
    position: absolute;
    right: 7px;
    top: 7px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 100px;
    color: var(--th-ink-faint);
    font-size: 12px;
    display: none;
}
.header-search.has-value .hs-clear{ display: block; }
.header-search.has-value input{ padding-right: 34px; }
.header-search .hs-clear:hover{ background: var(--th-surface-2); color: var(--th-ink); }
.js-search-open{ display: none; }

.live-search-panel{
    position: absolute;
    right: 0px;
    top: 50px;
    width: 420px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    box-shadow: var(--th-sh-lg);
    padding: 8px;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
}
.live-search-panel.open{ display: block; }
.ls-item{ display: block; padding: 9px 10px; border-radius: var(--th-r-sm); }
.ls-item:hover,
.ls-item.active{ background: var(--th-surface-2); text-decoration: none; }
.ls-item .ls-thumb{
    float: left;
    width: 46px;
    height: 46px;
    border-radius: var(--th-r-sm);
    background: var(--th-brand-soft);
    margin-right: 12px;
    overflow: hidden;
}
.ls-item .ls-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.ls-item .ls-body{ display: block; overflow: hidden; }
.ls-item .ls-kind{ display: block; font-size: 11.5px; font-weight: 700; color: var(--th-brand); text-transform: uppercase; letter-spacing: .03em; }
.ls-item .ls-title{ display: block; font-size: 14.5px; font-weight: 600; color: var(--th-ink); line-height: 1.4; }
.ls-item .ls-score{
    float: right;
    margin-left: 10px;
    min-width: 34px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 7px;
    background: var(--th-brand-soft);
    color: var(--tone, var(--th-brand));
    font-weight: 800;
    font-size: 13px;
}
.ls-all{
    display: block;
    text-align: center;
    padding: 11px;
    margin-top: 6px;
    border-top: 1px solid var(--th-line-soft);
    font-size: 13.5px;
    font-weight: 700;
}
.ls-all i{ margin-left: 7px; font-size: 11px; }
.ls-empty{ padding: 26px 16px; text-align: center; color: var(--th-ink-soft); font-size: 14px; }
.ls-loading{ padding: 26px; text-align: center; color: var(--th-ink-faint); font-size: 14px; }

.menu-toggle{ display: none; }

/*
* MOBILE DRAWER.
*/
.drawer-overlay{
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 90;
    background: rgba(20, 18, 14, .5);
    opacity: 0;
    transition: opacity .25s;
}
.drawer-overlay.open{ opacity: 1; }
.mobile-drawer{
    position: fixed;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 95;
    width: 330px;
    max-width: 86%;
    background: var(--th-surface);
    box-shadow: var(--th-sh-lg);
    transform: translateX(100%);
    transition: transform .28s ease;
    overflow-y: auto;
    padding: 18px;
}
.mobile-drawer.open{ transform: translateX(0px); }
.mobile-drawer .md-head{ margin-bottom: 16px; }
.mobile-drawer .md-title{ float: left; line-height: 40px; font-weight: 800; font-size: 17px; }
.mobile-drawer .md-head .icon-btn{ float: right; }
.mobile-drawer .md-search{ position: relative; margin-bottom: 14px; }
.mobile-drawer .md-search i{ position: absolute; left: 14px; top: 14px; color: var(--th-ink-faint); font-size: 14px; }
.mobile-drawer .md-search input{
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 12px 38px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-bg);
    font-size: 15px;
}
.mobile-drawer .md-menu li a{
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--th-line-soft);
    font-weight: 600;
    font-size: 15.5px;
    color: var(--th-ink);
}
.mobile-drawer .md-menu li a:hover{ color: var(--th-brand); text-decoration: none; }
.mobile-drawer .md-menu .sub-menu li a{ padding-left: 18px; font-weight: 400; font-size: 14.5px; color: var(--th-ink-soft); }
.mobile-drawer .md-foot{ margin-top: 20px; }

/*
* READING PROGRESS.
*/
.reading-progress{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 3px;
    z-index: 60;
    background: transparent;
    pointer-events: none;
}
.reading-progress i{
    display: block;
    height: 100%;
    width: 0%;
    background: var(--th-cta);
    border-radius: 0px 3px 3px 0px;
    transition: width .1s linear;
}

/*
* BREADCRUMB + PAGE HEAD.
*/
.crumb{ position: relative; font-size: 13px; color: var(--th-ink-soft); padding: 22px 0px 0px; }
.crumb a{ color: var(--th-ink-soft); }
.crumb a:hover{ color: var(--th-brand); }
.crumb .crumb-sep{ font-size: 9px; margin: 0px 9px; color: var(--th-ink-faint); vertical-align: middle; }
.crumb .crumb-current{ color: var(--th-ink-faint); }
.page-head{ padding: 20px 0px 6px; }
.page-head .page-title{ font-size: 40px; margin-top: 12px; max-width: 22ch; }
.page-head .page-desc{ color: var(--th-ink-soft); font-size: 16.5px; max-width: 62ch; margin-top: 12px; }
.page-head .page-desc p{ margin: 0px 0px 10px; }
.page-banner{ border-radius: var(--th-r-lg); margin-top: 24px; max-height: 420px; }
.page-search{ position: relative; margin-top: 20px; max-width: 520px; }
.page-search i{ position: absolute; left: 16px; top: 16px; color: var(--th-ink-faint); }
.page-search input{
    width: 100%;
    box-sizing: border-box;
    padding: 14px 110px 14px 42px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    background: var(--th-surface);
    font-size: 15px;
}
.page-search input:focus{ outline: 0px; border-color: var(--th-brand); box-shadow: 0px 0px 0px 3px var(--th-brand-soft); }
.page-search .btn-brand{ position: absolute; right: 5px; top: 5px; padding: 10px 18px; }

/*
* SECTIONS COMMON.
*/
.section-head{ margin-bottom: 26px; }
.section-head h2{ float: left; font-size: 28px; max-width: 70%; }
.section-head .sh-more{
    float: right;
    line-height: 36px;
    font-weight: 700;
    font-size: 14px;
    color: var(--th-brand);
}
.section-head .sh-more i{ margin-left: 7px; font-size: 11px; }
.section-head p{ clear: both; color: var(--th-ink-soft); padding-top: 8px; font-size: 15.5px; max-width: 70ch; }

/*
* HOME HERO.
*/
.home-hero{ padding: 58px 0px 30px; }
.hero-left{ width: calc(60% - 24px); }
.hero-right{ width: 38%; }
.hero-left h1{ font-size: 52px; margin: 20px 0px 0px; letter-spacing: -.025em; }
.hero-left .hero-lede{ font-size: 19px; color: var(--th-ink-soft); max-width: 48ch; margin: 20px 0px 28px; }
.hero-actions a{ margin: 0px 12px 10px 0px; }
.hero-stat{ margin-top: 28px; border-top: 1px solid var(--th-line); padding-top: 22px; }
.hero-stat .stat-item{ margin-right: 34px; }
.hero-stat .stat-item b{ display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.hero-stat .stat-item span{ font-size: 13px; color: var(--th-ink-soft); }

/* Editor choice card. */
.editor-choice{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-xl);
    padding: 10px;
    box-shadow: var(--th-sh-lg);
    position: relative;
}
.editor-choice .ec-badge{
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    background: var(--th-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 100px;
    box-shadow: var(--th-sh-sm);
}
.editor-choice .ec-badge i{ margin-right: 6px; font-size: 11px; }
.editor-choice .ec-img{
    background: var(--th-brand-soft);
    border-radius: var(--th-r-md);
    padding: 30px 26px;
    text-align: center;
}
.editor-choice .ec-img img{ width: 180px; height: 180px; max-width: 100%; object-fit: contain; }
.editor-choice .ec-body{ padding: 20px 16px 12px; }
.editor-choice .ec-name{ width: calc(100% - 76px); padding-right: 14px; }
.editor-choice .ec-name h3{ font-size: 20px; line-height: 1.3; }
.editor-choice .ec-name .ec-sub{ color: var(--th-ink-soft); font-size: 14.5px; margin: 7px 0px 0px; }
.editor-choice .ec-body .ec-ring{ float: right; padding-top: 6px; }
.editor-choice .ec-body .btn-cta{ margin-top: 18px; }

/*
* CATEGORY STRIP.
*/
.cat-strip{ position: relative; white-space: nowrap; overflow-x: auto; padding: 4px 0px 10px; -webkit-overflow-scrolling: touch; }
.cat-strip::-webkit-scrollbar{ height: 4px; }
.cat-strip::-webkit-scrollbar-thumb{ background: var(--th-line); border-radius: 4px; }
.cat-chip{
    display: inline-block;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: 100px;
    padding: 11px 18px;
    margin-right: 11px;
    font-size: 14px;
    font-weight: 600;
    color: var(--th-ink);
    transition: border-color .15s, transform .15s;
}
.cat-chip:hover{ border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; transform: translateY(-2px); }
.cat-chip i{ color: var(--th-brand); margin-right: 9px; }

/*
* CARD GRID (4 cols).
* Both card types share one fixed geometry: thumb 62.5% + body 175px + foot 56px,
* so a guide card and a product card in the same row always end at the same pixel.
*/
.card-grid{ position: relative; }
.card{
    position: relative;
    float: left;
    width: calc((100% - 66px) / 4);
    margin-right: 22px;
    padding-bottom: 56px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card:nth-child(4n+4){ margin-right: 0px; }
.card:nth-child(4n+1){ clear: both; }
.card:nth-child(n+5){ margin-top: 22px; }
.card:hover{ box-shadow: var(--th-sh); transform: translateY(-4px); }

.card .card-thumb{
    position: relative;
    overflow: hidden;
    background: var(--th-brand-soft);
    padding-top: 62.5%;
}
.card .card-thumb-link{ position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; display: block; }
.card .card-thumb img{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card .pro-thumb img{ object-fit: contain; padding: 20px; box-sizing: border-box; }
.card .card-flag{
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    max-width: calc(100% - 64px);
    background: var(--th-surface);
    color: var(--th-ink);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 22px;
    padding: 0px 10px;
    border-radius: 7px;
    box-shadow: var(--th-sh-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .card-flag i{ margin-right: 5px; color: var(--th-brand); }
.card .card-flag.flag-cta{ background: var(--th-cta); color: #fff; }
.card .card-tools{ position: absolute; right: 10px; top: 10px; z-index: 3; }
.card .card-tool{
    display: block;
    width: 32px;
    height: 32px;
    line-height: 30px;
    margin-bottom: 8px;
    text-align: center;
    border-radius: 100px;
    border: 1px solid var(--th-line);
    background: var(--th-surface);
    color: var(--th-ink-soft);
    font-size: 13px;
    box-shadow: var(--th-sh-sm);
    transition: border-color .15s, color .15s, background .15s;
}
.card .card-tool:hover{ border-color: var(--th-brand); color: var(--th-brand); }
.card .card-tool.saved{ border-color: var(--th-cta); color: var(--th-cta); }
.card .card-tool.on{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; }
.card .card-score{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    min-width: 40px;
    height: 34px;
    line-height: 32px;
    padding: 0px 9px;
    box-sizing: border-box;
    text-align: center;
    border-radius: var(--th-r-sm);
    border: 1px solid var(--th-line);
    background: var(--th-surface);
    color: var(--tone, var(--th-brand));
    font-weight: 800;
    font-size: 16px;
    box-shadow: var(--th-sh-sm);
}

.card .card-body{ padding: 16px 18px 14px; }
.card .card-top{ height: 18px; line-height: 18px; overflow: hidden; }
.card .card-cat{
    float: left;
    max-width: 62%;
    font-size: 12px;
    font-weight: 700;
    color: var(--th-brand);
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card .card-fresh{ float: right; font-size: 11.5px; color: var(--th-ink-faint); white-space: nowrap; }
.card .card-fresh.fresh{ color: var(--th-brand); font-weight: 600; }
.card .card-rating{ float: right; font-size: 12px; color: var(--th-ink-faint); white-space: nowrap; }
.card .card-rating .stars{ font-size: 12px; }
.card .card-rating b{ color: var(--th-ink); margin-left: 5px; font-size: 12.5px; }
.card .card-title{
    clear: both;
    margin: 8px 0px 0px;
    height: 48px;
    font-size: 17.5px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card .card-title a{ color: var(--th-ink); }
.card .card-title a:hover{ color: var(--th-brand); text-decoration: none; }
.card .card-ex{
    margin: 8px 0px 0px;
    height: 63px;
    font-size: 14px;
    line-height: 21px;
    color: var(--th-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card .card-foot{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 56px;
    box-sizing: border-box;
    padding: 0px 18px;
    border-top: 1px solid var(--th-line-soft);
    background: var(--th-surface);
}
.card .cf-left{ float: left; height: 55px; line-height: 55px; overflow: hidden; font-size: 12.5px; color: var(--th-ink-faint); }
.card .cf-left span{ margin-right: 13px; white-space: nowrap; }
.card .cf-left i{ margin-right: 5px; }
.card .cf-price{ max-width: calc(100% - 100px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .cf-price b{ font-size: 17px; color: var(--th-cta-press); letter-spacing: -.01em; }
.card .cf-price s{ font-size: 12.5px; color: var(--th-ink-faint); margin-left: 7px; }
.card .cf-go{ float: right; height: 55px; line-height: 55px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.card .cf-go i{ margin-left: 7px; font-size: 10px; }
.card .cf-btn{ float: right; margin-top: 10px; }

/* List layout. */
.card-grid.is-list .card{ width: 100%; margin-right: 0px; float: none; clear: both; padding-bottom: 0px; }
.card-grid.is-list .card:nth-child(n+2){ margin-top: 16px; }
.card-grid.is-list .card .card-thumb{ float: left; width: 250px; padding-top: 168px; }
.card-grid.is-list .card .card-body{ overflow: hidden; padding: 18px 22px 0px; }
.card-grid.is-list .card .card-title{ font-size: 20px; line-height: 27px; height: 54px; }
.card-grid.is-list .card .card-ex{ font-size: 14.5px; line-height: 22px; height: 44px; -webkit-line-clamp: 2; }
.card-grid.is-list .card .card-foot{ position: static; margin: 12px 0px 0px 272px; border-top: 1px solid var(--th-line-soft); }

/*
* TRUST BLOCK.
*/
.trust-block{
    background: var(--th-brand);
    border-radius: var(--th-r-xl);
    padding: 44px 38px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.trust-block:after{
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 300px;
    height: 300px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .06);
}
.trust-block h2{ color: #fff; font-size: 28px; position: relative; }
.trust-block .trust-intro{ color: rgba(255, 255, 255, .82); padding: 10px 0px 0px; max-width: 62ch; position: relative; }
.trust-col{
    float: left;
    width: calc((100% - 56px) / 3);
    margin-right: 28px;
    margin-top: 30px;
    position: relative;
}
.trust-col:nth-child(3n+3){ margin-right: 0px; }
.trust-col .trust-ic{
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-radius: var(--th-r);
    background: rgba(255, 255, 255, .16);
    margin-bottom: 16px;
    font-size: 20px;
}
.trust-col b{ display: block; font-size: 17px; margin-bottom: 6px; }
.trust-col p{ color: rgba(255, 255, 255, .8); font-size: 14.5px; }

/*
* POPULAR COMPARISONS + RANK LIST.
*/
.home-cmp-left{ width: calc(62% - 24px); }
.home-cmp-right{ width: 38%; }
.cmp-link{
    display: block;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    padding: 15px 18px;
    margin-bottom: 12px;
    transition: border-color .15s, transform .15s;
}
.cmp-link:hover{ border-color: var(--th-brand); text-decoration: none; transform: translateX(3px); }
.cmp-link .vs-badge{
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: var(--th-r-sm);
    background: var(--th-brand-soft);
    font-weight: 800;
    font-size: 12px;
    color: var(--th-brand);
    margin-right: 15px;
}
.cmp-link .cmp-body{ overflow: hidden; float: left; width: calc(100% - 85px); }
.cmp-link .cmp-title{ font-weight: 600; font-size: 15.5px; color: var(--th-ink); }
.cmp-link .cmp-sub{ font-size: 12.5px; color: var(--th-ink-faint); }
.cmp-link .cmp-go{ float: right; line-height: 40px; color: var(--th-ink-faint); font-size: 12px; }

.rank-list{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    overflow: hidden;
}
.rank-item{ display: block; padding: 14px 18px; border-top: 1px solid var(--th-line-soft); }
.rank-item:first-child{ border-top: 0px; }
.rank-item:hover{ background: var(--th-surface-2); text-decoration: none; }
.rank-item .rank-num{
    float: left;
    width: 30px;
    font-size: 21px;
    font-weight: 800;
    color: var(--th-line);
    line-height: 1.3;
}
.rank-item:nth-child(1) .rank-num{ color: var(--th-cta); }
.rank-item:nth-child(2) .rank-num{ color: var(--th-brand); }
.rank-item:nth-child(3) .rank-num{ color: var(--th-gold); }
.rank-item .rank-body{ display: block; overflow: hidden; }
.rank-item .rank-title{ display: block; font-size: 14.5px; font-weight: 600; color: var(--th-ink); line-height: 1.45; }
.rank-item .rank-meta{ display: block; font-size: 12px; color: var(--th-ink-faint); margin-top: 3px; }

/*
* NEWSLETTER.
*/
.newsletter{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-xl);
    padding: 40px 36px;
    box-shadow: var(--th-sh-sm);
}
.newsletter .news-text{ width: calc(46% - 16px); }
.newsletter .news-form{ width: 54%; }
.newsletter h2{ font-size: 25px; }
.newsletter .news-text p{ color: var(--th-ink-soft); padding-top: 10px; font-size: 15.5px; }
.newsletter .news-form input[type="email"],
.newsletter .news-form input[type="text"]{
    width: calc(100% - 205px);
    box-sizing: border-box;
    height: 52px;
    padding: 0px 16px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    background: var(--th-bg);
    color: var(--th-ink);
    font-size: 15px;
    float: left;
}
.newsletter .news-form input[type="email"]:focus{ outline: 0px; border-color: var(--th-brand); box-shadow: 0px 0px 0px 3px var(--th-brand-soft); }
.newsletter .news-form .wpcf7-submit,
.newsletter .news-form input[type="submit"]{
    float: right;
    box-sizing: border-box;
    width: 190px;
    height: 52px;
    line-height: 50px;
    padding: 0px 16px;
    border: 0px;
    border-radius: var(--th-r);
    background: var(--th-cta);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0px 2px 0px var(--th-cta-press);
}
.newsletter .news-form .wpcf7-submit:hover{ background: var(--th-cta-press); }
/* Contact Form 7 wraps controls in a <label>/<span> that generates an empty
   line box; zeroing it lets the floated field and button share one row. */
.newsletter .news-form .wpcf7-form p,
.foot-col-wide .wpcf7-form p{ margin: 0px; line-height: 0px; }
.newsletter .news-form .wpcf7-form label,
.foot-col-wide .wpcf7-form label{ display: block; line-height: 0px; }
.newsletter .news-form .wpcf7-form p:after,
.foot-col-wide .wpcf7-form p:after{ content: ""; display: block; clear: both; }
.newsletter .news-form .wpcf7-form{ position: relative; }
.newsletter .news-form .wpcf7-spinner{ position: absolute; right: 200px; top: 14px; float: none; margin: 0px; }
.foot-col-wide .wpcf7-form input{ display: block; }
.foot-col-wide .wpcf7-spinner{ display: none; }
.wpcf7-not-valid-tip,
.wpcf7-response-output{ line-height: 1.5; }
.newsletter .news-form .wpcf7-not-valid-tip{ clear: both; font-size: 13px; padding-top: 8px; }
.newsletter .news-form .wpcf7-response-output{ clear: both; margin: 14px 0px 0px; border-radius: var(--th-r-sm); font-size: 13.5px; padding: 10px 14px; }

/*
* ARCHIVE TOOLBAR.
*/
.archive-toolbar{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    padding: 12px 18px;
    margin-bottom: 24px;
}
.archive-toolbar .tb-count{ line-height: 38px; font-size: 14px; color: var(--th-ink-soft); }
.archive-toolbar .tb-count b{ color: var(--th-ink); font-size: 16px; }
.archive-toolbar .tb-sort{ margin-right: 14px; }
.archive-toolbar .tb-sort label{ font-size: 13px; color: var(--th-ink-soft); margin-right: 8px; line-height: 38px; float: left; }
.archive-toolbar select{
    float: left;
    padding: 8px 12px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-bg);
    color: var(--th-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    height: 38px;
}
.archive-toolbar .tb-view{ border: 1px solid var(--th-line); border-radius: var(--th-r-sm); overflow: hidden; height: 38px; }
.archive-toolbar .tb-view-btn{
    float: left;
    width: 40px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: var(--th-ink-faint);
    font-size: 14px;
}
.archive-toolbar .tb-view-btn.active{ background: var(--th-brand-soft); color: var(--th-brand); }

.loop-more{ margin-top: 34px; }
.loop-more .btn-ghost{ min-width: 240px; height: 52px; line-height: 50px; padding: 0px 24px; }
.loop-more .btn-ghost i{ margin-left: 10px; }
.loop-more .btn-ghost.loading{ opacity: .6; pointer-events: none; }
.loop-pagination{ margin-top: 34px; }

/*
* PAGINATION.
*/
.pagination,
.huydev-pagination,
.comments-pagination{ text-align: center; margin-top: 34px; }
.pagination .nav-links,
.huydev-pagination .nav-links{ display: block; }
.pagination .screen-reader-text{ position: absolute; left: -9999px; }
.pagination ul,
.huydev-pagination ul{ display: inline-block; }
.pagination ul li,
.huydev-pagination ul li{ float: left; margin: 0px 4px; }
.page-numbers{
    display: inline-block;
    min-width: 42px;
    height: 42px;
    line-height: 40px;
    padding: 0px 10px;
    box-sizing: border-box;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-surface);
    color: var(--th-ink-soft);
    font-weight: 600;
    font-size: 14.5px;
    margin: 0px 4px;
}
.page-numbers:hover{ border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }
.page-numbers.current{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; }
.page-numbers.dots{ border-color: transparent; background: transparent; }
.page-links{ margin: 24px 0px; font-size: 14px; color: var(--th-ink-soft); }
.page-links .post-page-numbers{
    display: inline-block;
    min-width: 34px;
    height: 34px;
    line-height: 32px;
    text-align: center;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    margin-left: 6px;
}
.page-links .post-page-numbers.current{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; }

/*
* EMPTY STATE.
*/
.empty-state{
    text-align: center;
    padding: 56px 24px;
    background: var(--th-surface);
    border: 1px dashed var(--th-line);
    border-radius: var(--th-r-lg);
}
.empty-state .es-ic{
    width: 66px;
    height: 66px;
    line-height: 66px;
    margin: 0px auto 18px;
    border-radius: 100px;
    background: var(--th-brand-soft);
    color: var(--th-brand);
    font-size: 26px;
}
.empty-state b{ display: block; font-size: 19px; font-weight: 800; }
.empty-state p{ color: var(--th-ink-soft); font-size: 15px; max-width: 46ch; margin: 10px auto 20px; }

/*
* ARTICLE HEAD.
*/
.article-head{ padding-top: 16px; }
.article-head.compact h1{ font-size: 34px; }
.art-cat{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--th-brand-deep);
    background: var(--th-brand-soft);
    padding: 5px 12px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 14px;
}
.art-cat:hover{ text-decoration: none; background: var(--th-brand); color: #fff; }
.article-head h1{ font-size: 42px; max-width: 24ch; letter-spacing: -.025em; }
.article-head .art-sub{ font-size: 18px; color: var(--th-ink-soft); max-width: 58ch; margin-top: 14px; }
.article-meta{ font-size: 13.5px; color: var(--th-ink-soft); padding-top: 18px; }
.article-meta > span{ display: inline-block; vertical-align: middle; }
.article-meta i{ margin-right: 5px; opacity: .8; }
.article-meta .meta-who{ font-weight: 700; color: var(--th-ink); }
.article-meta .meta-who .meta-av{
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 100px;
    overflow: hidden;
    background: var(--th-brand);
    margin-right: 10px;
    vertical-align: middle;
}
.article-meta .meta-who .meta-av img{ width: 34px; height: 34px; display: block; }
.article-meta .meta-sep{ padding: 0px 10px; color: var(--th-ink-faint); }
.article-meta .meta-save{
    margin-left: 14px;
    padding: 5px 13px;
    border: 1px solid var(--th-line);
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--th-ink-soft);
    vertical-align: middle;
}
.article-meta .meta-save:hover{ border-color: var(--th-brand); color: var(--th-brand); }
.article-meta .meta-save.saved{ border-color: var(--th-cta); color: var(--th-cta); }

.disclosure-box{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-left: 4px solid var(--th-cta);
    border-radius: var(--th-r);
    padding: 13px 18px;
    font-size: 13.5px;
    color: var(--th-ink-soft);
    margin: 24px 0px 0px;
}
.disclosure-box i{ float: left; color: var(--th-cta); font-size: 17px; margin: 3px 13px 0px 0px; }
.disclosure-box span{ display: block; overflow: hidden; }
.disclosure-box b{ color: var(--th-ink); }

/*
* ARTICLE LAYOUT WITH STICKY ASIDE.
*/
.article-main{ float: left; width: calc(100% - 320px); max-width: 800px; padding-top: 30px; }
.article-solo{ max-width: 800px; margin: 0px auto; padding-top: 30px; }
.toc-side,
.buy-side{
    float: right;
    width: 290px;
    margin-top: 30px;
    position: sticky;
    top: calc(var(--th-head-h) + 20px);
}
.side-sticky{
    max-height: calc(100vh - var(--th-head-h) - 50px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.side-sticky::-webkit-scrollbar{ width: 5px; }
.side-sticky::-webkit-scrollbar-thumb{ background: var(--th-line); border-radius: 5px; }
.buy-side .buy-card{ margin-bottom: 18px; }
.toc-card{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 18px;
    font-size: 14px;
}
.toc-title{ display: block; font-size: 11.5px; color: var(--th-ink-faint); font-weight: 800; letter-spacing: .06em; margin-bottom: 12px; }
#toc{ border-left: 2px solid var(--th-line); }
#toc li a{
    display: block;
    padding: 7px 0px 7px 15px;
    margin-left: -2px;
    color: var(--th-ink-soft);
    border-left: 2px solid transparent;
    font-size: 13.5px;
    line-height: 1.5;
}
#toc li a:hover{ color: var(--th-ink); text-decoration: none; }
#toc li a.active{ color: var(--th-brand-deep); border-left-color: var(--th-brand); font-weight: 700; }
#toc li.toc-h3 a{ padding-left: 26px; font-size: 13px; }

/*
* TL;DR.
*/
.tldr-box{
    background: var(--th-brand-soft);
    border: 1px solid var(--th-brand);
    border-radius: var(--th-r-md);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.tldr-box .tldr-head{ font-weight: 800; font-size: 13px; color: var(--th-brand-deep); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.tldr-box .tldr-head i{ margin-right: 8px; }
.tldr-box .tldr-body{ font-size: 16px; color: var(--th-ink); }
.tldr-box .tldr-body p{ margin: 0px 0px 10px; }
.tldr-box .tldr-body p:last-child{ margin-bottom: 0px; }
.tldr-box .tldr-body strong{ color: var(--th-brand-deep); }

/*
* QUICK PICK.
*/
.quick-pick{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-lg);
    box-shadow: var(--th-sh);
    padding: 18px;
    margin: 0px 0px 34px;
    scroll-margin-top: calc(var(--th-head-h) + 18px);
}
.quick-pick .qp-head{ font-weight: 800; font-size: 16px; padding: 0px 2px 16px; }
.quick-pick .qp-head .qp-live{
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background: var(--th-cta);
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0px 0px 0px 4px var(--th-cta-soft);
}
.qp-card{
    float: left;
    width: calc((100% - 32px) / 3);
    margin-right: 16px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    padding: 16px;
    text-align: center;
    transition: border-color .15s, box-shadow .15s;
}
.qp-card:nth-child(3n+3){ margin-right: 0px; }
.qp-card:nth-child(n+4){ margin-top: 16px; }
.qp-card:hover{ border-color: var(--th-brand); box-shadow: var(--th-sh-sm); }
.qp-card .qp-tag{
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--th-brand-deep);
    background: var(--th-brand-soft);
    padding: 4px 11px;
    border-radius: 100px;
    margin-bottom: 14px;
}
.qp-card .qp-ic{
    height: 92px;
    line-height: 92px;
    background: var(--th-surface-2);
    border-radius: var(--th-r-sm);
    margin-bottom: 13px;
}
.qp-card .qp-ic img{ max-width: 76px; max-height: 76px; object-fit: contain; vertical-align: middle; }
.qp-card .qp-name{
    font-weight: 700;
    font-size: 15px;
    line-height: 21px;
    height: 42px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.qp-card .qp-sub{
    font-size: 12.5px;
    line-height: 19px;
    height: 38px;
    color: var(--th-ink-soft);
    margin: 5px 0px 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
* COMPARISON TABLE.
*/
.tbl-tools{ margin: 10px 0px 14px; }
.tbl-tools label{ font-size: 13px; color: var(--th-ink-soft); margin-right: 9px; }
.tbl-sort{
    padding: 9px 13px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-surface);
    color: var(--th-ink);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.tbl-hint{ font-size: 12.5px; color: var(--th-ink-faint); margin-left: 14px; display: none; }
.tbl-hint i{ margin-right: 6px; }
.tbl-scroll{ position: relative; overflow-x: auto; border: 1px solid var(--th-line); border-radius: var(--th-r-md); background: var(--th-surface); -webkit-overflow-scrolling: touch; }
table.cmp-table{ width: 100%; min-width: 680px; font-size: 14.5px; }
table.cmp-table th,
table.cmp-table td{ padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--th-line-soft); vertical-align: middle; }
table.cmp-table thead th{
    background: var(--th-surface-2);
    font-weight: 700;
    font-size: 12px;
    color: var(--th-ink-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}
table.cmp-table tbody tr:last-child td{ border-bottom: 0px; }
table.cmp-table tbody tr:hover{ background: var(--th-bg-alt); }
table.cmp-table .pn-mini{
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: var(--th-r-sm);
    background: var(--th-brand-soft);
    margin-right: 12px;
    vertical-align: middle;
    overflow: hidden;
}
table.cmp-table .pn-mini img{ width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }
table.cmp-table .cmp-pn{ font-weight: 700; color: var(--th-ink); vertical-align: middle; }
table.cmp-table .cmp-price{ font-weight: 700; color: var(--th-cta-press); white-space: nowrap; }
.cmp-score{
    display: inline-block;
    min-width: 40px;
    height: 30px;
    line-height: 30px;
    padding: 0px 8px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    background: var(--th-surface-2);
    color: var(--tone, var(--th-brand));
    font-weight: 800;
    font-size: 15px;
}

/*
* SECTION TITLE IN ARTICLE.
*/
.sec-title{
    font-size: 27px;
    margin: 46px 0px 6px;
    scroll-margin-top: calc(var(--th-head-h) + 18px);
}
.sec-title:first-child{ margin-top: 0px; }

/*
* PRODUCT BLOCK.
*/
.product-block{
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-lg);
    overflow: hidden;
    margin: 24px 0px;
    background: var(--th-surface);
}
.product-block .pb-top{ padding: 24px; }
.product-block .pb-img{
    width: 200px;
    height: 190px;
    background: var(--th-brand-soft);
    border-radius: var(--th-r-md);
    text-align: center;
    position: relative;
    margin-right: 24px;
}
.product-block .pb-img img{ width: 140px; height: 140px; object-fit: contain; margin-top: 25px; }
.product-block .pb-img .pb-rank{
    position: absolute;
    top: -12px;
    left: -12px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    border-radius: 100px;
    background: var(--th-brand);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    box-shadow: var(--th-sh-sm);
}
.product-block .pb-img .pb-badge,
.review-hero .rh-img .pb-badge{
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--th-cta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 7px;
}
.product-block .pb-info{ overflow: hidden; }
.product-block .pb-info h3{ font-size: 22px; }
.pb-verdict{ font-size: 15px; color: var(--th-ink-soft); margin-top: 13px; }

.breakdown{ margin-top: 16px; }
.bk-item{
    float: left;
    width: calc((100% - 26px) / 2);
    margin-right: 26px;
    margin-bottom: 10px;
    font-size: 12.5px;
}
.bk-item:nth-child(2n+2){ margin-right: 0px; }
.bk-item .bk-label{ float: left; color: var(--th-ink-soft); }
.bk-item .bk-num{ float: right; font-weight: 800; color: var(--th-ink); }
.bk-item .bk-bar{ clear: both; overflow: hidden; height: 7px; background: var(--th-surface-3); border-radius: 100px; margin-top: 6px; }
.bk-item .bk-bar i{ display: block; height: 100%; background: var(--th-brand); border-radius: 100px; transition: width .8s ease; }
.bk-item .bk-bar i.tone-great{ background: var(--th-brand); }
.bk-item .bk-bar i.tone-good{ background: var(--th-good); }
.bk-item .bk-bar i.tone-okay{ background: var(--th-okay); }
.bk-item .bk-bar i.tone-weak{ background: var(--th-weak); }
.breakdown-lg{ background: var(--th-surface); border: 1px solid var(--th-line); border-radius: var(--th-r-md); padding: 22px 24px 14px; margin-top: 18px; }
.breakdown-lg .bk-item{ font-size: 13.5px; margin-bottom: 16px; }

.procon{ border-top: 1px solid var(--th-line); }
.procon.boxed{ border: 1px solid var(--th-line); border-radius: var(--th-r-md); overflow: hidden; margin-top: 18px; background: var(--th-surface); }
.procon .pc{ float: left; width: 50%; padding: 20px 24px; }
.procon .pc.pc-pro{ border-right: 1px solid var(--th-line); }
.procon .pc h4{ font-size: 12.5px; margin-bottom: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.procon .pc h4 i{ margin-right: 7px; }
.procon .pc.pc-pro h4{ color: var(--th-brand); }
.procon .pc.pc-con h4{ color: var(--th-weak); }
.procon .pc ul{ font-size: 14.5px; }
.procon .pc ul li{ margin: 7px 0px; padding-left: 22px; position: relative; color: var(--th-ink-soft); }
.procon .pc ul li:before{
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 100px;
}
.procon .pc.pc-pro ul li:before{ background: var(--th-brand); }
.procon .pc.pc-con ul li:before{ background: var(--th-weak); }

.product-block .pb-foot{ padding: 18px 24px; border-top: 1px solid var(--th-line); background: var(--th-surface-2); }
.product-block .pb-foot .pb-price{ line-height: 1.3; padding-top: 3px; }
.product-block .pb-foot .pb-price span{ display: block; font-size: 12px; color: var(--th-ink-faint); }
.product-block .pb-foot .pb-price b{ color: var(--th-cta-press); font-size: 20px; }
.product-block .pb-foot .pb-price s{ color: var(--th-ink-faint); font-size: 13px; margin-left: 8px; }

/*
* PROSE.
*/
.single-content{ font-size: 17px; line-height: 1.78; }
.single-content p{ margin: 17px 0px; }
.single-content h2{ font-size: 26px; margin: 40px 0px 10px; scroll-margin-top: calc(var(--th-head-h) + 18px); }
.single-content h3{ font-size: 20px; margin: 30px 0px 8px; scroll-margin-top: calc(var(--th-head-h) + 18px); }
.single-content h4{ font-size: 17px; margin: 24px 0px 6px; }
.single-content ul{ list-style: disc; padding-left: 22px; margin: 17px 0px; }
.single-content ol{ list-style: decimal; padding-left: 22px; margin: 17px 0px; }
.single-content li{ margin: 7px 0px; }
.single-content img{ border-radius: var(--th-r); margin: 10px 0px; }
.single-content figure{ margin: 24px 0px; }
.single-content figcaption{ font-size: 13px; color: var(--th-ink-faint); text-align: center; padding-top: 9px; }
.single-content blockquote{
    border-left: 4px solid var(--th-brand);
    background: var(--th-surface);
    border-radius: 0px var(--th-r) var(--th-r) 0px;
    padding: 16px 22px;
    margin: 24px 0px;
    color: var(--th-ink-soft);
    font-size: 16.5px;
}
.single-content blockquote p:first-child{ margin-top: 0px; }
.single-content blockquote p:last-child{ margin-bottom: 0px; }
.single-content a{ text-decoration: underline; text-underline-offset: 3px; }
.single-content table{ width: 100%; margin: 22px 0px; font-size: 15px; }
.single-content table th,
.single-content table td{ padding: 12px 14px; border: 1px solid var(--th-line); text-align: left; }
.single-content table th{ background: var(--th-surface-2); font-weight: 700; }
.single-content iframe{ max-width: 100%; border-radius: var(--th-r); }

/*
* FAQ.
*/
.faq-list{ border: 1px solid var(--th-line); border-radius: var(--th-r-md); overflow: hidden; margin: 18px 0px; background: var(--th-surface); }
.faq-list .faq-item{ border-top: 1px solid var(--th-line-soft); }
.faq-list .faq-item:first-child{ border-top: 0px; }
.faq-list .faq-q{
    display: block;
    width: 100%;
    text-align: left;
    padding: 18px 56px 18px 22px;
    font-weight: 700;
    font-size: 16px;
    position: relative;
    color: var(--th-ink);
    line-height: 1.5;
}
.faq-list .faq-q:after{
    content: "+";
    position: absolute;
    right: 22px;
    top: 50%;
    margin-top: -16px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border-radius: 100px;
    background: var(--th-brand-soft);
    color: var(--th-brand);
    font-weight: 700;
    font-size: 19px;
}
.faq-list .faq-item.open .faq-q:after{ content: "\2013"; background: var(--th-brand); color: #fff; }
.faq-list .faq-q:hover{ color: var(--th-brand); }
.faq-list .faq-a{ display: none; padding: 0px 22px 20px; color: var(--th-ink-soft); font-size: 15.5px; }
.faq-list .faq-a p{ margin: 0px 0px 10px; }
.faq-list .faq-a p:last-child{ margin-bottom: 0px; }
.faq-list .faq-item.open .faq-a{ display: block; }

/*
* SHARE BAR + HELPFUL.
*/
.share-bar{ margin: 34px 0px; padding: 16px 0px; border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); }
.share-bar .share-label{ float: left; line-height: 36px; font-size: 13px; font-weight: 700; color: var(--th-ink-faint); margin-right: 14px; text-transform: uppercase; letter-spacing: .05em; }
.share-btn{
    float: left;
    height: 36px;
    line-height: 34px;
    padding: 0px 15px;
    margin-right: 9px;
    border: 1px solid var(--th-line);
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--th-ink-soft);
    transition: border-color .15s, color .15s, background .15s;
}
.share-btn i{ margin-right: 8px; }
.share-btn:hover{ text-decoration: none; color: #fff; }
.share-btn.fb:hover{ background: #1877F2; border-color: #1877F2; }
.share-btn.zalo:hover{ background: #0068FF; border-color: #0068FF; }
.share-btn.x:hover{ background: #111; border-color: #111; }
.share-btn.copy:hover{ background: var(--th-brand); border-color: var(--th-brand); }
.share-btn.copied{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; }

.helpful-box{
    background: var(--th-surface-2);
    border-radius: var(--th-r-md);
    padding: 22px 24px;
    margin: 30px 0px;
    text-align: center;
}
.helpful-box .hb-q{ font-weight: 700; font-size: 16px; margin-bottom: 15px; }
.helpful-box .hb-btn{
    display: inline-block;
    padding: 10px 20px;
    margin: 0px 5px 8px;
    border: 1px solid var(--th-line);
    border-radius: 100px;
    background: var(--th-surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--th-ink-soft);
    transition: border-color .15s, color .15s;
}
.helpful-box .hb-btn i{ margin-right: 8px; }
.helpful-box .hb-btn:hover{ border-color: var(--th-brand); color: var(--th-brand); }
.helpful-box .hb-btn.picked{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; }
.helpful-box .hb-result{ font-size: 13.5px; color: var(--th-ink-soft); padding-top: 8px; }

/*
* AUTHOR BOX.
*/
.author-box{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 24px;
    margin: 34px 0px;
}
.author-box .ab-av{ width: 64px; margin-right: 20px; }
.author-box .ab-av img{ width: 64px; height: 64px; border-radius: 100px; display: block; }
.author-box .ab-body{ overflow: hidden; }
.author-box .ab-body b{ font-size: 17px; }
.author-box .ab-role{ font-size: 13px; color: var(--th-brand); font-weight: 700; margin: 3px 0px 9px; }
.author-box .ab-body p{ font-size: 14.5px; color: var(--th-ink-soft); }

/*
* SINGLE PRODUCT REVIEW.
*/
.review-hero{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-xl);
    padding: 28px;
    margin: 26px 0px 0px;
    box-shadow: var(--th-sh-sm);
}
.review-hero .rh-media{ width: 380px; margin-right: 34px; }
.review-hero .rh-img{
    background: var(--th-brand-soft);
    border-radius: var(--th-r-lg);
    padding: 26px 0px;
    text-align: center;
    position: relative;
}
.review-hero .rh-img img{ width: 280px; height: 280px; object-fit: contain; max-width: 100%; }
.review-hero .rh-img .rh-off{
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--th-cta);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: 8px;
}
.review-hero .rh-thumbs{ margin-top: 12px; }
.review-hero .rh-thumb{
    float: left;
    width: 64px;
    height: 64px;
    margin: 0px 10px 10px 0px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    overflow: hidden;
    background: var(--th-surface-2);
    padding: 4px;
    box-sizing: border-box;
}
.review-hero .rh-thumb img{ width: 100%; height: 100%; object-fit: contain; }
.review-hero .rh-thumb.active{ border-color: var(--th-brand); box-shadow: 0px 0px 0px 2px var(--th-brand-soft); }
.review-hero .rh-body{ overflow: hidden; }
.review-hero .rh-score{ padding-bottom: 18px; border-bottom: 1px solid var(--th-line-soft); }
.review-hero .rh-score .score-ring{ float: left; margin-right: 18px; }
.review-hero .rh-score .rh-score-txt{ overflow: hidden; padding-top: 12px; }
.review-hero .rh-count{ font-size: 13px; color: var(--th-ink-soft); margin-top: 6px; }
.review-hero .rh-verdict{ color: var(--th-ink-soft); font-size: 16px; margin: 18px 0px; }
.review-hero .rh-highlights{ margin: 18px 0px; }
.review-hero .hl-item{
    float: left;
    width: calc((100% - 14px) / 2);
    margin-right: 14px;
    margin-bottom: 12px;
    background: var(--th-surface-2);
    border-radius: var(--th-r-sm);
    padding: 11px 14px;
}
.review-hero .hl-item:nth-child(2n+2){ margin-right: 0px; }
.review-hero .hl-item i{ float: left; color: var(--th-brand); margin: 5px 12px 0px 0px; font-size: 16px; }
.review-hero .hl-label{ display: block; font-size: 11.5px; color: var(--th-ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.review-hero .hl-value{ display: block; font-size: 14.5px; font-weight: 700; }
.review-hero .rh-buy{ border-top: 1px solid var(--th-line-soft); padding-top: 18px; }
.review-hero .rh-price b{ font-size: 28px; color: var(--th-cta-press); letter-spacing: -.02em; }
.review-hero .rh-price s{ font-size: 15px; color: var(--th-ink-faint); margin-left: 10px; }
.review-hero .rh-price-note{ display: block; font-size: 12.5px; color: var(--th-ink-faint); margin-top: 3px; }
.review-hero .rh-actions{ margin-top: 16px; }
.review-hero .rh-actions .btn-cta{ float: left; margin-right: 12px; }
.review-hero .rh-actions .cmp-toggle{ float: left; height: 48px; line-height: 46px; padding: 0px 18px; font-size: 14px; }

.fit-box{ margin: 24px 0px; }
.fit-col{
    width: calc((100% - 18px) / 2);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 20px 22px;
    background: var(--th-surface);
}
.fit-col h4{ font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 11px; }
.fit-col h4 i{ margin-right: 8px; }
.fit-col.fit-yes{ border-left: 4px solid var(--th-brand); }
.fit-col.fit-yes h4{ color: var(--th-brand); }
.fit-col.fit-no{ border-left: 4px solid var(--th-weak); }
.fit-col.fit-no h4{ color: var(--th-weak); }
.fit-col ul li{ font-size: 14.5px; color: var(--th-ink-soft); margin: 7px 0px; padding-left: 18px; position: relative; }
.fit-col ul li:before{ content: "\2022"; position: absolute; left: 3px; color: var(--th-ink-faint); }

.specs-table{ width: 100%; font-size: 15px; margin: 18px 0px; border: 1px solid var(--th-line); border-radius: var(--th-r-md); overflow: hidden; background: var(--th-surface); }
.specs-table th,
.specs-table td{ padding: 13px 18px; border-bottom: 1px solid var(--th-line-soft); text-align: left; }
.specs-table tr:last-child th,
.specs-table tr:last-child td{ border-bottom: 0px; }
.specs-table th{ color: var(--th-ink-soft); width: 42%; font-weight: 600; background: var(--th-surface-2); }
.specs-table td{ font-weight: 600; }

.verdict-box{
    background: var(--th-brand-soft);
    border: 1px solid var(--th-brand);
    border-radius: var(--th-r-md);
    padding: 24px;
    margin: 18px 0px;
}
.verdict-box .vb-ring{ float: left; margin-right: 20px; }
.verdict-box .vb-body{ overflow: hidden; font-size: 16px; }
.verdict-box .vb-body p{ margin: 0px 0px 10px; }
.verdict-box .vb-body p:last-child{ margin-bottom: 0px; }
.verdict-box .btn-cta{ margin-top: 18px; }

.alt-list{ margin: 18px 0px; }
.alt-item{
    display: block;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r);
    padding: 14px 18px;
    margin-bottom: 12px;
    transition: border-color .15s, transform .15s;
}
.alt-item:hover{ border-color: var(--th-brand); text-decoration: none; transform: translateX(3px); }
.alt-item .alt-img{
    float: left;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background: var(--th-brand-soft);
    border-radius: var(--th-r-sm);
    margin-right: 15px;
    overflow: hidden;
}
.alt-item .alt-img img{ width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
.alt-item .alt-body{ display: block; overflow: hidden; }
.alt-item .alt-body b{ display: block; font-size: 15.5px; color: var(--th-ink); line-height: 1.4; }
.alt-item .alt-price{ display: block; font-size: 13.5px; color: var(--th-cta-press); font-weight: 700; margin-top: 3px; }
.alt-item .alt-score{
    float: right;
    min-width: 42px;
    height: 32px;
    line-height: 32px;
    margin-left: 14px;
    text-align: center;
    border-radius: 8px;
    background: var(--th-surface-2);
    color: var(--tone, var(--th-brand));
    font-weight: 800;
    font-size: 15px;
}

/* Sticky buy card. */
.buy-card{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 20px;
    box-shadow: var(--th-sh-sm);
    text-align: center;
}
.buy-card .bc-img{ background: var(--th-brand-soft); border-radius: var(--th-r-sm); padding: 14px; margin-bottom: 14px; }
.buy-card .bc-img img{ width: 120px; height: 120px; object-fit: contain; }
.buy-card .bc-name{ font-weight: 700; font-size: 15px; line-height: 1.4; margin-bottom: 12px; }
.buy-card .bc-score{ display: inline-block; margin-bottom: 14px; text-align: left; }
.buy-card .bc-score-val{
    float: left;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: var(--th-r-sm);
    background: var(--th-brand-soft);
    color: var(--tone, var(--th-brand));
    font-weight: 800;
    font-size: 19px;
    margin-right: 11px;
}
.buy-card .bc-score-lb{ float: left; font-size: 12px; color: var(--th-ink-soft); line-height: 1.5; padding-top: 4px; }
.buy-card .bc-price{ padding: 14px 0px; border-top: 1px solid var(--th-line-soft); }
.buy-card .bc-price b{ font-size: 22px; color: var(--th-cta-press); }
.buy-card .bc-price s{ font-size: 13px; color: var(--th-ink-faint); margin-left: 8px; }
.buy-card .bc-note{ font-size: 11.5px; color: var(--th-ink-faint); margin-top: 12px; line-height: 1.5; }

/*
* COMPARE PAGE.
*/
.cmp-actions{ margin-bottom: 20px; }
.cmp-actions .btn-ghost{ margin: 0px 9px 9px 0px; }
.cmp-scroll{ background: var(--th-surface); }
table.versus-table{ width: 100%; min-width: 760px; font-size: 14.5px; }
table.versus-table th,
table.versus-table td{ padding: 16px 18px; border-bottom: 1px solid var(--th-line-soft); border-right: 1px solid var(--th-line-soft); text-align: left; vertical-align: top; }
table.versus-table th:last-child,
table.versus-table td:last-child{ border-right: 0px; }
table.versus-table tbody th{ width: 190px; font-weight: 600; color: var(--th-ink-soft); font-size: 13.5px; background: var(--th-surface-2); }
table.versus-table thead th{ background: var(--th-surface); text-align: center; position: relative; vertical-align: top; }
table.versus-table thead th.vt-head{ background: var(--th-surface-2); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--th-ink-faint); }
table.versus-table .vt-product{ display: block; }
table.versus-table .vt-img{ display: block; height: 110px; line-height: 110px; background: var(--th-brand-soft); border-radius: var(--th-r-sm); margin-bottom: 10px; }
table.versus-table .vt-img img{ max-width: 92px; max-height: 92px; object-fit: contain; vertical-align: middle; }
table.versus-table .vt-name{ display: block; font-size: 14.5px; font-weight: 700; color: var(--th-ink); line-height: 1.4; }
table.versus-table .vt-remove{
    position: absolute;
    right: 8px;
    top: 8px;
    width: 26px;
    height: 26px;
    line-height: 24px;
    text-align: center;
    border-radius: 100px;
    border: 1px solid var(--th-line);
    background: var(--th-surface);
    color: var(--th-ink-faint);
    font-size: 11px;
}
table.versus-table .vt-remove:hover{ border-color: var(--th-weak); color: var(--th-weak); }
table.versus-table tr.vt-group th{ background: var(--th-brand-soft); color: var(--th-brand-deep); font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; width: auto; }
table.versus-table .vt-num{ display: inline-block; font-weight: 800; font-size: 15px; margin-bottom: 6px; }
table.versus-table .bk-bar{ display: block; height: 6px; background: var(--th-surface-3); border-radius: 100px; overflow: hidden; }
table.versus-table .bk-bar i{ display: block; height: 100%; background: var(--th-brand); border-radius: 100px; }
table.versus-table .vt-price b{ font-size: 17px; color: var(--th-cta-press); }
table.versus-table .vt-list li{ font-size: 13.5px; margin: 5px 0px; padding-left: 16px; position: relative; color: var(--th-ink-soft); }
table.versus-table .vt-list li:before{ content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 100px; }
table.versus-table .vt-list.pro li:before{ background: var(--th-brand); }
table.versus-table .vt-list.con li:before{ background: var(--th-weak); }
.cmp-empty{ margin-bottom: 44px; }
.cmp-empty .center{ margin-top: -20px; }
.cmp-intro{ margin-top: 40px; max-width: 760px; }
.saved-actions{ margin-bottom: 20px; }

/*
* COMMENTS.
*/
.comments-area{ margin-top: 44px; padding-top: 10px; }
.comment-list{ margin: 18px 0px 34px; }
.comment-list li{ list-style: none; }
.comment-list .comment-body{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 20px 22px;
    margin-bottom: 16px;
    position: relative;
}
.comment-list .children{ margin-left: 42px; }
.comment-list .comment-author img{ float: left; width: 42px; height: 42px; border-radius: 100px; margin-right: 14px; }
.comment-list .comment-author .fn{ font-weight: 700; font-style: normal; font-size: 15px; }
.comment-list .comment-author .says{ display: none; }
.comment-list .comment-metadata{ font-size: 12.5px; color: var(--th-ink-faint); padding-left: 56px; margin-top: -4px; }
.comment-list .comment-content{ clear: both; padding-top: 12px; font-size: 15px; color: var(--th-ink-soft); }
.comment-list .comment-content p{ margin: 9px 0px; }
.comment-list .reply{ padding-top: 8px; font-size: 13px; font-weight: 600; }
.comment-respond{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 26px;
}
.comment-respond .comment-reply-title{ font-size: 20px; margin-bottom: 8px; }
.comment-respond .comment-notes{ font-size: 13px; color: var(--th-ink-faint); margin-bottom: 16px; }
.comment-respond label{ display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--th-ink-soft); }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-bg);
    font-size: 15px;
    margin-bottom: 14px;
}
.comment-respond input:focus,
.comment-respond textarea:focus{ outline: 0px; border-color: var(--th-brand); box-shadow: 0px 0px 0px 3px var(--th-brand-soft); }
.comment-respond .comment-form-cookies-consent{ font-size: 13px; color: var(--th-ink-soft); }
.comment-respond .comment-form-cookies-consent label{ display: inline; font-weight: 400; }
.comment-respond .comment-form-cookies-consent input{ width: auto; margin-right: 8px; }
.comment-respond .form-submit{ margin-top: 10px; }
.comment-respond .submit{
    background: var(--th-brand);
    color: #fff;
    border: 0px;
    padding: 13px 26px;
    border-radius: var(--th-r);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: auto;
}
.comment-respond .submit:hover{ background: var(--th-brand-deep); }
.no-comments{ color: var(--th-ink-faint); font-size: 14px; padding: 16px 0px; }

/*
* SIDEBAR + WIDGETS.
*/
.sidebar{ width: 300px; padding-top: 30px; }
.widget{
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    padding: 20px;
    margin-bottom: 20px;
}
.widget-title{ font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--th-ink-faint); margin-bottom: 14px; }
.widget ul li{ padding: 8px 0px; border-bottom: 1px solid var(--th-line-soft); font-size: 14.5px; }
.widget ul li:last-child{ border-bottom: 0px; }
.widget ul li a{ color: var(--th-ink-soft); }
.widget ul li a:hover{ color: var(--th-brand); text-decoration: none; }
.searchform{ position: relative; }
.searchform i{ position: absolute; left: 14px; top: 15px; color: var(--th-ink-faint); font-size: 13px; }
.searchform input[type="search"]{
    width: 100%;
    box-sizing: border-box;
    padding: 12px 80px 12px 36px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-bg);
    font-size: 14.5px;
}
.searchform .btn-brand{ position: absolute; right: 4px; top: 4px; padding: 8px 15px; font-size: 13.5px; }

/*
* FOOTER.
*/
.site-footer{
    border-top: 1px solid var(--th-line);
    margin-top: 40px;
    padding: 50px 0px 40px;
    background: var(--th-surface-2);
}
.foot-col-brand{ width: 30%; padding-right: 30px; }
.foot-logo{ float: none; height: auto; line-height: 1.4; display: inline-block; }
.foot-col-brand p{ color: var(--th-ink-soft); font-size: 14px; max-width: 36ch; padding-top: 14px; }
.foot-social{ margin-top: 16px; }
.foot-social a{
    display: inline-block;
    width: 38px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    border: 1px solid var(--th-line);
    border-radius: 100px;
    color: var(--th-ink-soft);
    margin-right: 8px;
    background: var(--th-surface);
}
.foot-social a:hover{ background: var(--th-brand); border-color: var(--th-brand); color: #fff; text-decoration: none; }
.foot-col{ width: 20%; padding-right: 20px; }
.foot-col-wide{ width: 30%; padding-right: 0px; }
.foot-col h4{ font-size: 13px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--th-ink-faint); }
.foot-menu li a,
.foot-col a{ display: block; color: var(--th-ink-soft); font-size: 14px; margin: 9px 0px; }
.foot-col a:hover{ color: var(--th-brand); text-decoration: none; }
.foot-note-sm{ font-size: 13px; color: var(--th-ink-faint); margin-bottom: 14px; }
.foot-col-wide input[type="email"],
.foot-col-wide input[type="text"]{
    width: 100%;
    box-sizing: border-box;
    padding: 0px 14px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-surface);
    font-size: 14.5px;
    margin-bottom: 10px;
}
.foot-col-wide .wpcf7-submit,
.foot-col-wide input[type="submit"]{
    width: 100%;
    height: 48px;
    line-height: 46px;
    padding: 0px 16px;
    border: 0px;
    border-radius: var(--th-r-sm);
    background: var(--th-brand);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.foot-col-wide input[type="email"],
.foot-col-wide input[type="text"]{ height: 48px; padding: 0px 14px; }
.foot-bottom{ border-top: 1px solid var(--th-line); margin-top: 36px; padding-top: 22px; }
.foot-note{ font-size: 13px; color: var(--th-ink-faint); line-height: 30px; }
.foot-legal ul li{ float: left; margin-left: 20px; }
.foot-legal ul li a{ font-size: 13px; color: var(--th-ink-faint); line-height: 30px; }
.foot-legal ul li a:hover{ color: var(--th-brand); text-decoration: none; }

/*
* COMPARE BAR, STICKY CTA, BACK TO TOP, TOAST, TOC FAB.
*/
.compare-bar{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 46;
    background: var(--th-surface);
    border-top: 1px solid var(--th-line);
    box-shadow: 0px -10px 30px rgba(0, 0, 0, .13);
    padding: 14px 0px;
    transform: translateY(110%);
    transition: transform .3s ease;
}
.compare-bar.open{ transform: translateY(0px); }
.compare-bar .cb-slots{ float: left; }
.compare-bar .cb-slot{
    float: left;
    position: relative;
    width: 58px;
    height: 58px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-sm);
    background: var(--th-surface-2);
    margin-right: 12px;
    padding: 5px;
    box-sizing: border-box;
}
.compare-bar .cb-slot img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.compare-bar .cb-slot.empty{ border-style: dashed; }
.compare-bar .cb-slot .cb-x{
    position: absolute;
    right: -6px;
    top: -6px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 100px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    color: var(--th-ink-faint);
    font-size: 10px;
}
.compare-bar .cb-slot .cb-x:hover{ border-color: var(--th-weak); color: var(--th-weak); }
.compare-bar .cb-actions{ float: right; padding-top: 7px; }
.compare-bar .cb-actions .btn-ghost,
.compare-bar .cb-actions .btn-brand{ height: 44px; line-height: 42px; }
.compare-bar .cb-actions .btn-ghost{ margin-right: 10px; }
.compare-bar .cb-count{
    display: inline-block;
    vertical-align: middle;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    margin-left: 8px;
    padding: 0px 6px;
}

.sticky-cta{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 45;
    background: var(--th-surface);
    border-top: 1px solid var(--th-line);
    padding: 11px 16px;
    display: none;
    box-shadow: 0px -8px 24px rgba(0, 0, 0, .12);
}
.sticky-cta .sc-txt{ font-size: 13px; line-height: 1.3; max-width: calc(100% - 120px); }
.sticky-cta .sc-tag{ display: block; font-weight: 700; color: var(--th-cta-press); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.sticky-cta .sc-name{
    display: block;
    color: var(--th-ink-soft);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sticky-cta .btn-cta{ margin-top: 3px; }

.back-to-top{
    position: fixed;
    right: 20px;
    bottom: 24px;
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border-radius: 100px;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    box-shadow: var(--th-sh);
    color: var(--th-ink);
    display: none;
    z-index: 44;
}
.back-to-top:hover{ color: var(--th-brand); border-color: var(--th-brand); }

.tool.has-count{ position: relative; }
.tool-count{
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    padding: 0px 5px;
    box-sizing: border-box;
    border-radius: 100px;
    background: var(--th-cta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.toast{
    position: fixed;
    left: 50%;
    bottom: 34px;
    z-index: 120;
    transform: translateX(-50%) translateY(20px);
    background: var(--th-ink);
    color: var(--th-bg);
    padding: 12px 22px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--th-sh-lg);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0px); }

.toc-sheet{
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 84px;
    z-index: 95;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--th-surface);
    border: 1px solid var(--th-line);
    border-radius: var(--th-r-md);
    box-shadow: var(--th-sh-lg);
    padding: 18px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s, transform .22s;
}
.toc-sheet.open{ opacity: 1; transform: translateY(0px); }
.toc-sheet .toc-sheet-list{ border-left: 2px solid var(--th-line); margin-top: 10px; }
.toc-sheet .toc-sheet-list li a{
    display: block;
    padding: 10px 0px 10px 15px;
    margin-left: -2px;
    color: var(--th-ink-soft);
    border-left: 2px solid transparent;
    font-size: 14.5px;
    line-height: 1.45;
}
.toc-sheet .toc-sheet-list li a:hover{ color: var(--th-ink); text-decoration: none; }
.toc-sheet .toc-sheet-list li a.active{ color: var(--th-brand-deep); border-left-color: var(--th-brand); font-weight: 700; }

.toc-fab{
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 96;
    height: 46px;
    line-height: 44px;
    padding: 0px 18px;
    border-radius: 100px;
    background: var(--th-brand);
    color: #fff;
    border: 0px;
    box-shadow: var(--th-sh);
    font-size: 13.5px;
    font-weight: 700;
    display: none;
}
.toc-fab i{ margin-right: 8px; }
.toc-fab.mobile-toc-open{ background: var(--th-ink); }

/*
* 404.
*/
.error-404{ padding: 40px 0px 60px; }
.error-404 .e404-num{
    font-size: 110px;
    font-weight: 800;
    line-height: 1;
    color: var(--th-brand);
    opacity: .18;
    letter-spacing: -.04em;
}
.error-404 h1{ font-size: 34px; margin-top: -20px; }
.error-404 p{ color: var(--th-ink-soft); max-width: 48ch; margin: 14px auto 0px; }
.error-404 .page-search{ margin: 24px auto; }
.error-404 .e404-links a{ margin: 0px 8px; }

}

/*
* PRINT.
*/
@media print{
    .site-header, .top-bar, .mobile-drawer, .drawer-overlay, .compare-bar, .sticky-cta,
    .back-to-top, .toc-fab, .toc-side, .buy-side, .share-bar, .helpful-box, .block-recent,
    .site-footer, .reading-progress, .archive-toolbar, .loop-more, .comments-area{ display: none !important; }
    body{ background: #fff; color: #000; font-size: 12pt; }
    .container{ width: 100%; }
    .article-main{ width: 100%; max-width: 100%; float: none; }
    .product-block, .card, .faq-list{ break-inside: avoid; border: 1px solid #ccc; }
    .faq-list .faq-a{ display: block !important; }
    a[href]:after{ content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/*
* REDUCED MOTION.
*/
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *, *:before, *:after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}