/*
 * NẮNG CÓI - DEFAULT THEME
 * Chỉ quản lý font, màu sắc, gradient và shadow.
 * Theme mới phải giữ nguyên tên biến và chỉ thay giá trị.
 */
 /* Bộ them 01: Chính, màu nâu cói làm chủ đạo
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --paper: #fbf8f3;
  --surface: #fffdf9;
  --surface-soft: #fffdfa;
  --surface-pure: #fff;
  --surface-warm: #fffaf2;
  --surface-muted: #fbf7f2;
  --surface-detail: #faf7f2;
  --surface-deep: #faf7f1;
  --surface-accent: #f5ede2;
  --surface-border: #eee4d7;
  --surface-straw: #eadbc8;
  --surface-straw-alt: #eadbc7;

  --ink: #38271c;
  --ink-soft: #3f3027;
  --ink-strong: #222;
  --muted: #6d5a4d;

  --gold: #b57b31;
  --gold-light: #c7a46f;
  --gold-bright: #c58b35;
  --gold-soft: #bd8339;
  --gold-muted: #aa783e;
  --gold-dark: #8b5720;
  --brand-accent: #a96828;
  --brand-accent-strong: #b06c20;
  --brand-accent-soft: #ad6d24;
  --brand-detail: #976125;
  --brand-contact: #986328;
  --brand-brown: #8d5a2a;
  --brand-brown-dark: #633d1f;
  --brand-brown-deep: #6f4624;

  --line: #dfd1bf;
  --line-soft: #dfcdb7;
  --line-warm: #d9c5aa;
  --line-faint: #eee6dc;
  --line-neutral: #eee;
  --line-detail: #c9ad89;

  --overlay-light-88: rgba(255, 255, 255, .88);
  --overlay-light-92: rgba(255, 255, 255, .92);
  --overlay-header: rgba(255, 253, 249, .97);
  --overlay-header-strong: rgba(255, 253, 249, .98);
  --overlay-dark: rgba(28, 18, 10, .55);

  --gradient-action: linear-gradient(90deg, #95602a, #82501e, #95602a);
  --gradient-action-alt: linear-gradient(90deg, #9a6229, #82501e, #9a6229);
  --gradient-action-dark: linear-gradient(90deg, #8d551a, #a46524, #8d551a);
  --gradient-contact: linear-gradient(90deg, #fbf7f1 0%, #fff 63%, #efe4d4 100%);
  --gradient-hero-soft: linear-gradient(90deg, rgba(255, 250, 242, .65), transparent 58%);
  --gradient-inner-header: linear-gradient(90deg,
    rgba(255, 253, 249, .99) 0%,
    rgba(255, 253, 249, .94) 35%,
    rgba(255, 253, 249, .5) 54%,
    rgba(255, 253, 249, 0) 75%);
  --gradient-contact-header: linear-gradient(90deg,
    rgba(255, 253, 249, .99) 0%,
    rgba(255, 253, 249, .94) 33%,
    rgba(255, 253, 249, .55) 51%,
    rgba(255, 253, 249, 0) 72%);
  --gradient-about: linear-gradient(
    90deg,
    rgba(255, 252, 247, .76) 0%,
    rgba(255, 252, 247, .58) 25%,
    rgba(255, 252, 247, .12) 49%,
    rgba(255, 252, 247, 0) 66%);

  --shadow: 0 8px 24px rgba(79, 48, 20, .10);
  --shadow-card: 0 3px 11px rgba(73, 45, 21, .06);
  --shadow-soft: 0 3px 12px rgba(67, 45, 22, .05);
  --shadow-action: 0 7px 18px rgba(102, 60, 20, .14);
  --shadow-action-dark: 0 7px 18px rgba(117, 68, 21, .16);
  --shadow-floating: 0 8px 26px rgba(92, 58, 25, .25);
  --shadow-modal: 0 22px 60px rgba(0, 0, 0, .25);
  --shadow-product: 0 2px 9px rgba(70, 45, 20, .06);
  --text-shadow-light: 0 1px 1px rgba(255, 255, 255, .45);
  --text-shadow-dark: 0 1px 4px rgba(0, 0, 0, .25);
}
*/
/*
 * NẮNG CÓI - BLUE OCEAN THEME
 * Chủ đạo: xanh dương, nền sáng và dịu.
 */
 /*
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --paper: #f5fafc;
  --surface: #fbfdfe;
  --surface-soft: #f7fbfd;
  --surface-pure: #fff;
  --surface-warm: #f4f9fb;
  --surface-muted: #f0f7fa;
  --surface-detail: #edf5f8;
  --surface-deep: #e8f2f6;
  --surface-accent: #e3f0f5;
  --surface-border: #d6e5eb;
  --surface-straw: #d5e8ef;
  --surface-straw-alt: #cce2eb;

  --ink: #20343f;
  --ink-soft: #314a56;
  --ink-strong: #172830;
  --muted: #607681;
  --gold: #2878a8;
  --gold-light: #73afd0;
  --gold-bright: #338bb9;
  --gold-soft: #4d9bc5;
  --gold-muted: #527f97;
  --gold-dark: #15577e;

  --brand-accent: #2878a8;
  --brand-accent-strong: #17658f;
  --brand-accent-soft: #3b8db7;
  --brand-detail: #376f8c;
  --brand-contact: #2f789c;
  --brand-brown: #246d93;
  --brand-brown-dark: #174c68;
  --brand-brown-deep: #1b5977;

  --line: #cfdee5;
  --line-soft: #d8e6eb;
  --line-warm: #c6dce5;
  --line-faint: #e5eef2;
  --line-neutral: #e7ecef;
  --line-detail: #a9c8d6;

  --overlay-light-88: rgba(255, 255, 255, .88);
  --overlay-light-92: rgba(255, 255, 255, .92);
  --overlay-header: rgba(251, 253, 254, .97);
  --overlay-header-strong: rgba(251, 253, 254, .98);
  --overlay-dark: rgba(10, 38, 52, .55);

  --gradient-action:
    linear-gradient(90deg, #2878a8, #15577e, #2878a8);

  --gradient-action-alt:
    linear-gradient(90deg, #338bb9, #17658f, #338bb9);

  --gradient-action-dark:
    linear-gradient(90deg, #15577e, #2878a8, #15577e);

  --gradient-contact:
    linear-gradient(90deg, #eef7fa 0%, #fff 63%, #dcecf2 100%);

  --gradient-hero-soft:
    linear-gradient(90deg, rgba(238, 247, 250, .68), transparent 58%);

  --shadow: 0 8px 24px rgba(20, 76, 104, .10);
  --shadow-card: 0 3px 11px rgba(20, 76, 104, .07);
  --shadow-soft: 0 3px 12px rgba(20, 76, 104, .06);
  --shadow-action: 0 7px 18px rgba(21, 87, 126, .18);
  --shadow-action-dark: 0 7px 18px rgba(21, 87, 126, .22);
  --shadow-floating: 0 8px 26px rgba(20, 76, 104, .25);
  --shadow-modal: 0 22px 60px rgba(0, 0, 0, .25);
  --shadow-product: 0 2px 9px rgba(20, 76, 104, .07);
}
*/


/*
 * NẮNG CÓI - ĐẤT NẮNG THEME
 * Chủ đạo: đỏ đất / cam terracotta, nền kem ấm.
 * Chỉ quản lý font, màu sắc, gradient và shadow.
 * Theme mới phải giữ nguyên tên biến và chỉ thay giá trị.
 */
 /*
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --paper: #fbf5ef;
  --surface: #fffaf6;
  --surface-soft: #fff8f3;
  --surface-pure: #fff;
  --surface-warm: #fff4eb;
  --surface-muted: #f9f0e9;
  --surface-detail: #f8eee7;
  --surface-deep: #f5e9e0;
  --surface-accent: #f2ded0;
  --surface-border: #ead5c7;
  --surface-straw: #e9c9b5;
  --surface-straw-alt: #e4bfaa;

  --ink: #442820;
  --ink-soft: #57372d;
  --ink-strong: #2f1c17;
  --muted: #76584d;

  --gold: #c56845;
  --gold-light: #dfa184;
  --gold-bright: #d87851;
  --gold-soft: #cc7b5b;
  --gold-muted: #b66e53;
  --gold-dark: #93462f;
  --brand-accent: #c45f3c;
  --brand-accent-strong: #a9472d;
  --brand-accent-soft: #ce704e;
  --brand-detail: #aa573e;
  --brand-contact: #b45d40;
  --brand-brown: #a65339;
  --brand-brown-dark: #743526;
  --brand-brown-deep: #813d2b;

  --line: #dfc6b8;
  --line-soft: #e2cabc;
  --line-warm: #d9b6a4;
  --line-faint: #eee0d8;
  --line-neutral: #eee6e1;
  --line-detail: #c99379;

  --overlay-light-88: rgba(255, 255, 255, .88);
  --overlay-light-92: rgba(255, 255, 255, .92);
  --overlay-header: rgba(255, 250, 246, .97);
  --overlay-header-strong: rgba(255, 250, 246, .98);
  --overlay-dark: rgba(52, 23, 16, .57);

  --gradient-action: linear-gradient(90deg, #c45f3c, #9d422c, #c45f3c);
  --gradient-action-alt: linear-gradient(90deg, #d16d49, #a9472d, #d16d49);
  --gradient-action-dark: linear-gradient(90deg, #93462f, #bd5939, #93462f);
  --gradient-contact: linear-gradient(90deg, #fbf1ea 0%, #fff 63%, #efd8ca 100%);
  --gradient-hero-soft: linear-gradient(90deg, rgba(255, 244, 235, .68), transparent 58%);
  --gradient-inner-header: linear-gradient(90deg,
    rgba(255, 250, 246, .99) 0%,
    rgba(255, 250, 246, .94) 35%,
    rgba(255, 250, 246, .5) 54%,
    rgba(255, 250, 246, 0) 75%);
  --gradient-contact-header: linear-gradient(90deg,
    rgba(255, 250, 246, .99) 0%,
    rgba(255, 250, 246, .94) 33%,
    rgba(255, 250, 246, .55) 51%,
    rgba(255, 250, 246, 0) 72%);
  --gradient-about: linear-gradient(
    90deg,
    rgba(255, 248, 242, .78) 0%,
    rgba(255, 248, 242, .6) 25%,
    rgba(255, 248, 242, .13) 49%,
    rgba(255, 248, 242, 0) 66%);

  --shadow: 0 8px 24px rgba(116, 53, 38, .11);
  --shadow-card: 0 3px 11px rgba(116, 53, 38, .07);
  --shadow-soft: 0 3px 12px rgba(116, 53, 38, .06);
  --shadow-action: 0 7px 18px rgba(147, 70, 47, .18);
  --shadow-action-dark: 0 7px 18px rgba(116, 53, 38, .22);
  --shadow-floating: 0 8px 26px rgba(116, 53, 38, .26);
  --shadow-modal: 0 22px 60px rgba(0, 0, 0, .25);
  --shadow-product: 0 2px 9px rgba(116, 53, 38, .07);
  --text-shadow-light: 0 1px 1px rgba(255, 255, 255, .45);
  --text-shadow-dark: 0 1px 4px rgba(0, 0, 0, .25);
}
*/

/*
 * NẮNG CÓI - CAM NẮNG THEME
 * Chủ đạo: cam trẻ trung rgb(232, 119, 34) / #E87722.
 * Chỉ quản lý font, màu sắc, gradient và shadow.
 * Giữ nguyên tên biến để tương thích với CSS hiện tại.
 */
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --paper: #fff9f4;
  --surface: #fffdfb;
  --surface-soft: #fffaf6;
  --surface-pure: #fff;
  --surface-warm: #fff5eb;
  --surface-muted: #fff8f2;
  --surface-detail: #fff6ee;
  --surface-deep: #fff1e5;
  --surface-accent: #ffe8d5;
  --surface-border: #f4dcc9;
  --surface-straw: #f5d3b7;
  --surface-straw-alt: #f2c7a5;

  --ink: #382b24;
  --ink-soft: #4c3a31;
  --ink-strong: #241b17;
  --muted: #756157;

  /*
   * Nhóm biến giữ tên cũ để tương thích.
   * Trong theme này, chúng mang sắc cam.
   */
  --gold: #e87722;
  --gold-light: #f4a261;
  --gold-bright: #f28a32;
  --gold-soft: #eb914f;
  --gold-muted: #c9793f;
  --gold-dark: #b84d0b;

  --brand-accent: #e87722;
  --brand-accent-strong: #cf5d0c;
  --brand-accent-soft: #ef893d;
  --brand-detail: #bd6428;
  --brand-contact: #d66b1b;
  --brand-brown: #c45b17;
  --brand-brown-dark: #8f3f0c;
  --brand-brown-deep: #71340f;

  --line: #ead1bd;
  --line-soft: #efd9c8;
  --line-warm: #e7c3a6;
  --line-faint: #f3e6dc;
  --line-neutral: #eee9e5;
  --line-detail: #d9a77f;

  --overlay-light-88: rgba(255, 255, 255, .88);
  --overlay-light-92: rgba(255, 255, 255, .92);
  --overlay-header: rgba(255, 253, 251, .97);
  --overlay-header-strong: rgba(255, 253, 251, .98);
  --overlay-dark: rgba(45, 24, 12, .55);

  --gradient-action:
    linear-gradient(90deg, #e87722, #cf5d0c, #e87722);

  --gradient-action-alt:
    linear-gradient(90deg, #f28a32, #d96313, #f28a32);

  --gradient-action-dark:
    linear-gradient(90deg, #b84d0b, #e87722, #b84d0b);

  --gradient-contact:
    linear-gradient(90deg, #fff6ee 0%, #fff 63%, #ffe5d0 100%);

  --gradient-hero-soft:
    linear-gradient(90deg, rgba(255, 243, 232, .68), transparent 58%);

  --gradient-inner-header: linear-gradient(90deg,
    rgba(255, 253, 251, .99) 0%,
    rgba(255, 253, 251, .94) 35%,
    rgba(255, 247, 240, .52) 54%,
    rgba(255, 247, 240, 0) 75%);

  --gradient-contact-header: linear-gradient(90deg,
    rgba(255, 253, 251, .99) 0%,
    rgba(255, 253, 251, .94) 33%,
    rgba(255, 244, 235, .58) 51%,
    rgba(255, 244, 235, 0) 72%);

  --gradient-about: linear-gradient(
    90deg,
    rgba(255, 249, 244, .78) 0%,
    rgba(255, 246, 238, .60) 25%,
    rgba(255, 239, 225, .14) 49%,
    rgba(255, 239, 225, 0) 66%);

  --shadow: 0 8px 24px rgba(151, 70, 13, .10);
  --shadow-card: 0 3px 11px rgba(139, 66, 18, .07);
  --shadow-soft: 0 3px 12px rgba(128, 61, 17, .06);
  --shadow-action: 0 7px 18px rgba(207, 93, 12, .20);
  --shadow-action-dark: 0 7px 18px rgba(184, 77, 11, .24);
  --shadow-floating: 0 8px 26px rgba(151, 70, 13, .25);
  --shadow-modal: 0 22px 60px rgba(0, 0, 0, .25);
  --shadow-product: 0 2px 9px rgba(128, 61, 17, .07);
  --text-shadow-light: 0 1px 1px rgba(255, 255, 255, .48);
  --text-shadow-dark: 0 1px 4px rgba(50, 23, 8, .25);
}

.theme-surface {
  background-color: var(--surface);
  color: var(--ink);
}

.theme-surface-soft {
  background-color: var(--surface-soft);
  color: var(--ink);
}

.theme-surface-pure {
  background-color: var(--surface-pure);
  color: var(--ink);
}

.theme-surface-accent {
  background-color: var(--surface-accent);
  color: var(--ink);
}

.theme-ink {
  color: var(--ink);
}

.theme-ink-soft {
  color: var(--ink-soft);
}

.theme-muted {
  color: var(--muted);
}

.theme-gold {
  color: var(--gold);
}

.theme-gold-dark {
  color: var(--gold-dark);
}

.theme-border {
  border: 1px solid var(--line);
}

.theme-border-soft {
  border: 1px solid var(--line-soft);
}

.theme-card {
  background-color: var(--surface-pure);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.theme-card-soft {
  background-color: var(--surface-soft);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
}

.theme-button-primary {
  background: var(--gradient-action);
  color: var(--surface-pure);
  box-shadow: var(--shadow-action);
}

.theme-button-secondary {
  background: var(--surface-pure);
  color: var(--brand-brown);
  border: 1px solid var(--line);
}

.theme-heading {
  font-family: var(--font-heading);
  color: var(--ink);
}

.theme-body {
  font-family: var(--font-body);
  color: var(--ink);
}