/* Shared, compact Reader notes for normal posts and Rong Ruổi trips. */
.comments-area{
  --comments-accent:var(--accent,var(--coral,#df664a));
  padding:clamp(38px,4.5vw,54px) 0 clamp(42px,5vw,60px);
  border-top:1px solid var(--line,#e2e2dc);
  background:#faf9f5;
}
.comments-shell{
  width:min(1040px,calc(100% - 44px));
  margin:auto;
  display:grid;
  grid-template-columns:minmax(190px,260px) minmax(0,1fr);
  gap:clamp(28px,4vw,52px);
  align-items:start;
}
.comments-intro{padding-top:4px}
.comments-intro .eyebrow{margin:0 0 7px;color:var(--comments-accent);font-size:.55rem;font-weight:820;letter-spacing:.12em;text-transform:uppercase}
.comments-intro h2{max-width:280px;margin:0;font-size:clamp(1.45rem,2.15vw,2.05rem);line-height:1.06;letter-spacing:-.042em}
.comments-intro>p:last-child{max-width:270px;margin:11px 0 0;color:#686c67;font-size:.76rem;line-height:1.55}
.comments-content{padding:clamp(16px,1.8vw,22px);border:1px solid #dde1dc;background:#fff;box-shadow:7px 8px 0 rgba(45,62,52,.045)}

.comment-list,.comment-list .children{list-style:none;margin:0;padding:0}
.comment-list>li{padding:18px 0;border-bottom:1px solid var(--line,#e2e2dc)}
.comment-list>li:first-child{padding-top:0}
.comment-list .children{margin:13px 0 0 42px;padding-left:14px;border-left:1px solid color-mix(in srgb,var(--comments-accent) 25%,var(--line,#e2e2dc))}
.comment-list .children>li{padding:14px 0 0}
.comment-list .children>li+li{margin-top:14px;border-top:1px solid var(--line,#e2e2dc)}
.comment-body{position:relative}
.comment-author{display:flex;align-items:center;gap:9px;font-size:.74rem;line-height:1.25}
.comment-author .avatar{width:34px!important;height:34px!important;max-width:34px!important;object-fit:cover;border-radius:50%}
.comment-author .fn{font-style:normal;font-weight:760}
.comment-author .says{color:#999;font-size:.62rem}
.comment-metadata{margin:-7px 0 8px 43px;color:#999;font-size:.53rem;letter-spacing:.065em;text-transform:uppercase}
.comment-metadata a{text-decoration:none}
.comment-content{margin-left:43px;color:#42423e;font-size:.86rem;line-height:1.58}
.comment-content p{margin:0 0 .55em}
.comment-content p:last-child{margin-bottom:0}
.comment-awaiting-moderation{display:block;margin:5px 0 0 43px;color:#8b6d25;font-size:.65rem}
.reply{margin:6px 0 0 43px;line-height:1}
.reply a,.comment-edit-link{color:var(--comments-accent);font-size:.55rem;font-weight:780;letter-spacing:.075em;text-decoration:none;text-transform:uppercase}
.comment-navigation{display:flex;justify-content:space-between;gap:18px;padding:14px 0 0}
.comment-navigation a{font-size:.61rem;font-weight:700;text-decoration:none}

.comments-content .comment-respond{margin:0;padding:0;border-top:0}
.comments-content .comment-list~.comment-respond{margin-top:20px;padding-top:20px;border-top:1px solid var(--line,#e2e2dc)}
.comment-reply-title{margin:0;font-size:clamp(1.12rem,1.55vw,1.42rem);line-height:1.15;letter-spacing:-.025em}
.comment-reply-title small{margin-left:9px;font-size:.56rem}
.comment-guidance,.logged-in-as,.must-log-in{margin:4px 0 10px;color:#7d7c75;font-size:.64rem}
.logged-in-as a,.must-log-in a{text-underline-offset:3px}
.comment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.comment-form>p{margin:0}
.comment-form-comment,.comment-form-url,.comment-form-cookies-consent,.form-submit,.comment-guidance,.logged-in-as,.must-log-in{grid-column:1/-1}
.comment-form label{display:block;margin-bottom:3px;color:#5d5d58;font-size:.57rem;font-weight:760;letter-spacing:.07em;text-transform:uppercase}
.comment-form label small{color:#888;font-size:.5rem;font-weight:550;letter-spacing:0;text-transform:none}
.comment-form input:not([type=checkbox]):not([type=submit]),.comment-form textarea{width:100%;padding:7px 6px;border:0;border-bottom:1px solid #b9b8b1;border-radius:0;background:#fff;font:inherit}
.comment-form textarea{height:84px;min-height:84px;resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid color-mix(in srgb,var(--comments-accent) 26%,transparent);outline-offset:2px}
.comment-form-cookies-consent{display:flex;align-items:flex-start;gap:7px;margin-top:1px!important}
.comment-form-cookies-consent input{margin-top:3px;accent-color:var(--comments-accent)}
.comment-form-cookies-consent label{margin:0;color:#696963;font-weight:500;letter-spacing:0;text-transform:none}
.comment-submit{padding:9px 17px;border:0;background:var(--ink,#171717);color:#fff;font:inherit;font-size:.58rem;font-weight:800;letter-spacing:.085em;text-transform:uppercase;cursor:pointer}
.comment-submit:hover{background:var(--comments-accent)}
.comments-closed{margin:0;color:#777;font-size:.74rem}

@media(max-width:760px){
  .comments-shell{grid-template-columns:1fr;gap:18px}
  .comments-intro h2{max-width:none}
  .comments-intro>p:last-child{max-width:420px;margin-top:8px}
}
@media(max-width:560px){
  .comments-area{padding:32px 0 40px}
  .comments-shell{width:calc(100% - 28px);gap:15px}
  .comments-intro h2{font-size:1.55rem}
  .comments-content{padding:15px 14px;box-shadow:5px 6px 0 rgba(45,62,52,.04)}
  .comment-list>li{padding:15px 0}
  .comment-list .children{margin-left:18px;padding-left:11px}
  .comment-content,.reply,.comment-awaiting-moderation{margin-left:0}
  .comment-content{margin-top:7px}
  .comment-form{grid-template-columns:1fr}
  .comment-form>p{grid-column:1}
  .comment-form textarea{height:90px;min-height:84px}
}