.elementor-1204 .elementor-element.elementor-element-252b7928{--display:flex;}.elementor-1204 .elementor-element.elementor-element-1e6ccd32{--display:flex;}.elementor-1204 .elementor-element.elementor-element-4af08a40{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-608efc3b{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-6cce8008{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-2699f5b1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-34a0ee1f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1204 .elementor-element.elementor-element-2fdaddce{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-1204 .elementor-element.elementor-element-38b68702 .elementor-button{background-color:#A78252;}.elementor-1204 .elementor-element.elementor-element-6db1c824{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1204 .elementor-element.elementor-element-757ad02b{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-7434f0fe{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-39c5cabc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-4b6764e2{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;}.elementor-1204 .elementor-element.elementor-element-4391f428{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-4391f428.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-4391f428 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-7051869{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-7051869.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-7051869 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-136ae{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-136ae.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-136ae .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-a5fbe4b{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-a5fbe4b.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-a5fbe4b .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-2c923fd4{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-2c923fd4.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-2c923fd4 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-a8c62a8{width:100%;max-width:100%;}.elementor-1204 .elementor-element.elementor-element-a8c62a8.elementor-element{--align-self:stretch;}.elementor-1204 .elementor-element.elementor-element-a8c62a8 .elementor-button-content-wrapper{flex-direction:row;}.elementor-1204 .elementor-element.elementor-element-267921da{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-65d5e8b0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-1b90cdde{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1204 .elementor-element.elementor-element-5ce2ff6c{--grid-columns:3;}.elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-loop-container{grid-auto-rows:1fr;}.elementor-1204 .elementor-element.elementor-element-5ce2ff6c .e-loop-item > .elementor-section, .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .e-loop-item > .elementor-section > .elementor-container, .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .e-loop-item > .e-con, .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-1204 .elementor-element.elementor-element-5ce2ff6c .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-1204 .elementor-element.elementor-element-30dd69e9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-277015a5{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-6278b78{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;}.elementor-1204 .elementor-element.elementor-element-198a66b6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1204 .elementor-element.elementor-element-51f5b1a3{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;}.elementor-1204 .elementor-element.elementor-element-fc2e09f{width:auto;max-width:auto;}.elementor-1204 .elementor-element.elementor-element-151d5499{width:auto;max-width:auto;}.elementor-1204 .elementor-element.elementor-element-151d5499 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-1204 .elementor-element.elementor-element-3a275749{--display:flex;--justify-content:space-around;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;}.elementor-1204 .elementor-element.elementor-element-65b15ba2 img{width:100%;}@media(min-width:768px){.elementor-1204 .elementor-element.elementor-element-252b7928{--width:100%;}.elementor-1204 .elementor-element.elementor-element-608efc3b{--width:100%;}.elementor-1204 .elementor-element.elementor-element-6cce8008{--width:100%;}.elementor-1204 .elementor-element.elementor-element-7434f0fe{--width:100%;}.elementor-1204 .elementor-element.elementor-element-39c5cabc{--width:100%;}.elementor-1204 .elementor-element.elementor-element-4b6764e2{--width:100%;}.elementor-1204 .elementor-element.elementor-element-267921da{--width:100%;}.elementor-1204 .elementor-element.elementor-element-65d5e8b0{--width:100%;}.elementor-1204 .elementor-element.elementor-element-1b90cdde{--width:100%;}.elementor-1204 .elementor-element.elementor-element-30dd69e9{--width:100%;}.elementor-1204 .elementor-element.elementor-element-277015a5{--width:100%;}.elementor-1204 .elementor-element.elementor-element-6278b78{--width:100%;}.elementor-1204 .elementor-element.elementor-element-198a66b6{--width:100%;}.elementor-1204 .elementor-element.elementor-element-3a275749{--width:100%;}}@media(max-width:1024px){.elementor-1204 .elementor-element.elementor-element-5ce2ff6c{--grid-columns:2;}}@media(max-width:767px){.elementor-1204 .elementor-element.elementor-element-5ce2ff6c{--grid-columns:1;}}/* Start custom CSS for container, class: .elementor-element-4af08a40 *//* ==========================================================
   GÓC CÓ GU — GÓC XANH CHILD CATEGORY
   CHILD HERO V4 — SAGE GREEN ACCENTS

   Structure:
   Child Hero
   └── Child Hero Inner
       └── Child Hero Card
           ├── Child Hero Main
           │   ├── Child Hero Copy
           │   │   ├── Parent Eyebrow
           │   │   ├── Archive Title
           │   │   └── Archive Description
           │   └── Child Hero Context
           │       ├── Context Eyebrow
           │       ├── Context Description
           │       └── Back Setup CTA
           └── Child Hero Visual
               └── Hero Visual Image

   V4:
   - Giữ nguyên cấu trúc, tỷ lệ và responsive của V3
   - Chuyển toàn bộ accent sage/vàng cam sang sage green
   - Hero paper vẫn sáng hơn nền trang
   - Viền navy giữ nguyên để tạo khung
   - Vòng sage mảnh phía ngoài
   - CTA / eyebrow / hover đồng bộ hệ màu Góc Xanh
   - Responsive đầy đủ
========================================================== */


/* ==========================================================
   01. SECTION ROOT

   Hero không tự tạo khoảng trắng phía trên.
   Breadcrumb sẽ quản spacing riêng.
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}


/* Elementor root wrapper */

.elementor-1204 .elementor-element.elementor-element-4af08a40 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   02. INNER — 1192PX
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-inner {
  width: min(
    1192px,
    calc(100% - 48px)
  ) !important;

  max-width: 1192px !important;
  min-width: 0 !important;

  align-self: center !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-inner > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   03. HERO CARD — ENHANCED OUTER BORDER

   Desktop:
   Content = 1.42fr
   Image   = .86fr
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-card {
  position: relative !important;
  isolation: isolate !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 400px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(330px, .86fr) !important;

  align-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  /* Viền navy mảnh nhưng rõ hơn nền trang */
  border:
    1px solid
    rgba(14,19,33,.16) !important;

  border-radius:
    24px !important;

  /* Paper sáng hơn để tách card khỏi nền cream */
  background:
    rgba(255,253,248,.82) !important;

  /*
   * Layer 1: vòng sage rất mảnh phía ngoài
   * Layer 2: shadow chính
   * Layer 3: shadow tiếp xúc
   * Layer 4: highlight bên trong
   */
  box-shadow:
    0 0 0 1px rgba(122,126,106,.17),
    0 26px 64px rgba(14,19,33,.065),
    0 6px 18px rgba(14,19,33,.032),
    inset 0 1px 0 rgba(255,255,255,.76) !important;

  overflow: hidden !important;
}


/* Elementor boxed-wrapper fallback */

.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-card > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 400px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(330px, .86fr) !important;

  align-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}


/* ==========================================================
   04. HERO MAIN / CONTENT AREA

   Copy    = 1.05fr
   Context = .72fr
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-main {
  width: 100% !important;
  min-width: 0 !important;

  min-height: 400px !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(230px, .72fr) !important;

  align-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;

  padding:
    44px
    0
    44px
    44px !important;

  /*
   * Gradient paper rất nhẹ.
   * Giúp phần chữ không bị phẳng nhưng vẫn giữ tone sáng.
   */
  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255,255,255,.70) 0%,
      rgba(255,255,255,0) 38%
    ),
    linear-gradient(
      135deg,
      rgba(255,253,248,.76) 0%,
      rgba(248,243,236,.54) 100%
    ) !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-main > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(230px, .72fr) !important;

  align-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}


/* ==========================================================
   05. HERO COPY
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-copy {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;

  padding:
    0
    42px
    0
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-copy > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   06. EYEBROW LEFT
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-eyebrow {
  position: relative !important;

  width: auto !important;

  margin:
    0
    0
    15px !important;

  padding:
    0
    0
    0
    44px !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-eyebrow::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 30px;
  height: 1px;

  background:
    #7A7E6A;

  transform:
    translateY(-50%);
}


.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-eyebrow,
.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-eyebrow
.elementor-heading-title {
  color:
    #7A7E6A !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.35 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-eyebrow
.elementor-heading-title {
  margin: 0 !important;
}


/* ==========================================================
   07. ARCHIVE TITLE — H1
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-title {
  width: 100% !important;

  max-width: 460px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-title
.elementor-heading-title {
  margin: 0 !important;

  color:
    var(--gcg-navy,#0E1321) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    clamp(
      42px,
      3.8vw,
      58px
    ) !important;

  font-weight:
    700 !important;

  line-height:
    1.04 !important;

  letter-spacing:
    -.045em !important;

  text-wrap:
    balance;
}


/* ==========================================================
   08. ARCHIVE DESCRIPTION
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-description {
  width: 100% !important;

  max-width: 470px !important;

  margin:
    19px
    0
    0 !important;

  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-description,
.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-description p,
.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-description
.elementor-widget-container {
  color:
    rgba(14,19,33,.59) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    16px !important;

  font-weight:
    500 !important;

  line-height:
    1.72 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-description p {
  margin: 0 !important;
}


/* ==========================================================
   09. CONTEXT COLUMN
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-context {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;

  padding:
    6px
    34px
    6px
    40px !important;

  border-left:
    1px solid
    rgba(14,19,33,.105) !important;

  /*
   * Tint beige rất nhẹ để context có một lớp riêng,
   * không tạo cảm giác card trong card.
   */
  background:
    linear-gradient(
      180deg,
      rgba(216,207,195,.15) 0%,
      rgba(216,207,195,.07) 100%
    ) !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-context > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
}


/* ==========================================================
   10. CONTEXT EYEBROW
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-context-eyebrow {
  width: 100% !important;

  margin:
    0
    0
    12px !important;

  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-context-eyebrow,
.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-context-eyebrow
.elementor-heading-title {
  color:
    #7A7E6A !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    10.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.45 !important;

  letter-spacing:
    .05em !important;

  text-transform:
    uppercase !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-context-eyebrow
.elementor-heading-title {
  margin: 0 !important;
}


/* ==========================================================
   11. CONTEXT DESCRIPTION
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-context-description {
  width: 100% !important;

  max-width: 235px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-context-description,
.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-context-description p,
.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-context-description
.elementor-widget-container {
  color:
    rgba(14,19,33,.62) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    14px !important;

  font-weight:
    500 !important;

  line-height:
    1.68 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-context-description p {
  margin: 0 !important;
}


/* ==========================================================
   12. BACK SETUP CTA
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-back-setup {
  width: auto !important;

  align-self: flex-start !important;

  margin:
    24px
    0
    0 !important;

  padding: 0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-back-setup
.elementor-button-wrapper {
  width: auto !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-back-setup
.elementor-button {
  width: auto !important;

  min-height:
    42px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin: 0 !important;

  padding:
    0
    17px !important;

  border:
    1px solid
    rgba(122,126,106,.68) !important;

  border-radius:
    9px !important;

  background:
    rgba(255,253,248,.72) !important;

  color:
    var(--gcg-navy,#0E1321) !important;

  box-shadow:
    0 4px 12px
    rgba(14,19,33,.025) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}


@media (hover:hover) {

  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-back-setup
  .elementor-button:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(115,123,105,.92) !important;

    background:
      rgba(255,253,248,.96) !important;

    box-shadow:
      0 7px 18px
      rgba(14,19,33,.045) !important;
  }
}


/* ==========================================================
   13. VISUAL
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-visual {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height:
    400px !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    var(--gcg-beige,#D8CFC3) !important;

  overflow:
    hidden !important;
}


/*
 * Gradient nhẹ ở mép trái ảnh,
 * giúp ảnh nối với content tự nhiên hơn.
 */

.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-visual::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 34px;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(237,231,221,.20) 0%,
      rgba(237,231,221,0) 100%
    );
}


/* ==========================================================
   14. IMAGE
========================================================== */

.elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-image {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-image
.elementor-widget-container,

.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-image a,

.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-image img {
  width:
    100% !important;

  height:
    100% !important;
}


.elementor-1204 .elementor-element.elementor-element-4af08a40
.gcg-child-hero-image img {
  display:
    block !important;

  object-fit:
    cover !important;

  object-position:
    center !important;
}


/* ==========================================================
   15. TABLET LANDSCAPE
   <= 1024PX

   Content trên
   Image xuống dưới
========================================================== */

@media (max-width:1024px) {

  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-inner {
    width:
      calc(100% - 48px) !important;

    max-width:
      calc(100% - 48px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-card,
  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-card > .e-con-inner {
    grid-template-columns:
      1fr !important;

    min-height:
      0 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-main {
    min-height:
      0 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-visual {
    min-height:
      300px !important;

    height:
      300px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-visual::before {
    display:
      none !important;
  }
}


/* ==========================================================
   16. TABLET PORTRAIT
   <= 820PX
========================================================== */

@media (max-width:820px) {

  .elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-main,
  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-main > .e-con-inner {
    grid-template-columns:
      1fr !important;

    padding:
      34px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-copy {
    padding:
      0
      0
      28px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-context {
    padding:
      28px
      0
      0 !important;

    border-left:
      0 !important;

    border-top:
      1px solid
      rgba(14,19,33,.10) !important;

    background:
      transparent !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-context-description {
    max-width:
      560px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-description {
    max-width:
      620px !important;
  }
}


/* ==========================================================
   17. MOBILE
   <= 640PX
========================================================== */

@media (max-width:640px) {

  .elementor-1204 .elementor-element.elementor-element-4af08a40 {
    padding-bottom:
      18px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-inner {
    width:
      calc(100% - 28px) !important;

    max-width:
      calc(100% - 28px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-card {
    border-radius:
      18px !important;

    border-color:
      rgba(14,19,33,.14) !important;

    box-shadow:
      0 0 0 1px rgba(122,126,106,.12),
      0 18px 40px rgba(14,19,33,.05),
      0 4px 12px rgba(14,19,33,.025),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-main,
  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-main > .e-con-inner {
    padding:
      26px
      22px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-title
  .elementor-heading-title {
    font-size:
      36px !important;

    line-height:
      1.06 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-description,
  .elementor-1204 .elementor-element.elementor-element-4af08a40 .gcg-child-hero-description p,
  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-description
  .elementor-widget-container {
    font-size:
      14px !important;

    line-height:
      1.7 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-visual {
    height:
      230px !important;

    min-height:
      230px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-back-setup
  .elementor-button {
    min-height:
      40px !important;

    font-size:
      12.5px !important;
  }
}


/* ==========================================================
   18. VERY SMALL
   <= 380PX
========================================================== */

@media (max-width:380px) {

  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-inner {
    width:
      calc(100% - 24px) !important;

    max-width:
      calc(100% - 24px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-4af08a40
  .gcg-child-hero-title
  .elementor-heading-title {
    font-size:
      33px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7434f0fe *//* ==========================================================
   GÓC CÓ GU — GÓC XANH CHILD CATEGORY
   TOPIC NAVIGATION — 6 DANH MỤC — ACTIVE FIX

   Slug chuẩn:
   1. cay-theo-dieu-kien
   2. cay-theo-khong-gian
   3. cham-soc-cay
   4. terrarium
   5. thuy-sinh-va-ho-ca-mini
   6. bo-tri-goc-xanh

   Responsive:
   - Desktop: 6 cột / 1 hàng
   - Tablet: 3 cột / 2 hàng
   - Mobile: 1 cột / 6 hàng

   Active:
   - Sage Green riêng cho Góc Xanh
   - Tự động theo body.category-{slug}

   Paste into:
   Green Child Topic Navigation
   → Advanced
   → Custom CSS
========================================================== */


/* ==========================================================
   01. ROOT
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin:
    18px
    0
    0 !important;

  padding:
    0 !important;

  background:
    transparent !important;
}


/* ==========================================================
   02. INNER — 1192PX
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-inner {
  width:
    min(
      1192px,
      calc(100% - 48px)
    ) !important;

  max-width:
    1192px !important;

  min-width:
    0 !important;

  align-self:
    center !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-inner > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   03. NAV GRID — 6 CỘT
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-list,
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-list > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    ) !important;

  align-items:
    stretch !important;

  gap:
    8px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   04. BUTTON WIDGET
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-item {
  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-wrapper {
  width:
    100% !important;

  height:
    100% !important;
}


/* ==========================================================
   05. DEFAULT PILL
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    48px !important;

  height:
    100% !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  padding:
    0
    10px !important;

  border:
    1px solid
    rgba(14,19,33,.10) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,253,248,.52) !important;

  color:
    rgba(14,19,33,.72) !important;

  box-shadow:
    none !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    11.8px !important;

  font-weight:
    600 !important;

  line-height:
    1.3 !important;

  white-space:
    nowrap !important;

  text-decoration:
    none !important;

  transition:
    transform .20s ease,
    border-color .20s ease,
    background-color .20s ease,
    color .20s ease,
    box-shadow .20s ease !important;
}


/* ==========================================================
   06. BUTTON CONTENT WRAPPER
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-content-wrapper {
  min-width:
    0 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    8px !important;
}


/* ==========================================================
   07. ICON WRAPPER
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  flex:
    0 0 18px !important;

  width:
    18px !important;

  height:
    18px !important;

  margin:
    0 !important;

  color:
    inherit !important;

  opacity:
    1 !important;

  filter:
    none !important;
}


/* ==========================================================
   08. SVG ICON
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon svg {
  display:
    block !important;

  width:
    17px !important;

  height:
    17px !important;

  color:
    inherit !important;

  fill:
    currentColor !important;

  opacity:
    1 !important;

  filter:
    none !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon
svg [fill="none"] {
  fill:
    none !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon
svg [fill]:not([fill="none"]) {
  fill:
    currentColor !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon
svg [stroke]:not([stroke="none"]) {
  stroke:
    currentColor !important;
}


/* ==========================================================
   09. FONT AWESOME / <i>
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-icon i {
  color:
    inherit !important;

  font-size:
    16px !important;

  line-height:
    1 !important;

  opacity:
    1 !important;

  filter:
    none !important;
}


/* ==========================================================
   10. BUTTON TEXT
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
.elementor-button-text {
  min-width:
    0 !important;

  flex:
    0 1 auto !important;

  color:
    inherit !important;

  font-weight:
    inherit !important;

  line-height:
    1.3 !important;

  white-space:
    inherit !important;
}


/* ==========================================================
   11. DEFAULT HOVER
========================================================== */

@media (hover:hover) {

  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(122,126,106,.40) !important;

    background:
      rgba(255,253,248,.86) !important;

    color:
      #596052 !important;

    box-shadow:
      0 7px 18px
      rgba(14,19,33,.035) !important;
  }
}


/* ==========================================================
   12. ACTIVE — CÂY THEO ĐIỀU KIỆN
========================================================== */

body.category-cay-theo-dieu-kien
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="cay-theo-dieu-kien"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   13. ACTIVE — CÂY THEO KHÔNG GIAN
========================================================== */

body.category-cay-theo-khong-gian
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="cay-theo-khong-gian"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   14. ACTIVE — CHĂM SÓC CÂY
========================================================== */

body.category-cham-soc-cay
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="cham-soc-cay"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   15. ACTIVE — TERRARIUM
========================================================== */

body.category-terrarium
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="terrarium"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   16. ACTIVE — THỦY SINH & HỒ CÁ MINI
========================================================== */

body.category-thuy-sinh-va-ho-ca-mini
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="thuy-sinh-va-ho-ca-mini"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   17. ACTIVE — BỐ TRÍ GÓC XANH
========================================================== */

body.category-bo-tri-goc-xanh
.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[href*="bo-tri-goc-xanh"] {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   18. ACTIVE FALLBACK

   Dùng thêm 2 cơ chế dự phòng:
   1. Elementor/WordPress có aria-current="page"
   2. Có thể gắn class is-active thủ công cho widget nếu cần

   Nhờ vậy nền active vẫn hiện ngay cả khi URL được render
   khác trailing slash hoặc preview Elementor khác frontend.
========================================================== */

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[aria-current="page"],

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item.is-active
a.elementor-button {
  color:
    #FFFDF8 !important;

  border-color:
    transparent !important;

  background-color:
    #7A7E6A !important;

  background-image:
    linear-gradient(
      135deg,
      #89917C,
      #737B69
    ) !important;

  box-shadow:
    0 8px 20px
    rgba(122,126,106,.20) !important;

  font-weight:
    700 !important;
}


.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item
a.elementor-button[aria-current="page"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

.elementor-1204 .elementor-element.elementor-element-7434f0fe
.gcg-child-topic-nav-item.is-active
a.elementor-button
:is(
  .elementor-button-text,
  .elementor-button-icon
) {
  color:
    #FFFDF8 !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   19. ACTIVE TEXT + ICON
========================================================== */

body.category-cay-theo-dieu-kien
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="cay-theo-dieu-kien"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

body.category-cay-theo-khong-gian
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="cay-theo-khong-gian"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

body.category-cham-soc-cay
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="cham-soc-cay"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

body.category-terrarium
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="terrarium"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

body.category-thuy-sinh-va-ho-ca-mini
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="thuy-sinh-va-ho-ca-mini"]
:is(
  .elementor-button-text,
  .elementor-button-icon
),

body.category-bo-tri-goc-xanh
.elementor-1204 .elementor-element.elementor-element-7434f0fe
a.elementor-button[href*="bo-tri-goc-xanh"]
:is(
  .elementor-button-text,
  .elementor-button-icon
) {
  color:
    #FFFDF8 !important;

  font-weight:
    700 !important;
}


/* ==========================================================
   20. ACTIVE HOVER
========================================================== */

@media (hover:hover) {

  body.category-cay-theo-dieu-kien
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="cay-theo-dieu-kien"]:hover,

  body.category-cay-theo-khong-gian
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="cay-theo-khong-gian"]:hover,

  body.category-cham-soc-cay
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="cham-soc-cay"]:hover,

  body.category-terrarium
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="terrarium"]:hover,

  body.category-thuy-sinh-va-ho-ca-mini
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="thuy-sinh-va-ho-ca-mini"]:hover,

  body.category-bo-tri-goc-xanh
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  a.elementor-button[href*="bo-tri-goc-xanh"]:hover {
    color:
      #FFFDF8 !important;

    border-color:
      transparent !important;

    background:
      linear-gradient(
        135deg,
        #89917C,
        #737B69
      ) !important;

    transform:
      translateY(-1px);

    box-shadow:
      0 10px 22px
      rgba(122,126,106,.24) !important;
  }
}


/* ==========================================================
   21. TABLET <= 1024PX
   3 CỘT × 2 HÀNG
========================================================== */

@media (max-width:1024px) {

  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-inner {
    width:
      calc(100% - 48px) !important;

    max-width:
      calc(100% - 48px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-list,

  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-list > .e-con-inner {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    gap:
      9px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button {
    min-height:
      48px !important;

    padding:
      8px
      14px !important;

    font-size:
      12px !important;

    white-space:
      normal !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button-text {
    white-space:
      normal !important;

    text-align:
      center !important;
  }
}


/* ==========================================================
   22. MOBILE <= 640PX
   1 CỘT
========================================================== */

@media (max-width:640px) {

  .elementor-1204 .elementor-element.elementor-element-7434f0fe {
    margin-top:
      16px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-inner {
    width:
      calc(100% - 28px) !important;

    max-width:
      calc(100% - 28px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-list,

  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-list > .e-con-inner {
    grid-template-columns:
      1fr !important;

    gap:
      8px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item {
    height:
      auto !important;

    min-height:
      0 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button {
    width:
      100% !important;

    height:
      auto !important;

    min-height:
      46px !important;

    justify-content:
      flex-start !important;

    padding:
      10px
      18px !important;

    font-size:
      12.5px !important;

    white-space:
      normal !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button-content-wrapper {
    width:
      100% !important;

    justify-content:
      flex-start !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button-text {
    white-space:
      normal !important;

    text-align:
      left !important;
  }
}


/* ==========================================================
   23. IOS / SAFARI HARDENING
========================================================== */

@supports (-webkit-touch-callout:none) {

  .elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-list,
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-list > .e-con-inner {
    min-width:
      0 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-item,
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button-wrapper,
  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button {
    min-width:
      0 !important;

    -webkit-transform:
      translateZ(0);

    transform:
      translateZ(0);
  }


  .elementor-1204 .elementor-element.elementor-element-7434f0fe
  .gcg-child-topic-nav-item
  .elementor-button-content-wrapper {
    min-width:
      0 !important;
  }


  @media (max-width:640px) {

    .elementor-1204 .elementor-element.elementor-element-7434f0fe .gcg-child-topic-nav-item,
    .elementor-1204 .elementor-element.elementor-element-7434f0fe
    .gcg-child-topic-nav-item
    .elementor-button-wrapper,
    .elementor-1204 .elementor-element.elementor-element-7434f0fe
    .gcg-child-topic-nav-item
    .elementor-button {
      height:
        auto !important;

      min-height:
        46px !important;
    }
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-267921da *//* ==========================================================
   GÓC CÓ GU — GÓC XANH CHILD CATEGORY
   CHILD POSTS SECTION — SAGE ACCENTS

   Structure:
   Child Posts
   └── Child Posts Inner
       ├── Child Posts Head
       │   ├── Posts Eyebrow
       │   └── Posts Title
       └── Child Posts Loop
========================================================== */


/* ==========================================================
   01. SECTION ROOT

   Topic Navigation → Posts = 54px
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;

  padding:
    54px
    0
    0 !important;

  background: transparent !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   02. SECTION INNER — 1192PX
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-inner {
  width:
    min(
      1192px,
      calc(100% - 48px)
    ) !important;

  max-width:
    1192px !important;

  min-width:
    0 !important;

  align-self:
    center !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-inner > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    stretch !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   03. SECTION HEAD
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-head {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    0 !important;

  margin:
    0
    0
    24px !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-head > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   04. EYEBROW
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-eyebrow {
  position:
    relative !important;

  width:
    auto !important;

  margin:
    0
    0
    9px !important;

  padding:
    0
    0
    0
    42px !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-eyebrow::before {
  content: "";

  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    29px;

  height:
    1px;

  background:
    #7A7E6A;

  transform:
    translateY(-50%);
}


.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-eyebrow,
.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-eyebrow
.elementor-heading-title {
  color:
    #7A7E6A !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  line-height:
    1.35 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-eyebrow
.elementor-heading-title {
  margin:
    0 !important;
}


/* ==========================================================
   05. SECTION TITLE — H2
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-title {
  width:
    100% !important;

  max-width:
    760px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-title
.elementor-heading-title {
  margin:
    0 !important;

  color:
    var(--gcg-navy,#0E1321) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    clamp(
      30px,
      3.1vw,
      42px
    ) !important;

  font-weight:
    700 !important;

  line-height:
    1.08 !important;

  letter-spacing:
    -.038em !important;

  text-wrap:
    balance;
}


/* ==========================================================
   06. LOOP GRID WIDGET
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da .gcg-child-posts-loop {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-widget-container {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   07. LOOP GRID — 3 CỘT
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-loop-container {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    ) !important;

  align-items:
    stretch !important;

  column-gap:
    20px !important;

  row-gap:
    22px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* Một số phiên bản Elementor dùng class này */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.e-loop-item {
  min-width:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;
}


/* Template/card bên trong item */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.e-loop-item > .elementor {
  width:
    100% !important;

  height:
    100% !important;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.e-loop-item
.elementor-element {
  min-width:
    0;
}


/* ==========================================================
   08. PAGINATION WRAPPER
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination {
  width:
    100% !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  flex-wrap:
    wrap !important;

  gap:
    8px !important;

  margin:
    34px
    0
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   09. PAGINATION ITEM
========================================================== */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers {
  width:
    38px !important;

  height:
    38px !important;

  min-width:
    38px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    1px solid
    transparent !important;

  border-radius:
    50% !important;

  background:
    transparent !important;

  color:
    var(--gcg-navy,#0E1321) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  text-decoration:
    none !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease !important;
}


/* Trang hiện tại */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.current {
  background:
    #DCE1D5 !important;

  color:
    var(--gcg-navy,#0E1321) !important;
}


/* Previous / Next */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.prev,

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.next {
  border-color:
    rgba(14,19,33,.10) !important;

  background:
    rgba(255,253,248,.52) !important;

  font-size:
    0 !important;
}


/* Chuyển chữ Previous/Next thành mũi tên */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.prev::before {
  content:
    "←";

  font-size:
    18px;

  font-weight:
    500;

  line-height:
    1;
}


.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.next::before {
  content:
    "→";

  font-size:
    18px;

  font-weight:
    500;

  line-height:
    1;
}


/* Dấu ba chấm */

.elementor-1204 .elementor-element.elementor-element-267921da
.gcg-child-posts-loop
.elementor-pagination
.page-numbers.dots {
  width:
    auto !important;

  min-width:
    22px !important;

  border:
    0 !important;

  background:
    transparent !important;
}


/* ==========================================================
   10. PAGINATION HOVER
========================================================== */

@media (hover:hover) {

  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-pagination
  a.page-numbers:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(122,126,106,.40) !important;

    background:
      rgba(255,253,248,.85) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-pagination
  .page-numbers.current:hover {
    transform:
      none;

    background:
      #DCE1D5 !important;
  }
}


/* ==========================================================
   11. TABLET LANDSCAPE
   <= 1024PX
========================================================== */

@media (max-width:1024px) {

  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-inner {
    width:
      calc(100% - 48px) !important;

    max-width:
      calc(100% - 48px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-loop-container {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    column-gap:
      18px !important;

    row-gap:
      20px !important;
  }
}


/* ==========================================================
   12. MOBILE
   <= 640PX
========================================================== */

@media (max-width:640px) {

  .elementor-1204 .elementor-element.elementor-element-267921da {
    padding-top:
      44px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-inner {
    width:
      calc(100% - 28px) !important;

    max-width:
      calc(100% - 28px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-head {
    margin-bottom:
      20px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-title
  .elementor-heading-title {
    font-size:
      32px !important;

    line-height:
      1.1 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-loop-container {
    grid-template-columns:
      1fr !important;

    row-gap:
      18px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-pagination {
    margin-top:
      28px !important;

    gap:
      6px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-loop
  .elementor-pagination
  .page-numbers {
    width:
      36px !important;

    height:
      36px !important;

    min-width:
      36px !important;
  }
}


/* ==========================================================
   13. VERY SMALL
   <= 380PX
========================================================== */

@media (max-width:380px) {

  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-inner {
    width:
      calc(100% - 24px) !important;

    max-width:
      calc(100% - 24px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-267921da
  .gcg-child-posts-title
  .elementor-heading-title {
    font-size:
      29px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-30dd69e9 *//* ==========================================================
   GÓC CÓ GU — GÓC XANH CHILD CATEGORY
   FINAL EXPLORE SECTION — SAGE ACCENTS

   Structure:
   Child Final Explore
   └── Final Explore Inner
       └── Final Explore Card
           ├── Final Explore Copy
           │   ├── Final Explore Eyebrow
           │   ├── Final Explore Title
           │   └── Final Explore Actions
           │       ├── Primary CTA
           │       └── Secondary CTA
           └── Final Explore Visual
               └── Final Explore Image
========================================================== */


/* ==========================================================
   01. SECTION ROOT

   Pagination → Final Explore = 54px
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;

  padding:
    54px
    0
    60px !important;

  background: transparent !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9 > .e-con-inner {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   02. INNER — 1192PX
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-inner {
  width:
    min(
      1192px,
      calc(100% - 48px)
    ) !important;

  max-width:
    1192px !important;

  min-width:
    0 !important;

  align-self:
    center !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-inner > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   03. CARD

   Copy   = 1.2fr
   Visual = .8fr
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-card {
  position:
    relative !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    230px !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(320px,.8fr) !important;

  align-items:
    stretch !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(14,19,33,.10) !important;

  border-radius:
    22px !important;

  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,0) 26%
    ),
    linear-gradient(
      90deg,
      rgba(216,207,195,.54) 0%,
      rgba(237,231,221,.74) 100%
    ) !important;

  box-shadow:
    0 18px 44px
    rgba(14,19,33,.035) !important;

  overflow:
    hidden !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-card > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    230px !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(320px,.8fr) !important;

  align-items:
    stretch !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   04. COPY
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-copy {
  position:
    relative !important;

  z-index:
    3 !important;

  width:
    100% !important;

  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    center !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    34px
    40px !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-copy > .e-con-inner {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    center !important;

  gap:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   05. EYEBROW
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-eyebrow {
  width:
    auto !important;

  margin:
    0
    0
    10px !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-eyebrow,
.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-eyebrow
.elementor-heading-title {
  color:
    #7A7E6A !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    11px !important;

  font-weight:
    700 !important;

  line-height:
    1.4 !important;

  letter-spacing:
    .055em !important;

  text-transform:
    uppercase !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-eyebrow
.elementor-heading-title {
  margin:
    0 !important;
}


/* ==========================================================
   06. TITLE
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-title {
  width:
    100% !important;

  max-width:
    610px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-title
.elementor-heading-title {
  margin:
    0 !important;

  color:
    var(--gcg-navy,#0E1321) !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    clamp(
      29px,
      3vw,
      40px
    ) !important;

  font-weight:
    700 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    -.035em !important;

  text-wrap:
    balance;
}


/* ==========================================================
   07. ACTIONS
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-actions {
  width:
    auto !important;

  max-width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  flex-wrap:
    wrap !important;

  gap:
    14px !important;

  margin:
    24px
    0
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-actions > .e-con-inner {
  width:
    auto !important;

  max-width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  flex-wrap:
    wrap !important;

  gap:
    14px !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* ==========================================================
   08. BUTTON WIDGET
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-btn {
  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn
.elementor-button-wrapper {
  width:
    auto !important;
}


/* ==========================================================
   09. BUTTON BASE
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn
.elementor-button {
  width:
    auto !important;

  min-height:
    44px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    10px !important;

  margin:
    0 !important;

  padding:
    0
    19px !important;

  border:
    1px solid
    rgba(122,126,106,.64) !important;

  border-radius:
    8px !important;

  box-shadow:
    none !important;

  font-family:
    "Quicksand",
    sans-serif !important;

  font-size:
    12.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;

  text-align:
    center !important;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease !important;
}


/* ==========================================================
   10. PRIMARY BUTTON
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn-primary
.elementor-button {
  border-color:
    #7A7E6A !important;

  background:
    #7A7E6A !important;

  color:
    #FFFDF8 !important;

  box-shadow:
    0 7px 18px
    rgba(122,126,106,.18) !important;
}


/* ==========================================================
   11. SECONDARY BUTTON
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn-secondary
.elementor-button {
  background:
    rgba(255,253,248,.30) !important;

  color:
    var(--gcg-navy,#0E1321) !important;
}


/* ==========================================================
   12. BUTTON ICON
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn
.elementor-button-content-wrapper {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    10px !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn
.elementor-button-icon {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  color:
    inherit !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-btn
.elementor-button-icon svg {
  width:
    14px !important;

  height:
    14px !important;

  color:
    inherit !important;

  fill:
    currentColor !important;
}


/* ==========================================================
   13. BUTTON HOVER
========================================================== */

@media (hover:hover) {

  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-btn-primary
  .elementor-button:hover {
    transform:
      translateY(-1px);

    border-color:
      #7A7E6A !important;

    background:
      #7A7E6A !important;

    box-shadow:
      0 10px 22px
      rgba(115,123,105,.24) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-btn-secondary
  .elementor-button:hover {
    transform:
      translateY(-1px);

    border-color:
      rgba(115,123,105,.82) !important;

    background:
      rgba(255,253,248,.72) !important;

    box-shadow:
      0 7px 18px
      rgba(14,19,33,.035) !important;
  }
}


/* ==========================================================
   14. VISUAL
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-visual {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    230px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    var(--gcg-beige,#D8CFC3) !important;

  overflow:
    hidden !important;
}


/* Gradient nối copy và ảnh */

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-visual::before {
  content: "";

  position:
    absolute;

  inset:
    0
    auto
    0
    0;

  z-index:
    3;

  width:
    62px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(237,231,221,.52) 0%,
      rgba(237,231,221,0) 100%
    );
}


/* ==========================================================
   15. IMAGE
========================================================== */

.elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-image {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-image
.elementor-widget-container,

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-image a,

.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-image img {
  width:
    100% !important;

  height:
    100% !important;
}


.elementor-1204 .elementor-element.elementor-element-30dd69e9
.gcg-child-final-explore-image img {
  display:
    block !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  opacity:
    .90 !important;

  filter:
    saturate(.88)
    contrast(.96)
    brightness(1.02);
}


/* ==========================================================
   16. TABLET
   <= 1024PX
========================================================== */

@media (max-width:1024px) {

  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-inner {
    width:
      calc(100% - 48px) !important;

    max-width:
      calc(100% - 48px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-card,
  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-card > .e-con-inner {
    grid-template-columns:
      minmax(0,1.08fr)
      minmax(300px,.92fr) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-copy {
    padding:
      32px !important;
  }
}


/* ==========================================================
   17. TABLET PORTRAIT
   <= 820PX
========================================================== */

@media (max-width:820px) {

  .elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-card,
  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-card > .e-con-inner {
    grid-template-columns:
      1fr !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-copy {
    min-height:
      230px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9 .gcg-child-final-explore-visual {
    height:
      220px !important;

    min-height:
      220px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-visual::before {
    inset:
      0
      0
      auto
      0;

    width:
      100%;

    height:
      42px;

    background:
      linear-gradient(
        180deg,
        rgba(237,231,221,.46) 0%,
        rgba(237,231,221,0) 100%
      );
  }
}


/* ==========================================================
   18. MOBILE
   <= 640PX
========================================================== */

@media (max-width:640px) {

  .elementor-1204 .elementor-element.elementor-element-30dd69e9 {
    padding:
      44px
      0
      40px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-inner {
    width:
      calc(100% - 28px) !important;

    max-width:
      calc(100% - 28px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-card {
    border-radius:
      18px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-copy {
    min-height:
      0 !important;

    padding:
      28px
      22px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-title
  .elementor-heading-title {
    font-size:
      30px !important;

    line-height:
      1.14 !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-actions,
  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-actions > .e-con-inner {
    width:
      100% !important;

    flex-direction:
      column !important;

    align-items:
      stretch !important;

    gap:
      10px !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-btn,
  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-btn
  .elementor-button-wrapper,
  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-btn
  .elementor-button {
    width:
      100% !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-visual {
    height:
      205px !important;

    min-height:
      205px !important;
  }
}


/* ==========================================================
   19. VERY SMALL
   <= 380PX
========================================================== */

@media (max-width:380px) {

  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-inner {
    width:
      calc(100% - 24px) !important;

    max-width:
      calc(100% - 24px) !important;
  }


  .elementor-1204 .elementor-element.elementor-element-30dd69e9
  .gcg-child-final-explore-title
  .elementor-heading-title {
    font-size:
      27px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-252b7928 *//* ==========================================================
   GCG — SETUP CHILD CATEGORY
   GLOBAL PAGE BASE
========================================================== */

.elementor-1204 .elementor-element.elementor-element-252b7928 {
  --gcg-child-max: 1192px;

  --gcg-navy: #0E1321;
  --gcg-cream: #EDE7DD;
  --gcg-cream-2: #F6F1EA;
  --gcg-beige: #D8CFC3;
  --gcg-taupe: #B89C84;
  --gcg-gray: #6E7480;
  --gcg-paper: #FFFDF8;

  --gcg-line: rgba(14,19,33,.11);
  --gcg-line-soft: rgba(14,19,33,.07);

  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(
      circle at 7% 2%,
      rgba(255,255,255,.80) 0%,
      transparent 25%
    ),
    radial-gradient(
      circle at 94% 12%,
      rgba(216,207,195,.17) 0%,
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #F8F3EC 0%,
      #EDE7DD 45%,
      #F4EEE5 100%
    ) !important;

  overflow: visible !important;
}

.elementor-1204 .elementor-element.elementor-element-252b7928,
.elementor-1204 .elementor-element.elementor-element-252b7928 * {
  box-sizing: border-box !important;
}/* End custom CSS */