/* =========================================================
   E-MAGAZINE THEMES
   ========================================================= */


/* =========================================================
   LIGHT THEMES
   ========================================================= */


/* ---------------------------------------------------------
   WHITE
   --------------------------------------------------------- */

.magazine[data-theme="white"] {

    --mag-bg: #ffffff;
    --mag-text: #333333;
    --mag-heading: #111111;

    --mag-block-bg: #f7f7f7;
    --mag-block-text: #333333;

    --mag-accent: #3b6ea5;
    --mag-border: #dddddd;
	
	  --mag-quote-bg: #f7f7f7;
    --mag-text-muted: #777777;

}


/* ---------------------------------------------------------
   CREAM
   --------------------------------------------------------- */

.magazine[data-theme="cream"] {

    --mag-bg: #f5f0e6;
    --mag-text: #33302b;
    --mag-heading: #171512;

    --mag-block-bg: #ebe3d4;
    --mag-block-text: #33302b;

    --mag-accent: #b58b45;
    --mag-border: #d8cdbb;
	   --mag-quote-bg: #ebe3d4;
    --mag-text-muted: #756b5d;

}


/* ---------------------------------------------------------
   MINT
   --------------------------------------------------------- */

.magazine[data-theme="mint"] {

    --mag-bg: #eef7f3;
    --mag-text: #263b35;
    --mag-heading: #16352d;

    --mag-block-bg: #dceee8;
    --mag-block-text: #263b35;

    --mag-accent: #4b9b82;
    --mag-border: #c8ddd5;
	
	    --mag-quote-bg: #dceee8;
    --mag-text-muted: #58776b;

}


/* ---------------------------------------------------------
   SKY
   --------------------------------------------------------- */

.magazine[data-theme="sky"] {

    --mag-bg: #edf5fa;
    --mag-text: #293b47;
    --mag-heading: #102b3b;

    --mag-block-bg: #dcebf3;
    --mag-block-text: #293b47;

    --mag-accent: #4385a8;
    --mag-border: #c6dce7;
	
	    --mag-quote-bg: #dcebf3;
    --mag-text-muted: #5b7585;

}


/* ---------------------------------------------------------
   LAVENDER
   --------------------------------------------------------- */

.magazine[data-theme="lavender"] {

    --mag-bg: #f5f1fa;
    --mag-text: #393244;
    --mag-heading: #241b32;

    --mag-block-bg: #e8def2;
    --mag-block-text: #393244;

    --mag-accent: #8565a6;
    --mag-border: #d8c9e3;
	
	   --mag-quote-bg: #e8def2;
    --mag-text-muted: #766582;

}


/* =========================================================
   DARK THEMES
   ========================================================= */


/* ---------------------------------------------------------
   DARK
   --------------------------------------------------------- */

.magazine[data-theme="dark"] {

    --mag-bg: #111111;
    --mag-text: #dddddd;
    --mag-heading: #ffffff;

    --mag-block-bg: #1b1b1b;
    --mag-block-text: #dddddd;

    --mag-accent: #ffffff;
    --mag-border: #333333;
	
	    --mag-quote-bg: #1b1b1b;
    --mag-text-muted: #aaaaaa;

}


/* ---------------------------------------------------------
   NAVY
   --------------------------------------------------------- */

.magazine[data-theme="navy"] {

    --mag-bg: #101a2b;
    --mag-text: #d9e2ef;
    --mag-heading: #ffffff;

    --mag-block-bg: #17243a;
    --mag-block-text: #d9e2ef;

    --mag-accent: #5b9bd5;
    --mag-border: #2d405d;
	   --mag-quote-bg: #17243a;
    --mag-text-muted: #9eb8d8;

}


/* ---------------------------------------------------------
   RED
   --------------------------------------------------------- */

/* RED - Đỏ sáng */
.magazine[data-theme="red"] {
    --mag-bg: #fff1f0;
    --mag-text: #3b2424;
    --mag-heading: #7f1717;

    --mag-block-bg: #ffe0dd;
    --mag-block-text: #3b2424;

    --mag-accent: #c62828;
    --mag-border: #efc4c1;
	
	    --mag-quote-bg: #ffe0dd;
    --mag-text-muted: #8d5555;
}

/* PURPLE - Tím sáng */
.magazine[data-theme="purple"] {
    --mag-bg: #f5f0ff;
    --mag-text: #35234d;
    --mag-heading: #28143f;

    --mag-block-bg: #e8ddff;
    --mag-block-text: #35234d;

    --mag-accent: #7945b5;
    --mag-border: #d9c8f5;
	    --mag-quote-bg: #e8ddff;
    --mag-text-muted: #79658f;
}

/* GREEN - Xanh lá sáng */
.magazine[data-theme="green"] {
    --mag-bg: #eff8f0;
    --mag-text: #23432c;
    --mag-heading: #173b22;

    --mag-block-bg: #dceedd;
    --mag-block-text: #23432c;

    --mag-accent: #278347;
    --mag-border: #c6dfca;
	    --mag-quote-bg: #0b4b30;
    --mag-text-muted: #b7d9c3;
}

/* GOLD - Đen Gold */
.magazine[data-theme="gold"] {
    --mag-bg: #17130b;
    --mag-text: #e7dfcf;
    --mag-heading: #fff6df;

    --mag-block-bg: #282116;
    --mag-block-text: #e7dfcf;

    --mag-accent: #d6ae55;
    --mag-border: #493e2b;
	    --mag-quote-bg: #282116;
    --mag-text-muted: #c9b98f;
}


/* =========================================================
   GLOBAL THEME APPLICATION
   ========================================================= */

.magazine {

    background-color: var(--mag-bg);
    color: var(--mag-text);

}


/* Headings */

.magazine h1,
.magazine h2,
.magazine h3,
.magazine h4,
.magazine h5,
.magazine h6 {

    color: var(--mag-heading);

}


/* Paragraph */

.magazine p {

    color: var(--mag-text);

}


/* Links */

.magazine a {

    color: var(--mag-accent);

}

.magazine a:hover {

    color: var(--mag-heading);

}


/* Borders */

.magazine hr {

    border-color: var(--mag-border);

}


/* Common block background */

.mag-block-bg {

    background-color: var(--mag-block-bg);
    color: var(--mag-block-text);

}


/* Common accent */

.mag-accent {

    color: var(--mag-accent);

}


/* Accent background */

.mag-accent-bg {

    background-color: var(--mag-accent);

}


/* =========================================================
   SELECTION
   ========================================================= */

.magazine ::selection {

    background: var(--mag-accent);
    color: var(--mag-bg);

}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.magazine input,
.magazine textarea,
.magazine select {

    background-color: var(--mag-block-bg);
    color: var(--mag-text);
    border-color: var(--mag-border);

}

.magazine input:focus,
.magazine textarea:focus,
.magazine select:focus {

    border-color: var(--mag-accent);
    outline: none;

}


/* =========================================================
   BLOCK COMMON
   ========================================================= */

.magazine .mag-block {

    color: var(--mag-text);

}

.magazine .mag-block-title {

    color: var(--mag-heading);

}

.magazine .mag-block-content {

    color: var(--mag-text);

}


/* =========================================================
   QUOTE
   ========================================================= */

.magazine .mag-quote {

    border-left: 3px solid var(--mag-accent);

}

.magazine .mag-quote-mark {

    color: var(--mag-accent);

}


/* =========================================================
   BUTTON / SEE MORE
   ========================================================= */

.magazine .mag-button,
.magazine .see-more {

    background-color: var(--mag-accent);
    color: var(--mag-bg);

}

.magazine .mag-button:hover,
.magazine .see-more:hover {

    background-color: var(--mag-heading);
    color: var(--mag-bg);

}


/* =========================================================
   TIMELINE
   ========================================================= */

.magazine .mag-timeline {

    color: var(--mag-text);

}

.magazine .mag-timeline-heading h2 {

    color: var(--mag-heading);

}

.magazine .mag-timeline-item {

    border-color: var(--mag-border);

}

.magazine .mag-timeline-year {

    color: var(--mag-accent);

}


/* Timeline line */

.magazine .mag-timeline-list::before {

    background-color: var(--mag-border);

}


/* Timeline dot */

.magazine .mag-timeline-item::before {

    background-color: var(--mag-accent);
    border-color: var(--mag-bg);

}


/* =========================================================
   COUNTER
   ========================================================= */

.magazine .mag-counter {

    color: var(--mag-text);

}

.magazine .mag-counter-value {

    color: var(--mag-accent);

}

.magazine .mag-counter-title {

    color: var(--mag-heading);

}


/* =========================================================
   STICKY
   ========================================================= */

.magazine .mag-sticky {

    color: var(--mag-text);

}

.magazine .mag-sticky h2 {

    color: var(--mag-heading);

}

.magazine .mag-sticky-content {

    color: var(--mag-text);

}

.magazine .mag-sticky-item {

    border-color: var(--mag-border);

}


/* =========================================================
   ENDING
   ========================================================= */

.magazine .mag-ending {

    color: var(--mag-text);

}

.magazine .mag-ending-title {

    color: var(--mag-heading);

}

.magazine .mag-ending-content {

    color: var(--mag-text);

}

.magazine .mag-ending-line {

    background-color: var(--mag-accent);

}


/* =========================================================
   GALLERY
   ========================================================= */

.magazine .mag-gallery-item {

    border-color: var(--mag-border);

}

.magazine .mag-gallery-item figcaption {

    color: var(--mag-text);

}


/* =========================================================
   IMAGE + TEXT
   ========================================================= */

.magazine .mag-image-text-content {

    color: var(--mag-text);

}

.magazine .mag-image-text-content h2 {

    color: var(--mag-heading);

}


/* =========================================================
   VIDEO
   ========================================================= */

.magazine .mag-video-content {

    color: var(--mag-text);

}

.magazine .mag-video-content h2 {

    color: var(--mag-heading);

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .magazine {

        overflow-x: hidden;

    }

}