/* tinh-nang.css — Tính năng (comp: canvas boards "13 · Tính năng bản 2") */

/* hero */
.tn-hero__in{ display:grid; grid-template-columns:minmax(0, 560px) minmax(0, 1fr); gap:64px; align-items:start; }
.tn-hero__copy{ display:flex; flex-direction:column; gap:20px; }
.tn-hero__frame{ margin-top:40px; flex:none; }
.tn-hero__frame .ffr__win{ height:440px; }
.tn-hero__frame .ffr__pop{ width:340px; }
.tn-idx{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tn-idx a{ display:flex; align-items:center; gap:14px; padding:12px 16px; min-height:60px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-control); color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.tn-idx a:hover{ border-color:var(--indigo); }
.tn-idx a:hover .ico{ background:var(--indigo); color:var(--white); }
.tn-idx .ico{ width:36px; height:36px; transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.tn-idx .ico svg{ width:18px; height:18px; }
.tn-idx__t{ display:flex; flex-direction:column; }
.tn-idx__t b{ font-size:16px; font-weight:600; line-height:1.35; }
.tn-idx__t .mono{ font-size:12px; color:var(--text-muted); }
.tn-idx__ar{ margin-left:auto; color:var(--text-muted); }
@media (max-width:1023px){
  .tn-hero__in{ grid-template-columns:1fr; gap:24px; }
  .tn-hero__frame{ display:none; }
  .tn-idx .mono{ display:none; }
  .tn-idx a{ min-height:52px; padding:9px 14px; }
}

/* tool sections */
.tool{ scroll-margin-top:72px; }
.tool .head-row .lead{ max-width:720px; }

/* specs */
.spec{ list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.spec li{ padding:30px 28px; display:flex; gap:16px; align-items:flex-start; border-left:1px solid var(--line); border-top:1px solid var(--line); margin:-1px 0 0 -1px; }
.spec b{ display:block; font-size:18px; font-weight:600; }
.spec p{ font-size:15.5px; line-height:1.55; color:var(--text-dim); margin-top:6px; }

@media (max-width:767px){
  .spec{ grid-template-columns:1fr 1fr; margin-top:28px; }
  .spec li{ padding:16px 14px; flex-direction:column; gap:8px; }
  .spec p{ display:none; }
  .spec b{ font-size:15px; }
  .spec .ico{ background:none; width:auto; height:auto; justify-content:flex-start; }
}
.tn-hero{ padding-bottom:clamp(40px, 5vw, 64px); }

/* tool windows hold HTML UI (ui.css) */
.bwin__body--ui{ height:auto; padding:16px; }
.bwin__pin{ position:static; margin-left:auto; padding:4px 10px 4px 6px; font-size:12.5px; box-shadow:none; }
.bwin__pin::before{ width:9px; height:9px; }
@media (max-width:767px){ .bwin__body--ui{ padding:10px; max-height:420px; } .bwin__bar span:not(.pin){ display:none; } .bwin__pin{ margin-left:8px; } }
.bwin__body--app{ height:auto; padding:0; }
.bwin__body--app .app{ border-radius:0; min-height:430px; }
.tn-hero__frame .ffr__win--app{ height:440px; }
@media (max-width:767px){ .bwin__body--app .app{ min-height:0; max-height:460px; } }
@media (max-width:767px){ .bwin__body--app .app{ max-height:380px; } }
/* mobile: the 3 points under each tool become compact title rows (descriptions stay on desktop) */
@media (max-width:767px){
  .tool .sub3{ gap:0; margin-top:20px; border-top:1px solid var(--line); }
  .tool .sub3 li{ grid-template-columns:32px 1fr; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
  .tool .sub3 .ico{ width:32px; height:32px; grid-row:auto; }
  .tool .sub3 p{ display:none; }
  .tool .sub3 b{ font-size:15px; }
}
@media (max-width:767px){ .bwin__body--app .app{ max-height:320px; } .tool .head-row{ margin-bottom:18px; } }
@media (max-width:767px){ .tn-hero .tn-idx{ gap:8px; } .tn-hero__copy{ gap:14px; } }
@media (max-width:767px){ .tool .sub3 li{ padding:8px 0; } }