#cc-main {
  --cc-base-font-size: 16px;
  --cc-font-family: Prompt, "Noto Sans Thai", Arial, sans-serif;
  --cc-btn-primary-bg: #00758f;
  --cc-btn-primary-hover-bg: #005f75;
  --cc-btn-secondary-bg: #eef8fa;
  --cc-btn-secondary-hover-bg: #dff2f5;
  --cc-modal-border-radius: 24px;
  --cc-btn-border-radius: 14px;
  color: #17343d;
}

#cc-main .cm {
  width: min(960px, calc(100vw - 40px));
  max-width: none;
  overflow: hidden;
  border: 1px solid rgba(0, 137, 168, .18);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 28px 80px rgba(13, 55, 65, .24), 0 2px 8px rgba(13, 55, 65, .08);
  backdrop-filter: blur(18px);
}

#cc-main .cm__body { padding: 30px 34px 20px; }
#cc-main .cm__texts { min-width: 0; }
#cc-main .cm__title {
  display: grid;
  margin-bottom: 12px;
  align-items: center;
  color: #12343d;
  font-size: 1.3rem;
  font-weight: 700;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 14px;
  line-height: 1.35;
}
#cc-main .cm__title:before {
  display: block;
  width: 44px;
  height: 57px;
  background: url('../images/tgo-logo-approved.svg') center / contain no-repeat;
  content: '';
}
#cc-main .cm__title .cc__logo {
  display: none !important;
}
#cc-main .cm__desc { max-width: 680px; color: #536b72; font-size: .92rem; line-height: 1.7; }
#cc-main .cm__btns {
  display: grid;
  padding: 0 34px 30px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 12px;
}
#cc-main .cm__btn { min-height: 48px; padding: 10px 18px; border-width: 1px; font-size: .9rem; font-weight: 600; transition: transform .18s ease,box-shadow .18s ease,background-color .18s ease; }
#cc-main .cm__btn-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
#cc-main .cm__btn-group + .cm__btn-group { grid-template-columns: 1fr; }
#cc-main .cm__btn-group .cm__btn { width: 100%; margin: 0; }
#cc-main .cm__btn[data-role="all"] {
  border-color: #27aab9;
  background: linear-gradient(135deg, #30c2d3 0%, #68d19f 100%);
  color: #07333d;
  box-shadow: 0 10px 24px rgba(15, 139, 158, .2);
}
#cc-main .cm__btn[data-role="all"]:hover {
  border-color: #168b9d;
  background: linear-gradient(135deg, #20b4c8 0%, #52c58e 100%);
}
#cc-main .cm__btn[data-role="necessary"] {
  border-color: #91cbd4;
  background: #f2fafb;
  color: #0a5668;
  box-shadow: none;
}
#cc-main .cm__btn[data-role="necessary"]:hover {
  border-color: #55adbc;
  background: #e4f5f7;
}
#cc-main .cm__btn[data-role="show"] {
  border-color: #b7d5da;
  background: #fff;
  color: #174650;
  box-shadow: none;
}
#cc-main .cm__btn[data-role="show"]:hover { background: #eff8f9; }
#cc-main .cm__btn:hover { transform: translateY(-1px); }
#cc-main .cm__btn:first-child { box-shadow: 0 10px 24px rgba(0,137,168,.2); }
#cc-main .cm__btn--secondary { border-color: #c8dde2; }
#cc-main .pm {
  width: min(760px, calc(100vw - 40px));
  max-width: 760px;
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  border: 1px solid rgba(0,137,168,.16);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(13,55,65,.24);
}
#cc-main .pm__header { padding: 22px 26px 16px; }
#cc-main .pm__title { color: #12343d; font-size: 1.25rem; line-height: 1.4; }
#cc-main .pm__body { padding: 18px 26px; }
#cc-main .pm__section { border-color: #dce9ec; border-radius: 14px; }
#cc-main .pm__section-title { color: #17343d; font-size: .95rem; font-weight: 600; }
#cc-main .pm__section-desc { color: #536b72; font-size: .84rem; line-height: 1.65; }
#cc-main .pm__footer { padding: 16px 26px 22px; }
#cc-main .pm__btn { min-height: 44px; padding: 9px 15px; font-size: .86rem; font-weight: 600; }
#cc-main :focus-visible { outline: 3px solid rgba(0,137,168,.4); outline-offset: 3px; }

.tgo-cookie-preferences {
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  padding: 9px 16px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.tgo-cookie-preferences svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tgo-cookie-preferences:hover,
.tgo-cookie-preferences:focus-visible {
  transform: translateY(-1px);
  background: #fff;
  color: #007d99;
}

@media (max-width: 640px) {
  #cc-main .cm { width: calc(100vw - 20px); border-radius: 20px; }
  #cc-main .cm__body { padding: 24px 20px 16px; }
  #cc-main .cm__title { grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; }
  #cc-main .cm__title:before { width: 38px; height: 49px; }
  #cc-main .cm__title { font-size: 1.1rem; }
  #cc-main .cm__desc { font-size: .84rem; line-height: 1.6; }
  #cc-main .cm__btns { padding: 0 20px 22px; grid-template-columns: 1fr; gap: 10px; }
  #cc-main .cm__btn-group { grid-template-columns: 1fr; gap: 10px; }
  #cc-main .pm { width: 100%; max-height: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #cc-main *,
  #cc-main *:before,
  #cc-main *:after { transition: none !important; animation: none !important; }
}