/* The pages of the features of the packages (drawing tuetransoftware-web-v2, sheet 14, features.css): the list of the packages (filter by industry,
   twelve to a page) and one package: its contents on the left, the screen of the administration of each feature on the right, opened large in a
   dialog. The filter and the pages are links, so they work without script. The colours are the tokens of v2-theme.css. */

.page[data-nav="features"], .page[data-nav="feature"] { --wall: var(--room-4); }   /* graphite: the Quản trị screens live in the software room */

/* ---------- the list ---------- */
.flist { padding-bottom: 48px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fc { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border-radius: 6px; background: var(--bg-2); }
.fc-n { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; line-height: 1.35; }
.fc-l { font-size: calc(var(--fs-b) * 15 / 16); color: var(--fg-2); }
.fc-g { margin-top: 4px; font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.fc-h { margin-top: -8px; border-top: 1px solid var(--line); }
.fc-h li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: calc(var(--fs-b) * 15 / 16); }
.fc-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 12px; }
.fc-u { font-size: calc(var(--fs-b) * 14 / 16); color: var(--fg-2); }
@media (max-width: 699px) {
  .fgrid { grid-template-columns: 1fr; gap: 16px; }
  .fc { padding: 20px 16px 24px; }
}

/* ---------- one package: head ---------- */
.fh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; padding-top: 24px; padding-bottom: 48px; background: var(--wall); }
.fh-c { grid-column: 1 / 9; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.fh-c .crumbs { margin-bottom: 0; }
.fh-c .lead { margin-top: 0; }
.fh-p { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--fg-2); }
.fh-p .price strong { font-size: calc(var(--fs-h3) * 28 / 26); }
.fh-p .btn { white-space: normal; text-align: left; }
.fh-no { font-size: calc(var(--fs-b) * 15 / 16); color: var(--fg-2); }
@media (max-width: 1099px) {
  .fh-c, .fh-p { grid-column: 1 / 13; }
  .fh-p { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 32px; }
}
@media (max-width: 699px) {
  .fh { padding-bottom: 32px; }
  .fh-p { flex-direction: column; align-items: stretch; margin-top: 24px; padding: 20px 16px; }
}

/* ---------- one package: contents and groups ---------- */
.fb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; padding: 48px var(--gut) 0; }
.fgs { grid-column: 4 / 13; min-width: 0; }
.fg { scroll-margin-top: 8px; }
.fg + .fg { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.fg-t { margin-bottom: 24px; font-size: var(--fs-h3); font-weight: 300; font-stretch: 116%; line-height: 1.2; letter-spacing: -.01em; }
.fi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; scroll-margin-top: 8px; }
.fi + .fi { margin-top: 40px; }
.fi-solo { grid-template-columns: minmax(0, 1fr); }
.fi-t { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fi-h { font-size: calc(var(--fs-b) * 17 / 16); font-weight: 600; font-stretch: 112%; line-height: 1.35; }
.fi-t p { font-size: var(--fs-b); color: var(--fg-2); }
.fi-fs { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.fi-f { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fi-a { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: 0 24px 48px var(--shadow-soft), 0 0 0 1px var(--edge); cursor: zoom-in; }
/* the whole picture, never a crop of it (owner 02/11/2026: a screen with its words cut at the sides is hard to bear); its height follows its own proportion */
.fi-a img { display: block; width: 100%; height: auto; }
.fi-z { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); color: var(--fg); box-shadow: 0 0 0 1px var(--line); }
.fi-f figcaption { font-size: calc(var(--fs-b) * 13 / 16); color: var(--fg-2); }
.fcta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 48px; padding-block: 48px; background: var(--wall); }
.fcta .ask-t { font-size: calc(var(--fs-h3) * 22 / 26); font-weight: 300; font-stretch: 116%; line-height: 1.25; letter-spacing: -.01em; min-width: 0; }
@media (max-width: 1099px) {
  .fb { display: block; padding-top: 32px; }
  .fi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .fb { padding-top: 24px; }
  .fg + .fg { margin-top: 40px; padding-top: 32px; }
  .fg-t { font-size: calc(var(--fs-h3) * 22 / 26); margin-bottom: 20px; }
  .fi, .fi-solo { grid-template-columns: minmax(0, 1fr); }
  .fi + .fi { margin-top: 32px; }
  .fi-t p { font-size: calc(var(--fs-b) * 15 / 16); }
  .fcta { flex-direction: column; align-items: stretch; margin-top: 40px; padding-block: 32px; }
  .fcta .actions { flex-direction: column; align-items: stretch; }
  .fcta .btn { white-space: normal; }
}